仿flash的html5网页躲避游戏

2013/11/20 22:48:00  人气 2744    模板学院  
专题:Html5教程

html5 躲避游戏,仿一个flash的avoid game,小小的网页游戏代码,不这HTML5不支持目前主流的IE8,请使用IE9或火狐、Chrome或Opera等浏览器查看效果。游戏玩法,用键盘控制下边的蓝色方块来躲避快速落下的方块,如果不小心被碰上则游戏结束,考察反应能力。

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“ />
<title>仿flash的html5躲避游戏,avoid game代码</title>
</head>
<body>
<canvas id=“cv“></canvas>
<script>
var cv = document.getElementById(‘cv‘),
ctx = cv.getContext(‘2d‘);
w = 1000;
h = 800;
cv.width = w;
cv.height = h;
var paintCv = function(){
ctx.fillStyle = ‘black‘;
ctx.fillRect(0, 0, w, h)
}
var size = 20,
playerX = w/size/2,
playerY = h/size -1,
speed = 30,
gameLoop = null,
elemyArr = [],
elemyNum = 50,
score = 0;

var paintPlayer = function(){
ctx.fillStyle = ‘blue‘;
ctx.fillRect(playerX * size, playerY * size, size, size);
}

var * = function(){
if(playerX >= w/size-1){
playerX = w/size-1;
} else if(playerX <= 0){
playerX = 0;
} else if(playerY >= h/size-1){
playerY = h/size-1;
} else if(playerY <= 0){
playerY = 0;
}

for(var i=0; i<elemyNum; i++){
elemyArr[i].y++;
if(elemyArr[i].y >= h/size){
elemyArr.splice(i, 1);
var x = Math.round(Math.random() * w/size);
var y = Math.round(Math.random() * -h/size);
elemyArr.push({‘x‘:x,‘y‘:y});
score++;
}

if(elemyArr[i].x == playerX && elemyArr[i].y == playerY){
alert(‘GAME OVER! Score:‘ + score)
score = 0;
}
}
}

var paintElemy = function(){
for(var i=0; i<elemyNum; i++){
ctx.fillStyle = ‘white‘;
ctx.fillRect(elemyArr[i].x * size, elemyArr[i].y * size, size, size);
}
}

var draw = function(){
paintCv();
paintPlayer();
paintElemy();
*();
}

var init = function(){
document.onkeydown = function(e){
var code = e.keyCode;
if(code == 37)playerX -= 1;
if(code == 38)playerY -= 1;
if(code == 39)playerX += 1;
if(code == 40)playerY += 1;
}

for(var i=0; i<elemyNum; i++){
var x = Math.round(Math.random() * w/size);
var y = Math.round(Math.random() * -h/size);
elemyArr.push({‘x‘:x,‘y‘:y})
}

gameLoop = setInterval(draw, 1000/speed)
}

init();

</script>
</body>
</html>
百事纟超管纟快乐(ID1000)设为专题11-20 22:48

. 微信,微博,QQ空间点击右上角的三个点分享给朋友。经典话题等你参与。关注baishiwlkj公众号成

发表回复

   


  通知楼主
暂无回复!