Web前端开发 小游戏_canvas贪吃蛇

前端开发小游戏|js游戏web前端开发|游戏前端开发 技能
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>前端游戏开发dome</title>
</head>
<body>
<canvasid=”can” width=”400″ height=”400″ style=”background:Black”></canvas>
<script>
varsn= [42,41],
dz=43,
fx=1,
n,ctx=document.getElementById(“can”).getContext(“2d”);
functiondraw(t,c){
ctx.fillStyle=c;
ctx.fillRect(t%20*20+1,~~(t/20) *20+1,18,18);
}
document.onkeydown = function (e) {
vare=e|| window.event;
if (e.preventDefault) {
e.preventDefault();
}else{
e.returnValue=false;
};
fx=sn[1] -sn[0] == (n= [-1,-20,1,20][(e|| event).keyCode-37] ||fx) ?fx:n;
};
!function(){
sn.unshift(n=sn[0] +fx);
if (sn.indexOf(n,1) >0||n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) returnalert(
“GAME OVER”);
draw(n,”Lime”);
if (n==dz) {
while (sn.indexOf(dz=~~(Math.random() *400)) >=0);
draw(dz,”Yellow”);
}else
draw(sn.pop(),”Black”);
setTimeout(arguments.callee,130);
}();
</script>
</body>
</html>
前端开发的小游戏|html5游戏前端开发
» 本文来自:前端开发者 » 《Web前端开发 小游戏_canvas贪吃蛇》
» 本文链接地址:https://www.rokub.com/3584.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!