canvas 繪製貪吃蛇遊戲

let canvas = document.getelementbyid("canvas");

let context = canvas.getcontext("2d");
// 分數記錄
let fraction = 0;
// 定義貪吃蛇的組成，方塊物件
class block
// 畫方法
draw()
}// 蛇類
class snake
draw()
};move()
if(this.direction == "left")
if(this.direction == "up")
if(this.direction == "down")
// 增加頭部
this.body.unshift(newhead);
// 進行判斷蛇頭是否碰到了蘋果，若碰到了則不刪除最後乙個方塊，反之刪除最後乙個方塊
// 進行檢測，如果生成在蛇身上，繼續生成，反之結束迴圈
while(true)
}break;
}// 分數加入
fraction++;
}else
};// 碰撞檢測
impactchecking()
// 檢視是否碰到自己身體
for(let i = 1; i < this.body.length; i++)}}
}// 實物，蘋果類
// 列
col;
// 行
row;
sizer;
constructor();
// 初始化蘋果
initialization()
// 畫蘋果的方法
draw()
}// 生成乙個蘋果
// 生成乙個蛇
setinterval(() => , 200);
// 對貪吃蛇控制
// 上下左右運動
$("body").keydown((event) => 
// 上
if(event.keycode == 38 && snake.direction != "down")
// 右
if(event.keycode == 39 && snake.direction != "left")
// 下
if(event.keycode == 40 && snake.direction != "up")
});

還有乙個蘋果類。用於進行隨機生成

吃蘋果，在移動方法中，如果蛇的頭方塊和蘋果方塊重合那麼吃到蘋果，重新呼叫生成蘋果方法。

碰撞檢測，如果行和列超過範圍，即碰撞發生

最重要的，座標行和列化，使用的時候乘以乙個數就行

canvas 繪製貪吃蛇遊戲

分數記錄 let fraction 0 定義貪吃蛇的組成，方塊物件 class block 畫方法 draw 蛇類 class snake draw move if this.direction left if this.direction up if this.direction down 增加頭...

canvas 繪製貪吃蛇遊戲

分數記錄 let fraction 0 定義貪吃蛇的組成，方塊物件 class block 畫方法 draw 蛇類 class snake draw move if this.direction left if this.direction up if this.direction down 增加頭...

canvas實現貪吃蛇

效果圖ps 這個只是思路，詳細可看 注釋 一 先把蛇畫出來 定義一下蛇的結構，用乙個陣列儲存一堆矩形，包含蛇頭 紅 和蛇身 灰 畫蛇 初始狀態 二 蛇能動 重點 蛇移動方式 自始至終都只有蛇頭在動 需要乙個儲存方向的變數 direction 根據方向進行移動，一次移動乙個格 根據按鍵改方向 三 隨機...