🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取免費源碼?

游戲設計步驟：

1.首先是蛇的運動。蛇每往前走一步。就是增加一個頭部點，去掉原來的尾巴點。中間的所有點都是不動的。 ? 用程序化來表達就是，整條貪吃蛇可以是一個類似這樣[[1,2],[1,3]]的帶位置信息的數組，每移動一步，往數組推入一個新的坐標點，并移除第一個坐標點。

2.獲取下一個點的坐標。我們的蛇理論上可以往上下左右四個方向移動。可以根據現在蛇頭的坐標和方向計算出合適的x,y坐標。就是新的蛇頭坐標。 比如[1,2]往右邊移動一下就變成[2,2]，往右邊移動的本質是x坐標增加1。

3.控制方向。 監控鍵盤事件。當前是向右的時候，下一步只可能是往上或往下或往右，不會讓其出現倒退的情況。

4.一是隨機生成幸運點、二不能生成在貪吃蛇身上。 也就是幸運點坐標不能在貪吃蛇身體的坐標組中就可以。

5.吃掉幸運點。 貪吃蛇坐標數組中添加幸運點到數組尾部。并且不移除蛇尾。

6.判斷輸。 ?如果新生成的頭部的坐標，是蛇身坐標組是的一個值。說明撞到自己了。 ?如果新生成的頭部坐標的x,y值超出了邊界值。判輸。

7.分數和速度。 速度就是控制蛇運動的 timer執行的時間間隔而已。

代碼目錄：

主要代碼實現：

JavaSscript代碼：

var sw = 20, //一個方塊的寬度sh = 20, //一個方塊的高度tr = 30, //行數td = 30; //列數var snake = null; //蛇的實例 var food = null; //食物的實例 var game = null; //游戲的實例//方塊構造函數 function square(x, y, classname) {// 0, 0 0, 0 // 20, 0 1, 0// 40, 0 2, 0this.x = x * sw;this.y = y * sh;this.class = classname;this.viewContent = document.createElement("div"); //方塊對應的DOM元素this.viewContent.className = this.class;this.parent = document.getElementById("snakeWrap"); //方塊的父級，并添加到頁面} square.prototype.create = function() { //創建方塊DOMthis.viewContent.style.position = "absolute";this.viewContent.style.width = sw + "px";this.viewContent.style.height = sh + "px";this.viewContent.style.left = this.x + "px";this.viewContent.style.top = this.y + "px";this.parent.appendChild(this.viewContent); }square.prototype.remove = function() {//removeChild() === 從列表中刪除一個項目this.parent.removeChild(this.viewContent); }//蛇 function Snake() {this.head = null; //存一個蛇頭的信息this.tail = null; //存一個蛇尾的信息this.pos = []; //存儲蛇身上的每一個方塊的位置this.directionNum = { //存儲蛇走的方向，用一個對象來表示left: {x: -1,y: 0,rotate: 180 //蛇頭在不同的方向中應該進行旋轉，要不始終是向右},right: {x: 1,y: 0,rotate: 0},up: {x: 0,y: -1,rotate: -90},down: {x: 0,y: 1,rotate: 90},} }Snake.prototype.init = function() {//創建蛇頭var snakeHead = new square(2, 0, "snakeHead");snakeHead.create();this.head = snakeHead; //存儲蛇頭信息this.pos.push([2, 0]) //把蛇頭的位置存起來//創建蛇身體1var snakebody1 = new square(1, 0, "snakeBody");snakebody1.create();this.pos.push([1, 0]); //把蛇身的位置存起來//創建蛇身體2var snakebody2 = new square(0, 0, "snakeBody");snakebody2.create();this.tail = snakebody2; //把蛇尾的信息存起來this.pos.push([0, 0]); //把蛇身的位置存起來//形成鏈表關系snakeHead.last = null;snakeHead.next = snakebody1;snakebody1.last = snakeHead;snakebody1.next = snakebody2;snakebody2.last = snakebody1;snakebody2.next = null;//給蛇添加一條屬性，用來表示蛇走的方向this.direction = this.directionNum.right; //默認讓蛇往右走 }//這個方法用來獲取蛇頭的下一個位置對應的元素，要根據素材做不同的事情 Snake.prototype.getNextPos = function() {var nextPos = [ //蛇頭要走的下一個點的坐標this.head.x / sw + this.direction.x,this.head.y / sh + this.direction.y]//下個點是自己，代表撞到了自己，游戲結束var selfCollied = false;this.pos.forEach(function(value) {if (value[0] == nextPos[0] && value[1] == nextPos[1]) {//如果數組中的兩個數組都相等，就說明下一個點在蛇身上里面能找到，代表撿到自己了selfCollied = true;}})if (selfCollied) {console.log("撞到自己了！");this.strategies.die.call(this);return;}//下個點是圍墻，游戲結束if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {console.log("撞墻了！");this.strategies.die.call(this);return;}//下個點是食物，吃if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {//如果這個條件成立說明現在蛇頭要走的的下一個點是食物的那個點console.log("撞到食物了！ ");this.strategies.eat.call(this);return;}//下個點什么都不是，走this.strategies.move.call(this); }//處理碰撞后要做的事 Snake.prototype.strategies = {move: function(format) { //這個參數用于決定要不要刪除最后一個方塊（蛇尾）。當傳了這個參數后就表示要做的事情是吃//創建新身體（在舊蛇頭的位置）var newBody = new square(this.head.x / sw, this.head.y / sh, "snakeBody");//更新鏈表的關系newBody.next = this.head.next;newBody.next.last = newBody;newBody.last = null;this.head.remove(); //把舊蛇頭原來的位置刪除newBody.create();//創建一個新蛇頭（蛇頭下一個要走到的點nexpos）var newHead = new square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, "snakeHead");//更新鏈表的關系newHead.next = newBody;newHead.last = null;newBody.last = newHead;newHead.viewContent.style.transform = "rotate(" + this.direction.rotate + "deg)"newHead.create();//蛇身上的每一個方塊的坐標也要更新this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, ]);this.head = newHead; //還要把this.head的信息更新一下if (!format) { //如果format的值為lafse，表示需要刪除（除了吃之外的操作）this.tail.remove();this.tail = this.tail.last;this.pos.pop();}},eat: function() {this.strategies.move.call(this, true);createFood();game.score++;},die: function() {game.over();} }snake = new Snake();//創建食物 function createFood() {//食物小方塊的隨機坐標var x = null;var y = null;var include = true; //循環跳出的條件，true表示食物的坐標在蛇身上（需要繼續循環）。false表示食物的坐標不在蛇身上（不循環了）while (include) {x = Math.round(Math.random() * (td - 1));y = Math.round(Math.random() * (tr - 1));snake.pos.forEach(function(value) {if (x != value[0] && y != value[1]) {//這個條件成立說明現在隨機出來的這個坐標，在蛇身上并沒有找到。include = false;}})}//生成食物food = new square(x, y, "food");food.pos = [x, y]; //存儲一下食物生成的坐標，用于跟蛇頭要走的下一個點做對比var foodDom = document.querySelector('.food');if (foodDom) {foodDom.style.left = x * sw + "px";foodDom.style.top = y * sh + "px";} else {food.create();} }//創建游戲邏輯 function Game() {this.timer = null;this.score = 0; }Game.prototype.init = function() {snake.init();// snake.getNextPos();createFood();document.onkeydown = function(ev) {if (ev.which == 37 && snake.direction != snake.directionNum.right) { //用戶按下左鍵的時候，這條蛇不能是正下往右走snake.direction = snake.directionNum.left;} else if (ev.which == 38 && snake.direction != snake.directionNum.down) {snake.direction = snake.directionNum.up;} else if (ev.which == 39 && snake.direction != snake.directionNum.left) {snake.direction = snake.directionNum.right;} else if (ev.which == 40 && snake.direction != snake.directionNum.up) {snake.direction = snake.directionNum.down;}}this.start(); } Game.prototype.start = function() { //開始游戲this.timer = setInterval(function() {snake.getNextPos();}, 200); }Game.prototype.pause = function() {clearInterval(this.timer); }Game.prototype.over = function() {clearInterval(this.timer);alert("你的得分為：" + game.score);//游戲回到最初的狀態var snakewrap = document.getElementById("snakeWrap");snakewrap.innerHTML = "";snake = new Snake();game = new Game();var startBtnWrap = document.querySelector(".startBtn");startBtnWrap.style.display = "block"; }//開啟游戲 game = new Game(); var startBtn = document.querySelector(".startBtn button"); startBtn.onclick = function() {startBtn.parentNode.style.display = "none";game.init(); }//暫停 var snakewrap = document.getElementById("snakeWrap"); var pauseBtn = document.querySelector(".pauseBtn"); snakewrap.onclick = function() {game.pause();pauseBtn.style.display = "block"; }pauseBtn.onclick = function() {game.start();pauseBtn.style.display = "none"; }

