H5飞机小游戏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小游戏</title>
</head>
<body>
<div style="text-align: center;">
<canvas id = "img" width="600" height="600" style="background:#7266BA;"></canvas>


</div>
</body>
<script type="text/javascript">

/*
48到57 0到9
65到90 a到z（A到Z）
112到135 F1到F24
8 BackSpace（退格）
9 Tab
13 Enter（回车）
20 Caps_Lock（大写锁定）
32 Space（空格键）
37 Left（左箭头）
38 Up（上箭头）
39 Right（右箭头）
40 Down（下箭头）

dd = setTimeout(arguments.callee,200);
clearTimeout(dd);
*/

var ctx = document.getElementById('img').getContext('2d'),
x = Math.floor(Math.random()*30), //位置x轴
bg = '#7266BA',//背景颜色
launchcolor = '#C4FA55',
y = 29, //位置y轴
dx,dy,dx1,dy1, //删除
loca, //子弹
direction, //当前行走的方向
width = 18, //宽度
height = 18, //高度
obstacle ,//障碍
x1,y1,x2,y2,x3,y3,x4,y4;//战斗机的形状

//由于要全部显示，所以起始点不能小于2
while(x < 2) {
x = Math.floor(Math.random()*30);
}

// 战斗机
function dram(x,y,color,t) {

//绘制的点快颜色
ctx.fillStyle = t;

//绘制的点块大小 context.fillRect(x,y,width,height);
x1 = (x - 1) * 20 + 2 ;
y1 = (y - 1) * 20 + 2 ;

x2 = (x - 2) * 20 + 2 ;
y2 = y * 20 + 2 ;

x3 = (x - 1) * 20 + 2 ;
y3 = y * 20 + 2 ;

x4 = x * 20 + 2 ;
y4 = y * 20 + 2 ;

ctx.fillRect(x1,y1,width,height);
ctx.fillStyle = color;
ctx.fillRect(x2,y2,width,height);
ctx.fillStyle = 'greenyellow';
ctx.fillRect(x3,y3,width,height);
ctx.fillStyle = color;
ctx.fillRect(x4,y4,width,height);

}

//子弹
function bullet(xc,yc,color) {

//绘制的点快颜色
ctx.fillStyle = color;

//绘制的点块大小 context.fillRect(x,y,width,height);

loca = ( (yc - 1) * 30) + xc - 1 ;
console.log('num' + loca);
ctx.fillRect(((loca%30)*20) + 2,(Math.floor(loca/30)*20) + 2,width,height);
}

function Obstacle () {

ctx.fillStyle = 'deepskyblue';
var i = 0;

while(i < 25) {
obstacle = Math.floor(Math.random() * 500);
if(obstacle%30 != 0 && (obstacle + 1)%30 != 0) {
ctx.fillRect(((obstacle%30)*20) + 2,(Math.floor(obstacle/30)*20) + 2,18,18);
}

i++;
}

}

Obstacle();

document.onkeydown = function (event){

direction = event.keyCode;

dram(x,y,bg,bg);

switch(direction) {
case 37:
x = x - 1;if(x < 2) {x = 2 ; }
break;
case 39:
x = x + 1;if(x > 29){x = 29 ;}
break;
case 32:
dx = x;dy = y;launch();
break;
}
}

function launch () {

if(dx && dy) {

//清楚子弹上一个位置
if((y - dy) >= 1 ) {
bullet(dx,dy,bg);
}

// 发射子弹
--dy;
bullet(dx,dy,launchcolor);

}

}

//初始化开始
function start() {

扫描二维码关注公众号，回复： 3473329 查看本文章

//初始化飞机位置
dram(x,y,'#fff','red');

setTimeout(arguments.callee,1);

}

start();
setInterval(launch,100);

</script>
</html>

猜你喜欢