canvas 貪吃蛇
效果如下
程式碼
<!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內部的所有繪圖方法。移動,根據儲存的私有變數方向用來對陣列中儲存的方塊物件進行更改
還有一個蘋果類。用於進行隨機生成
吃蘋果,在移動方法中,如果蛇的頭方塊和蘋果方塊重合那麼吃到蘋果,重新呼叫生成蘋果方法。
碰撞檢測,如果行和列超過範圍,即碰撞發生
最重要的,座標行和列化,使用的時候乘以一個數就行