好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

仿flash的html5网页躲避游戏

梦哥 2019-02-18 技术教程 0 评论
仿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 * siz
e, 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>


< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证