看了人家視頻上寫的貪吃蛇，瞬間覺得自己low爆了。。。。就學他寫了三遍，以我的記性，覺得還是有必要記錄下過程，以便記憶。
先看下截圖：

首先html分析：
注：下列的id是用在js里的，class是用在css里的

<div class="startPage" id="startPage"> <!-- 這是開始頁的大頁面 --><div class="startBtn" id="startBtn"></div> <!-- 載在大頁面上的開始按鈕鍵 --></div><div class="wrapper"> <!-- 開始后的大頁面 --><div class="left-side"> <!-- 將大頁面分出一個左邊，用來承載暫停和計分的按鍵 --><div class="header"> <!-- 在這個左邊的開頭寫個用來載計分的框 --><div class="score"> <!-- 顯示“分數” -->分數:<span id="score"></span> <!-- 用在之后js里的動態計分操作 --></div></div><img src="img/zanting.png" id="startP" alt=""> <!-- 顯示暫停按鈕，這個按鈕用圖片代替 --></div><div class="main"> <!-- 大頁面中的主頁面，和左邊的區分下 --><div class="content" id="content"></div> <!-- 游戲區域，在js里控制 --></div></div><div class="lose" id="lose"> <!-- 游戲結束的大頁面 --><div class="con"> <!-- 游戲結束后的計分清單 --><span class="loseScore" id="loseScore"> <!-- js動態計分 --></span><div class="close" id="close"></div> <!-- 游戲結束計分上的關閉按鈕 --></div></div>

上述是貪吃蛇的全部html代碼，將貪吃蛇游戲的大致界面劃分出來。
接下來是css代碼：

