<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script> //snake数组表示蛇 ； direction表示蛇前进的方向，默认向下 ； food表示食物
var cxt=document.getElementById("myCanvas").getContext("2d");
var snake = [{x:10,y:9},{x:10,y:8}];
var direction=40;
var food=null;
cxt.shadowBlur=37;
cxt.shadowColor="black"; //循环，间隔为100毫秒
function onframe(){
if(check(snake[0],0) || snake[0].x < 0 || snake[0].x >= 36 || snake[0].y < 0 || snake[0].y >= 36)return;
//根据方向，重新设定蛇数组首元素的坐标，从而进行移动
if(food){
if((direction==40&&snake[0].x==food.x&&snake[0].y+1==food.y)
||(direction==38&&snake[0].x==food.x&&snake[0].y-1==food.y)
||(direction==37&&snake[0].x-1==food.x&&snake[0].y==food.y)
||(direction==39&&snake[0].x+1==food.x&&snake[0].y==food.y)){
snake.unshift(food);
food=null;
}
}
snake.unshift(snake.pop());
switch(direction){
case 37:
snake[0].x = snake[1].x - 1;
snake[0].y = snake[1].y;
break;
case 38:
snake[0].x = snake[1].x;
snake[0].y = snake[1].y - 1;
break;
case 39:
snake[0].x = snake[1].x + 1;
snake[0].y = snake[1].y;
break;
case 40:
snake[0].x = snake[1].x;
snake[0].y = snake[1].y + 1;
break;
}
cxt.clearRect(0,0,360,360); //如果有食物，则绘制食物
if(food)cxt.fillRect(food.x*10,food.y*10,10,10); //绘制蛇
for(var i=0;i<snake.length;i++){
cxt.fillRect(snake[i].x*10,snake[i].y*10,10,10);
} //如果没有食物，则在随机位置上加入一粒食物
while(food==null || check(food)){
food={y:(Math.random()*36 >>>0),x:(Math.random()*36 >>>0)};
} //判断游戏是否结束
if(check(snake[0],0) || snake[0].x < 0 || snake[0].x >= 36 || snake[0].y < 0 || snake[0].y >= 36){
alert("game over\nYou get ["+(snake.length-2)+"]");
}
}
setInterval(onframe,100); //加入键盘事件，用方向键来控制蛇前进的方向
document.onkeyup = function(event){
if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-direction) != 2)){
direction = event.keyCode;
}
} //判断指定位置是否与蛇重叠
function check(food,j){
for(var i=0;i<snake.length;i++){
if(j!=i && snake[i].x==food.x && snake[i].y==food.y)return true;
}
return false;
}
</script>
</body>
</html>
PS:
1.canvas要在JS内部来绘制图形var cxt=document.getElementById("myCanvas").getContext("2d");JavaScript 使用 id （myCanvas）来寻找 canvas 元素，然后创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.var snake = [{x:10,y:9},{x:10,y:8}]; 存放json格式数据的数组
JSON的语法规则：
.数据在名称/值对中
.数据由逗号分隔
.花括号保存对象
.方括号保存数组
3.shadowBlur 属性设置或返回阴影的模糊级数
4.unshift() :JS方法可向数组的开头添加一个或更多元素，并返回新的长度。unshift() 方法不创建新的创建，而是直接修改原有的数组，push() 方法，把一个或多个元素添加到数组的尾部。pop()方法，删除并返回数组的最后一个元素。
5.setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
setInterval(code,millisec[,"lang"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计
5895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
