* {
margin: 0;
padding: 0;
}
#canvas {
display: block;
margin: 100px auto;
border: 1px solid #d3d3d3;
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");//创建2D绘图空间,画笔
var r = [{ x: 10, y: 9 }, { x: 10, y: 8 }];//蛇初始位置
var co = 40; //初始前进方向
var e = null; //表示食物
var stop = false;
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
//ctx.fillRect(10, 10, 10, 10);//画矩形
function onframe() {
// 如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且将蛇数组中最后一个元素换到首部
if (stop || r[0].x < 0 || r[0].x >= 50 || r[0].y < 0 || r[0].y >= 50) {
return;
}
if (e) {
if ((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());
// 根据方向,重新设定蛇数组的坐标,从而进行移动
switch (co) {
case 37:
r[0].x = r[1].x - 1;
r[0].y = r[1].y;
break;
case 38:
r[0].x = r[1].x;
r[0].y = r[1].y - 1;
break;
case 39:
r[0].x = r[1].x + 1;
r[0].y = r[1].y;
break;
case 40:
r[0].x = r[1].x;
r[0].y = r[1].y + 1;
break;
}
// 清空画布
ctx.clearRect(0, 0, 500, 500);
// 绘制贪吃蛇
for (var i = 0; i < r.length; i++) {
ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10)
}
// 如果没有食物,则在随机位置上加上一粒食物
if (e == null) {
e = { y: parseInt(Math.random() * 51), x: parseInt(Math.random() * 51) }
}
// 如果有食物,则绘制食物
if (e) {
ctx.fillRect(e.x * 10, e.y * 10, 10, 10)
}
if (r[0].x < 0 || r[0].x >= 50 || r[0].y < 0 || r[0].y >= 50) {
alert("大吉大利,今晚吃鸡!\n恭喜你获得了:" + (r.length - 2) + "分");
}
}
var timer = setInterval(onframe, 100);
// 加入键盘事件,用键盘来控制蛇的前进方向
// 每一个键盘对应一个值
document.onkeyup = function (eve) {
var e = eve || event;
if (e.keyCode >= 37 && e.keyCode <= 40 && Math.abs(e.keyCode - co) != 2) {
co = e.keyCode;
} else if (e.keyCode == 32) {
stop = !stop;
}
}