html5实现微信打飞机游戏

更新时间:2023-04-06 16:08:53 阅读：评论：0

html5实现微信的打飞机游戏,利用这个小游戏学习一个html5吧，这是开发web的一个方向

复制代码代码如下:

// javascript document

var c = document.getelementbyid(“dotu”);

var cxt = c.getcontext(“2d”);

var img = newimg(“./asts/bg_01.jpg”);

var fps;

cxt.drawimage(img,0,0,480,800);

var flivverlog = 0;

var flivver1 = newimg(“./asts/flivver.png”);

var flivver2 = newimg(“./asts/flivver2.png”);

var flivver3 = newimg(“./asts/flivver3.png”);

// 用于记录游戏的时间，越到后面越快

var time1 = 0;

var time2 = 80;

// 积分

var jifen = 0;

function getsudu(){

var number = parint(math.random()*10);

if(number < 5 && number > 0){

return number;

}

return 1;

}

// 飞机的对象

function flivverobj(hp,ewidth,eheight,eimg,esudu){

// 随机的x

this.x = parint(math.random()*460+1);

this.y = 0;

// 血量

this.hp = hp;

// 挨打

this.hit = 0;

// 是否死亡

this.over = 0;

this.width = ewidth;

this.height = eheight;

this.img = eimg;

this.sudu = esudu;

}

// 获取飞机

function getflivver(type){

switch(type){

ca 1:

return new flivverobj(100,50,30,flivver1,getsudu());

ca 2:

return new flivverobj(500,70,90,flivver2,getsudu());

ca 3:

return new flivverobj(1000,110,170,flivver3,getsudu());

}

}

function cartridge(x,y){

this.x = x;

this.y = y;

}

