canvas 貪吃蛇
摘要：
效果如下
程式碼
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>貪吃...
效果如下
程式碼
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>貪吃蛇</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script src="./js/main.js"></script> </body> </html>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 分數記錄
let fraction = 0;
// 定義貪吃蛇的組成，方塊物件
class Block{
// 按照size的大小劃分行列
// 列
col;
// 行
row;
// 大小
size;
constructor(col, row, size){
this.col = col;
this.row = row;
this.size = size;
}
// 畫方法
draw(){
context.fillRect(this.col * this.size, this.row * this.size, this.size, this.size);
}
}
// 蛇類
class Snake{
body = [new Block(20, 20, 10), new Block(20, 21, 10)];
direction = "right";
apple;
constructor(apple) {
this.apple = apple;
}
draw(){
for(let i = 0; i < this.body.length; i++){
this.body[i].draw();
}
};
move(){
let head = this.body[0];
// 用於生成新蛇的方塊
let newhead;
if(this.direction == "right"){
newhead = new Block(head.col + 1, head.row, head.size);
}
if(this.direction == "left"){
newhead = new Block(head.col - 1, head.row, head.size);
}
if(this.direction == "up"){
newhead = new Block(head.col, head.row - 1, head.size);
}
if(this.direction == "down"){
newhead = new Block(head.col, head.row + 1, head.size);
}
// 增加頭部
this.body.unshift(newhead);
// 進行判斷蛇頭是否碰到了蘋果，若碰到了則不刪除最後一個方塊，反之刪除最後一個方塊
if(newhead.col == this.apple.col
&& newhead.row == this.apple.row){
// 進行檢測，如果生成在蛇身上，繼續生成，反之結束迴圈
while(true){
this.apple.initialization();
for(let i = 0; i < this.body.length; i++){
if(this.apple.row == this.body[i].row
&& this.apple.col == this.body[i].col){
this.apple.initialization();
}
}
break;
}
// 分數加入
fraction++;
}else{
// 彈出
this.body.pop();
}
};
// 碰撞檢測
impactChecking(){
// 獲取頭節點
let newBody = this.body[0];
console.log(newBody.col);
// 檢視行，列是否超過邊界
if(newBody.col > 40
|| newBody.row > 40
|| newBody.row < 0
|| newBody.col < 0){
alert("遊戲結束");
fraction = 0;
this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];
}
// 檢視是否碰到自己身體
for(let i = 1; i < this.body.length; i++){
if(newBody.col == this.body[i].col
&& newBody.row == this.body[i].row){
alert("遊戲結束");
fraction = 0;
this.body = [new Block(20, 20, 10), new Block(20, 21, 10)];
}
}
}
}
// 實物，蘋果類
class Apple{
// 列
col;
// 行
row;
sizeR;
constructor(){
this.initialization();
};
// 初始化蘋果
initialization(){
// 生成列座標
this.col = Math.floor(Math.random() * (40 - 1) + 1);
// 生成行座標
this.row = Math.floor(Math.random() * (40 - 1) + 1);
// 設定蘋果半徑
this.sizeR = 5;
}
// 畫蘋果的方法
draw(){
// 顏色
context.fillStyle = "Red";
// 畫蘋果
context.beginPath();
// 圓心座標
context.arc(this.col * this.sizeR * 2 + this.sizeR, this.row * this.sizeR * 2 + this.sizeR, this.sizeR, 0, Math.PI * 2, false);
// 填充
context.fill();
// 恢復原來顏色
context.fillStyle = "Black";
}
}
// 生成一個蘋果
let apple = new Apple();
// 生成一個蛇
let snake = new Snake(apple);
setInterval(() => {
context.clearRect(0, 0, 400, 400);
// 繪製分數
context.fillText("分數為 " + fraction, 10, 10);
// 繪製蛇
snake.draw();
// 對蛇進行移動
snake.move();
// 繪製蘋果
apple.draw();
// 進行檢測
snake.impactChecking();
context.strokeRect(0, 0, 400, 400);
}, 200);
// 對貪吃蛇控制
// 上下左右運動
$("body").keydown((event) => {
// 左
if(event.keyCode == 37 && snake.direction != "right"){
snake.direction = "left";
}
// 上
if(event.keyCode == 38 && snake.direction != "down"){
snake.direction = "up";
}
// 右
if(event.keyCode == 39 && snake.direction != "left"){
snake.direction = "right";
}
// 下
if(event.keyCode == 40 && snake.direction != "up"){
snake.direction = "down";
}
});
思路
思路，蛇由兩個類組成，方塊類和蛇類，蛇類的存在依賴於方塊類。蛇類當中的body儲存當前蛇類的所有的方塊。繪圖，直接遍歷body內部的所有繪圖方法。移動，根據儲存的私有變數方向用來對陣列中儲存的方塊物件進行更改
還有一個蘋果類。用於進行隨機生成
吃蘋果，在移動方法中，如果蛇的頭方塊和蘋果方塊重合那麼吃到蘋果，重新呼叫生成蘋果方法。
碰撞檢測，如果行和列超過範圍，即碰撞發生
最重要的，座標行和列化，使用的時候乘以一個數就行