【本站通知】:推荐站点30元/月 顶部三栏广告80一个月,买一个月送一个月,其他广告位请联系QQ客服☞ 点击这里给我发消息 欢迎加入站长之家官方QQ交流群
爱站云低价服务器
高流量 图文广告位出售
高流量 图文广告位出售

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

仿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>



猜你喜欢

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

欢迎 发表评论:


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

ABOUT US

爱站云网络科技有限公司成立于2017年
创始人:Johnny Kun 由95后的小青年创建
目前公司服务于云计算、网站建设、SEO优化等
团队成员平均3年以上从业经验,核心团队正在不断扩展。

Contact information

QQ:207385345
Phone:15684092120
E-mail:kf@heikw.com
Website:www.heikw.cn

爱站云博客

Copyright © 2016-2018 www.heikw.cn Reserved.备案号:鲁ICP备16035655号

本站采用 Z-BLOG 核心程序 感谢 爱站云 赞助北京云服务器

爱站云安全认证