html5中js最短代码的贫吃蛇游戏-网页编程网

当前位置：主页 >> 网页特效 >> 正文

html5中js最短代码的贫吃蛇游戏

阅读：4630 输入：2015-11-30 11:01:21

<!DOCTYPE html><html><body>  
<canvas id="myCanvas" width="240" height="240" style="border:1px solid 
#d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>  
<script>  
var ctx=document.getElementById("myCanvas").getContext("2d"),r = [{x:10,y:9},

{x:10,y:8}],co=40,e=null;  
ctx.shadowBlur=20,ctx.shadowColor="black";  
setInterval(function(){  
if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y

>= 24)return;  
e!=null&&((co==40&&r[0].x==e.x&&r[0].y+1==e.y)||

(co==38&&r[0].x==e.x&&r[0].y-1==e.y)||(co==37&&r[0].x-

1==e.x&&r[0].y==e.y)||(co==39&&r[0].x+1==e.x&&r

[0].y==e.y))?(r.unshift(e),e=null,r.unshift(r.pop())):(r.unshift(r.pop()));  
(co==40 || co==38)?(r[0].x=r[1].x,r[0].y=r[1].y+(co==40?1:-1)):(r[0].x=r[1].x+

(co==39?1:-1),r[0].y=r[1].y);  
ctx.clearRect(0,0,240,240);  
if(e)ctx.fillRect(e.x*10,e.y*10,10,10);  
for(var i=0;i<r.length;i++)ctx.fillRect(r[i].x*10,r[i].y*10,10,10);  
while(e==null || check(e))e={y:(Math.random()*24 >>>0),x:(Math.random()

*24 >>>0)};  
if(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y

>= 24)alert("game over\nYou get ["+(r.length-2)+"]");  
},100);  
document.onkeyup = function(event){co=event.keyCode>=37 &&

event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)?

event.keyCode:co;}  
function check(e,j){  
for(var i=0;i<r.length;i++)if(j!=i && r[i].x==e.x && r

[i].y==e.y)return true;  
return false;  
}  
</script>  
</body></html>

上一篇：css实现纸页面卷曲效果
下一篇：Mysql数据数据[字节、长度、数据范围]一览表

相关阅读: 多选项卡展示特效代码; js删除前alert框确认; js网页文字特效:打字机效果