我就不簡述了,基本都寫在備註裏了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="application/javascript">
window.onload = function () {
//alert("aaa");
var canvas = document.getElementById("m_canvas"); //相當於畫布
var context = canvas.getContext("2d"); //相當於畫筆,同時指定實在2D平面繪製
var kc = 37; //給蛇一個初始方向,一個方向鍵的keyCode 和啊似科碼差不多
document.onkeydown = function (key) {
if(Math.abs(key.keyCode-kc)!=2){
//判斷小蛇不能倒退,相反的位置keycode相差爲2
kc = key.keyCode;
}
}
var array = [{x: 200, y: 150}, {x: 200, y: 155}]; //用於儲存最初的蛇身的點
var bean = null;
function draw() {
if (bean == null) {
var x = Math.floor(Math.random() * 79) * 5; //floor 向下取整,random得到的爲0~1之間的數
var y = Math.floor(Math.random() * 59) * 5;
bean = {x: x, y: y};
}
context.fillStyle = "black";
context.fillRect(0, 0, 400, 300);
context.fillStyle="blue";
context.fillRect(0,0,5,300);
context.fillRect(0,0,400,5);
context.fillRect(395,0,5,300);
context.fillRect(0,295,400,5);
context.fillStyle = "green";
context.fillRect(bean.x, bean.y, 5, 5);
context.fillStyle = "red";
for (var i = 0; i < array.length; i++) {
context.fillRect(array[i].x, array[i].y, 5, 5);
}
var point = {x: array[0].x, y: array[0].y};
switch (kc) {
case 37:
point.x = point.x - 5; //左
break;
case 38:
point.y = point.y - 5; //上
break;
case 39:
point.x = point.x + 5; //右
break;
case 40:
point.y = point.y + 5; //下
break;
}
for (var i = array.length; i >= 0; i--) {
if (i==array.length){
//其實數組應該是從length-1開始遍歷,array.length本來是數組越界的(雖然js沒有越界),添加在for循環的第一次,用於判斷死亡情況,簡化代碼
if (point.x==bean.x&&point.y==bean.y){
array[i]=array[i-1];
bean=null;
}
if (point.x>=395||point.x<=0||point.y<=0||point.y>=295){
alert("小蛇死掉了~~");
return 0;
}
for (var i = 0; i < array.length; i++) {
if (point.x==array[i].x&&point.y==array[i].y){
alert("小蛇自殺了~");
return 0;
}
}
} else if (i > 0) {
array[i] = array[i - 1]; //在不喫豆子的時候將蛇身上的每一個點往後移位,相當於蛇移動
} else {
array[0] = point; //把一個新的點賦值給蛇頭位置,即數組0號位置
}
}
setTimeout(draw, 100); //遞歸調用,設置繪製的延時,控制小蛇的速度
}
setTimeout(draw, 100); //第一次調用,以後進入遞歸
}
</script>
</head>
<body>
<canvas id="m_canvas" width="400" height="300">你的瀏覽器不支持canvas</canvas>
<p>控制 ↑↓← →,不能撞牆和撞自身</p>
</body>
</html>