打灰机的游戏

最新推荐文章于 2019-06-26 09:36:37 发布

iteye_6481

最新推荐文章于 2019-06-26 09:36:37 发布

阅读量109

点赞数

文章标签： javascript 游戏 ViewUI

睡不着想打灰机就做了个打灰机的小游戏，拿上来消遣消遣
就监听左右方向键和空格键，你们懂的~~

打灰机.zip

开发环境是Chrome13
下面是代码：

<html>
<head>
<style>
body {
margin:0px;
padding:0px;
font-family:微软雅黑;
background-color:#aaa;
text-align:center;
}
</style>
<script type="text/javascript">
/*http://2629783.blog.51cto.com/2619783/495283*/
var canvas = null; //vanvas结点
var ctx = null; //getContext对象
var i = 0;
var j = 0;
var t = null; //定时器
var keyLock = false; //键盘锁定，防止左右键同时按下
var left = 287; //初始时绿色大方快距canvas左边距离
var targets = new Array(); //存放打击目标的数组（横纵坐标）
var bullets = new Array(); //存放子弹的数组（横纵坐标）
function init(){//初始化
canvas = document.getElementById('myCanvas');
if (canvas && canvas.getContext) {
ctx = canvas.getContext('2d');
/*初始化targets数组*/
for (i = 0; i < 25; i++) {
targets.push(new Array(3+i*23,3));
targets.push(new Array(3+i*23,26));
targets.push(new Array(3+i*23,49));
targets.push(new Array(3+i*23,72));
}
/*在canvas中画出目标*/
ctx.fillStyle = '#ddd';
for(i = 0; i < targets.length; i++){
ctx.fillRect(targets[i][0], targets[i][1], 20, 20);
}
/*在canvas中画出两个绿色方块*/
ctx.fillStyle = '#0f0';
ctx.fillRect(left, 400, 15, 10);
ctx.fillRect(left+7, 370, 1, 40);
/*添加键盘监听事件*/
document.addEventListener('keydown', keydown, false);
document.addEventListener('keyup', keyup, false);
/*开始执行draw操作*/
setInterval(draw,50);
} else {
return false;
}
}
function draw(){
/*刷新子弹位置*/
for(i = 0; i < bullets.length; i++){
ctx.fillStyle = '#f00';
ctx.clearRect(bullets[i][0], bullets[i][1], 1, 5);
bullets[i][1] -= 5;
ctx.fillRect(bullets[i][0], bullets[i][1], 1, 5);
/*如果子弹超出边界，则删除，节省内存资源*/
if (bullets[i][1] < 0) {
ctx.clearRect(bullets[i][0], bullets[i][1], 1, 5);
bullets.splice(i, 1);
continue;
}
/*如果击中目标，则子弹和目标一起删除*/
for (j = 0; j < targets.length; j++) {
if ((bullets[i][0]+1) >= targets[j][0] && bullets[i][0] <= (targets[j][0]+20) && bullets[i][1] >= targets[j][1] && bullets[i][1] <= (targets[j][1]+20)) {
ctx.clearRect(targets[j][0], targets[j][1], 20, 20);
ctx.clearRect(bullets[i][0], bullets[i][1], 1, 5);
targets.splice(j, 1);
bullets.splice(i, 1);
break;
}
}
}
}
/*空格键发射子弹，不涉及键盘锁；左右方向键控制左右滑动，按下时加锁，弹起时解锁，防止左右键同时按下情况*/
function keydown(event){
if (32 == event.keyCode) {
shoot();
return false;
}
if (keyLock) {
return false;
}
keyLock = true;
if (37 == event.keyCode) {
move('left');
} else if(39 == event.keyCode) {
move('right');
}
}
/*左右方向键弹起事件：解锁，清除定时器*/
function keyup(event){
if (37 == event.keyCode || 39 == event.keyCode) {
keyLock = false;
clearInterval(t);
}
}
/*射击，就是向bullets中压入新坐标*/
function shoot() {
bullets.push(new Array(left+7,360));
}
/*控制左移和右移*/
function move(dir){
t = setInterval(function(){
if ('left' == dir && left > 0) {
ctx.clearRect(left, 400, 15, 10);
ctx.clearRect(left+7, 370, 1, 40);
left -= 3;
ctx.fillStyle = '#0f0';
ctx.fillRect(left, 400, 15, 10);
ctx.fillRect(left+7, 370, 1, 40);
} else if ('right' == dir && (left+15) < 580) {
ctx.clearRect(left, 400, 15, 10);
ctx.clearRect(left+7, 370, 1, 40);
left += 3;
ctx.fillStyle = '#0f0';
ctx.fillRect(left, 400, 15, 10);
ctx.fillRect(left+7, 370, 1, 40);
}
}, 30);
}
</script>
</head>
<body οnlοad="init()">
<div style="width:580px;margin:auto;padding:0px;background:#333;"><canvas id="myCanvas" width="580px" height="450px">
your browser dose not support the canvas tag
</canvas></div>
</body>
</html>