(function(cxt){

var dotu = {nums:0};

// 用于存放小飞机

var flivver = new array();

var flivverimg = newimg(“./asts/flivver.png”);

// 自己

var me = {x:240,y:750};

var meimg = newimg(‘asts/me.png’);

// 子弹

var cartridges = new array();

var cartridgeimg = newimg(‘./asts/cartridge.png’);

var boo1 = newimg(‘./asts/boo1.png’);

var over = newimg(‘./asts/over.png’);

//

dotu.updatshe的复数e = function(){

dotu.ttimes();

// 设置背景

dotu.tbg();

// 设置小飞机

dotu.tflivver();

// 画自己

dotu.tme();

// 子弹

dotu.cartridge();

cxt.font = “italic 20px 微软雅黑”;

cxt.stroketext(“积分：” + jifen, 10, 30);

$(‘#fjs’).html(flivver.length);

$(‘#zds’).html(cartridges.length);

$(‘#scfj’).html(“1000/” + time2 + ” 毫秒”);

}

dotu.ttimes = function(){

time1++ ;

// 100 秒 1个档位

if(time1 == 1000){

time1 = 0;

time2 = (time2 == 20) ? 20 : time2 – 20;

}

}

/**

* 设置移动的背景

*/

dotu.tbg = function(){

dotu.nums++;

if(dotu.nums == 800){

dotu.nums = 0;

}

// 画布的背景

cxt.drawimage(img,0,dotu.nums,480,800);

cxt.drawimage(img,0,dotu.nums – 800,480,800);

}

dotu.tflivver = function(){

// 生成飞机

if(dotu.nums % time2 == 0){

flivverlog++;

if(flivverlog % 6 == 0){

flivver.push(getfl是什么文字ivver(2));

}el if(flivverlog % 13 == 0){

flivver.push(getflivver(3));

}el{

flivver.push(getflivver(1));

}

}

for(a in flivver){

flivver[a].y += flivver[a].sudu;

// 如果超出屏幕将该小飞机删除

if(flivver[a].y > 780){

flivver.splice(a, 1);

}

// 将小飞机画到画布上

// 小飞机死亡

if(flivver[a].over > 0){

flivver[a].over –;

if(flivver[a].over > 20){

cxt.drawimage(boo1,flivver[a].x + f归国四子livver[a].width/2 – 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);

}el if(flivver[a].over > 2){

cxt.drawimage(over,flivver[a].x + flivver[a].width/2 – 20 ,flivver[a].y + flivver[a].height / 2 -10,40,43);

}el{

flivver.splice(a, 1);

}

}el{

cxt.drawimage(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,flivver[a].height);

// 判断自己是否死亡

if( me.x > (flivver[a].x – flivver[a].width + 20) && (me.x) <(flivver[a].x + flivver[a].width – 20) && (me.y) < (flivver[a].y + flivver[a].height + 20) && (me.y + 72) > (flivver[a].y – 20)){

gameover();

}

if(flivver[a].hit > 0){

cxt.drawimage(boo1,flivver[a].x + flivver[a].width/2 – 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);

//cxt.drawimage(boo1,flivver[a].x + 5 ,flivver[a].y,41,39);

flivver[a].hit–;

}

}

}

}

// 更新自己的距离

dotu.tme = function(){

cxt.drawimage(meimg,me.x,me.y,64,72);

}

// 更新子弹方法

dotu.cartridge = function(){

if(dotu.nums % 10 == 0){

cartridges.push(new cartridge(me.x + 30,me.y));

}

for(i in cartridges){

// 飞到顶部就将obj删除掉

if(cartridges[i].y < 0){

cartridges.splice(i, 1);

continue;

}

cartridges[i].y -= 20;

// 将小飞机画到画布上

cxt.drawimage(cartridgeimg,cartridges[i].x,cartridges[i].y,7,17);

// 子弹碰到飞机的情况

for(j in flivver){

if(flivver[j].over > 0){

continue;

}

if(cartridges[i].x > flivver[j].x && cartridges[i].x < flivver[j].x+ flivver[j].width && cartridges[i].y > flivver[j].y && cartridges[i]家和万事兴对联.y -flivver[j].height < flivver[j].y){

flivver[j].hit = 10;

$(‘#isdz’).html(‘打中了编号’ + j);

if(flivver[j].hp > 1){

flivver[j].hp -= 80;

}el{

flivver[j].over = 40;

jifen += 50000;

}

// 子弹消失

cartridges.splice(i, 1);

break;

}

}

}

}

// 绑定鼠标事件

c.addeventlistener(‘moumove’, function onmoumove(evt) {

me.x = evt.layerx – $(‘#dotu’).offt().left – 32;

me.y = evt.layery – 36 ;

$(‘#sbx’).html(me.x);

$(‘#sby’).html(me.y);

});

fps = tinterval(dotu.update, 1000/100);

}(cxt))

function newimg(src){

var obj = new image();

obj.src = src;

return obj;

}

//tinterval(h.update, 1000/65);

复制代码代码如下:

<!doctype html>

<html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”>

<head>

<meta http-equiv司空见惯的反义词=”content-type” content=”text/html; chart=utf-8″ />

<title>打飞机 – 多途</title>

<script type=”text/javascript” src=”./jquery.min.1.7.1.js”></script>

<style>

body{padding:0; margin:0; text-align:center}

.content{border:1px #000 solid; width:480px; margin:0 auto; height:800px; display:block; font-size:72px;}

.info,.blog{border:1px #000 solid; position:fixed; top:5px; right:5px; width:150px; text-align:left}

.blog{ left:10px; background:#000; text-align:center; width:100px}

.blog a{ color: #fff; text-decoration:none; font-size:15px; }

</style>

</head>

<body>

<div class=”content”><canvas id=”dotu” width=”480″ height=”800″></canvas></div>

<div class=”blog”><a href=”/”>回到博客首页</a></div>

<div class=”info”>

鼠标x：<span id=”sbx”></span>

鼠标y：<span id=”sby”></span>

小飞机数:<span id=”fjs”></span>

子弹数:<span id=”zds”></span>

打中:<span id=”isdz”></span>

生成飞机时间:<span id=”scfj”></span>