仿flash的html5网页躲避游戏

2024-09-05 12:21:04

字体：大中小

来源：转载

供稿：网友

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>

上一篇：走迷宫游戏，网页游戏代码

下一篇：JavaScript网页游戏代码-扫雷

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注