仿flash的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 update = 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();
update();
}
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>
发表评论