*{ /* css的書寫習慣，先將所有的margin和padding的默認值都去掉 */margin: 0;padding: 0; }.startPage{ /* 開始游戲的大頁面設置 */width: 100%;height: 640px; /* 游戲界面高度，這是我按自己電腦瀏覽器大小設置的 */position: absolute; /* 給它個絕對定位 */z-index: 999; /* 顯示在界面最前頭 */}.startBtn{ /* 游戲開始按鍵的設置 */width: 200px; /* 設置按鍵圖片的寬和高 */height: 50px;position: absolute; /* 從這到margin：auto，這幾行放在一起，表示居中在大頁面的正中間 */top: 0;left: 0;bottom: 0;right: 0;margin:auto;background-image: url(img/begin.png); /* 把開始按鍵的圖片放入 */background-size: 100% 100%; /* 將圖片平攤開 */cursor: pointer; /* 鼠標劃入時，箭頭變成小手 */}.wrapper{ /* 游戲開始后的大頁面 */width: 100%;height: 640px; /* 同上含義 */background-image: url('img/bj1.png'); /* 放入游戲背景圖片 */background-size: 100% 100%; /* 平攤 */position: relative; /* 相對定位 */top: 0px;left: 0px; }.left-side{ /* 在大頁面上劃分出的左邊部分 */width: 14%; /* 占大頁面的14%寬度 */height: 640px; /* 高度 */position: absolute; /* 絕對定位 */top: 0;left: 0; }.left-side img{ /* 顯示暫停按鍵圖片的設置 */width: 120px; /* 設置圖片的寬高 */height: 40px;position: absolute; /* 絕對定位 */left: 15%; /* 該圖片在左邊劃分框中，距離左邊距15% */top: 100px; /* 圖片距離上邊距100px */}.header{ /* 用來承載計分的框 */width: 100%; height: 40px;margin-top: 30px; /* 外邊距30px */position: absolute; /* 絕對定位 */ }.score{ /* 計分數字顯示 */width: 100px;height: 40px;font-size: 18px;color: #fff; /* 字體白色 */position: absolute; /* 基于上個absolute的中心定位 */top: 0;left: 0;bottom: 0;right: 0;margin:auto; }.main{ /* 在大頁面中劃分出的另一個部分 */position: absolute; /* 絕對定位 */left: 15%; /* 距離大頁面左邊據15% */width: 52%; /* 占大頁面的寬52% */height: 640px; /* 值含義同上 */border: 1px solid black; /* 邊框，作為標識，可去除 */ }.content{ /* 游戲邊框，用來表示蛇不能出去的部分 */position: absolute; top: 0;left: 0;bottom: 0;right: 0;margin:auto; /* 從position到這表示基于父級定位的中心定位 */width: 525px; /* 邊框的寬高 */height: 525px;border: 13px solid rgb(2, 32, 7); /* 邊框框 */ }.lose{ /* 表示游戲結束后的出現的一個大頁面 */width: 100%;height: 640px;position: absolute;top: 0;left: 0;display: none; /* 先設置不顯示，之后在js中修改 */ }.con{ /* 表示游戲結束后出現的結束圖片 */width: 340px; /* 為圖片設置寬高 */height: 160px;background-image:url('img/over.png'); /* 加入圖片 */background-size: 100% 100%; /* 平攤圖片 */position: absolute; /* 同上 */top: 0;left: 0;bottom: 0;right: 0;margin:auto;border-radius: 15% 15%; /* 圖片的四個角設置圓度 */ }.loseScore{ /* 在js中調用，用來顯示最后的計分結果 */font-size: 24px; /* 字體大小24px */color: #fff;position: absolute;left: 130px; /* 計分數字在游戲結束圖片上找到合適的位置存放 ，這是按自己的圖片設置的*/top: 80px; }.close{ /* 設置游戲結束右上角的關閉按鈕 */background-image: url('img/shanchu.png'); /* 插入關閉按鈕圖片 */background-size: 100% 100%; /* 平攤圖片 */width: 35px; /* 設置關閉按鈕的寬高 */height: 35px;position: absolute; /* 絕對定位 */top: 0px;right: 0px; /* 圖片放到右上角 */ }

還有部分css代碼，在js代碼編輯的時候一同寫出，現在上述的css算是將貪吃蛇游戲的頁面背景設置完畢。
接下來js代碼：

var content = document.getElementById('content'); //將html中有id = content的元素提取出來function init(){ //設置初始時的所有默認值this.foodW = 20; //表示食物的寬this.foodH = 20; //高this.foodX = 0; //表示食物的x坐標位置this.foodY = 0; //y坐標位置this.snakeW = 0; //蛇的寬高this.snakeH = 0;this.snakeBody = [[4,1,'head'],[3,1,'body'],[2,1,'body']]; //表示三節蛇身（包括蛇頭），用數組表示this.mapH = parseInt(getComputedStyle(content).height); //表示游戲界面的寬高，用getComputedStyle(content).height來提取出content里的height屬性值this.mapW = parseInt(getComputedStyle(content).width); //同上含義this.mapDiv = content; //表示界面整體this.direct = 'right'; //初始時蛇的方向this.up = true; // 表示向上蛇可動this.down = true; //向下可動this.right = false; //向右邊不可動this.left = false; //向左邊不可動 //上述表示的具體意思是，當蛇的運動方向為右時，不能操作蛇的左右運動，只能操作上下this.score = 0; //初始計分為0bindEvent(); //觸發bindEvent()函數 }

設置完初始值后，開始設置蛇和食物的初始狀態

function food(){ //食物的設置var food = document.createElement('div'); //生成一個div的食物foodfood.style.width = this.foodW + 'px'; //設置食物的寬高，等于上述函數中已經設置好的默認食物寬高food.style.height = this.foodH + 'px'; //同上food.style.position = 'absolute'; //設置食物的位置為絕對定位this.foodX = Math.floor(Math.random()*this.mapW/20); //食物的x坐標的隨機位置，表示0到（游戲界面的寬除以食物自己的寬）的隨機數this.foodY = Math.floor(Math.random()*this.mapH/20); //食物的y坐標的隨機位置，同上food.style.top = this.foodY * 20 + 'px'; //表示食物的上邊距距離為食物的y坐標乘以自己的高food.style.left = this.foodX * 20 + 'px'; //同上this.mapDiv.appendChild(food).setAttribute('class','food'); //給每個食物div都設置上名為food的class，再到css中設置食物的大小和載入圖片 }function snake(){ //蛇的設置for(var i = 0;i < this.snakeBody.length;i ++){ //用for循環，i小于蛇身的長度，（初始時的length為3）var snake = document.createElement('div'); //生成一個div的蛇snakesnake.style.width = this.snakeW + 20 + 'px'; //設置生成的蛇的寬高snake.style.height = this.snakeH + 20 + "px";snake.style.position = 'absolute'; //設置蛇的絕對位置snake.style.top = this.snakeBody[i][1] * 20 + 'px'; //設置每節蛇的距離上邊距的位置snake.style.left = this.snakeBody[i][0] * 20 + 'px'; //設置每節蛇的距離左邊距的位置snake.classList.add(this.snakeBody[i][2]); //給每節蛇添加class，這里的class為上述的snakeBody中設置的第3個位置上的‘head’和’body‘，因此又需要對head和body設置css代碼，用來區分蛇頭和蛇身this.mapDiv.appendChild(snake).classList.add('snake'); //在html中添加上snake的div，并加上class = ‘snake’switch(this.direct){ //蛇頭的轉向（注：由于我找的蛇頭的方向默認為右邊）case 'right': //由于默認圖片蛇頭向右所以不需要改變操作break;case 'left' : //將蛇頭的方向轉向左邊snake.style.transform = 'rotate(180deg)';break;case 'up' : //將蛇頭方向旋轉到上邊snake.style.transform = 'rotate(270deg)';break;case 'down' : //將蛇頭方向旋轉到下方snake.style.transform = 'rotate(90deg)';break;default :break;}} }

食物和蛇的css代碼：

.food{background-image: url('img/pg.png'); //加入食物的圖片background-size: 100% 100%; }.head{background-image: url('img/s.png'); //加入蛇頭的圖片background-size: 100% 100%; }.body{background-image: url('img/she.png'); //加入蛇身的圖片background-size: 100% 100%; }

設置完蛇和食物的狀態后，設置游戲開始時的界面：

var startPage = document.getElementById('startPage'); //從html中獲取到id = startPage的元素節點，startPage表示開始游戲的按鈕 var startP = document.getElementById('startP'); //同上，startP表示暫停的按鈕function startGame(){ //游戲開始startPage.style.display = 'none'; // 將該節點設置為不顯示startP.style.display = 'block'; //使該節點顯示food(); //調用food函數snake(); //調用snake函數 }

接下來設置蛇的運動狀態js：

var scoreBox = document.getElementById('score'); //獲取用于計分的節點 function move(){for(var i = this.snakeBody.length-1;i > 0;i --){ //for循環，表示蛇運動時，后一節蛇的位置是前一節蛇之前所在的位置this.snakeBody[i][0] = this.snakeBody[i-1][0];this.snakeBody[i][1] = this.snakeBody[i-1][1];}switch(this.direct){ //表示蛇頭的轉動位置情況case 'right' :this.snakeBody[0][0] +=1; //右邊時，蛇頭的x位置加1break;case 'left' :this.snakeBody[0][0] -=1; //左邊時，蛇頭的x位置減1，break;case 'up' :this.snakeBody[0][1] -=1; //上邊時，蛇頭的y位置減1break;case 'down' :this.snakeBody[0][1] +=1; //下邊時，蛇頭的y位置加1default:break;}removeClass('snake'); //刪除class = ‘snake’的節點snake(); //重新調用snake函數if(this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY){ //當蛇吃到食物時var snakeEndX = this.snakeBody[this.snakeBody.length-1][0]; //表示吃到食物后，蛇尾的x坐標為蛇的長-1var snakeEndY = this.snakeBody[this.snakeBody.length-1][1]; //同上switch(this.direct){case 'right':this.snakeBody.push([snakeEndX ,snakeEndY,'body']); //蛇頭向右時，蛇尾的x位置需要+1break;case 'left':this.snakeBody.push([snakeEndX ,snakeEndY,'body']); //蛇頭向左時，蛇尾的x位置需要-1break;case 'up':this.snakeBody.push([snakeEndX,snakeEndY ,'body']); //蛇頭向上時，蛇尾的y位置需要-1break;case 'down':this.snakeBody.push([snakeEndX,snakeEndY ,'body']); //蛇頭向下時，蛇尾的y位置需要+1break;default:break;} //注：當蛇吃到食物時，添加的尾巴會在原來的尾巴的位置上加上，直到蛇頭離開食物的位置，此時的尾巴就會變成真正的尾巴this.score += 1; //吃到食物，分數+1scoreBox.innerHTML = this.score; //使html中的id = ‘scoreBox’的節點上加上此時的分數removeClass('food'); //蛇吃到食物后，所吃的食物消失food(); //又重新出現新的食物的位置}if(this.snakeBody[0][0] < 0 || this.snakeBody[0][0] > this.mapW/20){ //當蛇頭x碰到邊界時，游戲結束reloadGame(); //結束游戲，重新加載游戲}if(this.snakeBody[0][1] < 0 || this.snakeBody[0][1] > this.mapH/20){ //當蛇頭y碰到邊界時，游戲結束reloadGame(); //結束游戲，重新加載游戲}var snakeHX = this.snakeBody[0][0]; //得到蛇頭xvar snakeHY = this.snakeBody[0][1]; //得到蛇頭yfor(var i = 1;i < this.snakeBody.length;i++){ //當蛇頭碰到自己的身體時，游戲結束if(snakeHX == snakeBody[i][0] && snakeHY == snakeBody[i][1]){reloadGame();}} }

接下來是刪除節點的函數：

function removeClass(className){ //給一個class類名var ele = document.getElementsByClassName(className); //用ele得到html中有該class類名的節點while(ele.length > 0){ //當節點長度大于0時，即存在該節點ele[0].parentNode.removeChild(ele[0]); //刪除該節點} }

然后是重新加載游戲的js代碼：

var loseScore = document.getElementById('loseScore'); function reloadGame(){removeClass('snake'); //刪除class = ‘snake’的節點，即刪除蛇removeClass('food'); //刪除食物，同上clearInterval(snakeMove); //清除snakeMove每隔時間間隔長度運動this.snakeBody = [[4,1,'head'],[3,1,'body'],[2,1,'body']]; //再添加上默認初始的蛇身坐標this.direct = 'right'; //初始方向this.right = false; this.left = false;this.up = true;this.down = true;lose.style.display = 'block'; //使id = ‘lose’的節點出現，即出現游戲結束后的圖片loseScore.innerHTML = this.score; //記錄游戲結束后的最終得分this.score = 0; //記錄后，清0scoreBox.innerHTML = this.score; //同時將游戲開始時的動態積分也清0startGameBool = true;startPauseBool = true;startP.setAttribute('src','./img/begin.png'); //改變id = ‘startP’節點的圖片內容 }

關于操作蛇時的上下左右按鍵設置：

function setDirect(code){ //給該函數一個表示對應按鍵數字switch(code){case 37: //表示左，方向為左時，上下的按鍵可觸發但是左右的按鍵不可以觸發if(this.left){this.direct = 'left';this.left = false;this.right = false;this.up = true;this.down = true;}break;case 38: //上 ，同上if(this.up){this.direct = 'up';this.left = true;this.right = true;this.up = false;this.down = false;}break;case 39: //右 ，同上if(this.right){this.direct = 'right';this.left = false;this.right = false;this.up= true;this.down = true;}break;case 40: //下 ，同上if(this.down){this.direct = 'down';this.left = true;this.right = true;this.up = false;this.down = false;}break;default:break;} }

接下來是關于游戲的開始和暫停的設置：

var startGameBool = true; //表示該鑰匙是開著時 var startPauseBool = true; var snakeMove; var speed = 200;function startAndPush(){if(startPauseBool){ //關于暫停的鑰匙if(startGameBool){ //關于游戲剛開啟時的鑰匙startGame(); //游戲開始，啟動游戲開始的界面startGameBool = false; //游戲開始后，不需要再出現這個過程，將該鑰匙鎖住}startP.setAttribute('src','./img/kk.png'); //為html中的id = ‘startP’設置插入圖片document.onkeydown = function(e){ //觸發按鍵發生的時間var code = e.keyCode; //得到所觸發按鍵所表示的數字setDirect(code); //調用上述的按鍵方向函數}snakeMove = setInterval(function(){ 表示每隔speed時間啟用一次move(); 調用move函數，表示每隔speed時間，執行一次move函數事件},speed);startPauseBool = false; //執行過后，需要上鎖，防止該事件在游戲過程中被啟用出錯}else{ //當鑰匙關閉時，執行的事件startP.setAttribute('src','./img/zanting.png'); //改變id = startP的節點中的圖片內容clearInterval(snakeMove); //清除snakeMove每隔speed時間的執行document.onkeydown = function(e){ //表示禁止按鍵啟用e.returnValue = false;return false;}startPauseBool = true; //執行上述事件后，將鎖打開} }

之后是關于主體啟用鍵盤按鍵和鼠標按鍵事件：

var lose = document.getElementById('lose'); var close = document.getElementById('close'); var startBtn = document.getElementById('startBtn');function bindEvent(){document.onkeydown = function(e){ //同上述描述，是按鍵的數字獲取和啟用方向事件var code = e.keyCode;setDirect(code)}close.onclick = function(){ //表示游戲結束后右上角的關閉按鍵的觸發事件lose.style.display = 'none'; //使游戲結束界面不顯示}startBtn.onclick = function(){ //表示剛啟動游戲時的開始按鈕startAndPush(); }startP.onclick = function(){ //表示游戲中的暫停和解除暫停的鼠標按鍵事件startAndPush();} }

上述就是所有的js代碼。。。。
看下成果圖：

注：上述代碼如有解釋錯誤的，請大佬幫忙改善，謝謝，有不清楚的也可以留言，本人會盡量及時回復的

總結

以上是生活随笔為你收集整理的学写前端原生贪吃蛇的全部內容，希望文章能夠幫你解決所遇到的問題。

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