CSS樣式代碼 :

.content {width: 640px;height: 640px;margin: 50px auto 0px auto;position: relative; }.btn {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.3);z-index: 2; }.btn button {background: none;border: none;background-size: 100% 100%;cursor: pointer;outline: none;position: absolute;left: 50%;top: 50%; }.startBtn button {width: 200px;height: 80px;background-image: url(../images/startGame.png);margin-left: -100px;margin-top: -40px; }.pauseBtn {display: none; }.pauseBtn button {width: 70px;height: 70px;background-image: url(../images/start.png);margin-left: -35px;margin-top: -35px; }/*snakeWrap*/#snakeWrap {width: 600px;height: 600px;background-color: #225675;border: 20px solid #7dd9ff;position: relative; }/* #snakeWrap div {width: 20px;height: 20px; } */.snakeHead {background-image: url(../images/snake.png);background-size: cover; }.snakeBody {background-color: #9ddbb1;border-radius: 50%; }.food {background-image: url(../images/food.png);background-size: cover; }

上面的開始游戲圖片文件需要引入和建立一個HTML啟動文件

系列推薦閱讀欣賞：

HTML5實現 ??女朋友照片3D立方體旋轉??

HTML5實現?? 3D愛心跳動特效??

HTML5實現 ??美女拼圖游戲??

HTML5實現 ??鼠標懸停性感美女特效??

HTML5實現 ??canvas刮刮樂刮出女朋友??

?源碼獲取

大家點贊、收藏、關注、評論啦 、查看下方微信公眾號獲取~

打卡 文章 更新?54?/? 100天

專欄推薦閱讀：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️贪吃蛇游戏、你能吃过我？❤️【源码送给你一起来玩-建议收藏】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。