<!DOCTYPE html>
<!-- 声明html版本编写指令 H5 -->
<html lang="en">
<head>
<!-- 声明页面编码 UFT-8 国际编码 -->
<meta charset="UTF-8">
<!-- 网站三要素 关键字 页面描述 标题 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
display: block;
margin: 100px auto;
border: 1px solid #d3d3d3;
}
</style>
<body>
<!-- 画布 -->
<canvas id="canvas" width="500px" height="500px"></canvas>
<!-- 网页的游戏开发：canvas也是未来的趋势 -->
<script>
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;
}
}
</script>
</body>
</html>
