整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
始之前大家最好掌握前端最基本的一些語法如：html、css、javascript等課程知識點。
好吧！！！因為開發前端的東西無須安裝任何開發工具，就算啥也不懂也沒關系，那么趕緊瓜子花生板凳準備好快跟著老師來體驗一下編程的魅力吧！:)
真實效果圖如下：
程序思維
開發的大概思路是首先在Body中定義一個div作為容器，然后使用樣式定義界面游戲場景，角色（貪吃蛇）以及食物，然后編寫javascript腳本對游戲地圖，角色以及食物進行初始化的渲染，再編寫move函數完成蛇身移動，蛇身在移動的過程當中判斷蛇頭和蛇身是否重疊，促使蛇身增長，假如蛇頭在移動的過程當中碰到身體的其它部位，或者超出地圖編寫視作游戲結束Game Over,當蛇身長度達到某個長度值我們可以設置通關條件可以增加移動速度。
廢話不多說直接按步驟擼代碼！！！
第一步：編寫游戲地圖/貪吃蛇/食物樣式
第二步：定義初始化數據（并定義功能函數）
第三步：創建地圖(函數)
第四步：創建/擦除蛇身(函數)
第五步：蛇身移動(函數)
第五步中調用的函數：吃到食物（函數）
由于是否吃到食物和控制方向函數都是蛇身移動過程當中需要反復調用，所以最后單獨寫成了獨立函數在蛇身移動函數中調用，好了代碼到此結束！最后大家可以來試試啦！
如果有小伙伴在編寫代碼過程當中碰到問題歡迎大家添加關注私信我來咨詢，或找我獲取錄制的經典小游戲之貪吃蛇游戲錄制的視頻和代碼。
或點擊下面的“了解更多”,進入在線視頻鏈接進行學習。好了感謝大家的觀看再見！
avaScript寫一個貪吃蛇的游戲（附源碼）
javascript群內每日課題-今日課題：JavaScript寫一個貪吃蛇的游戲
PS:最近群內很多伙伴想要做游戲學學，練練自己的JavaScript，所以今天做了小游戲，很多人都擔心自己寫的代碼爛，而不敢去寫代碼，總想著等自己等寫出好的代碼再來做游戲，再來練習，其實我的意見是前端新人要多些爛代碼，不管你在學習中還是工作中，你不寫夠足量的爛代碼，是無法進化到寫好代碼的程度，所以練習吧騷年
如果想要更多的企業求職加分項目，案例，游戲源碼，可以來一下我的前端群216634437，每天都會精挑細選一個特效，項目游戲出來詳細講解，分享！
1.body部分
2.style樣式部分
3, JavaScript部分
想要練習這個游戲的進群領取源碼：216634437（代碼已經上傳到群文件，自助下載練習）
頭條號里有許多web前端學習視頻，企業常用特效/案例/項目，敬請關注！
csdn上看到一位大神用20行代碼就寫出了一個貪吃蛇的小游戲，鏈接請點這里，感覺被驚艷到了，就試著讀了一下這段代碼，閱讀過程中不斷為作者寫法的巧妙而叫絕，其中我發現自己對運算符優先級和一些js的技巧不是很清楚，所以看完之后決定把思路分享出來，方便和我一樣的小白學習。
??我對代碼稍稍做了些修改，并添加了一些注釋，方便理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇重構</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<canvas id="can" width="400" height="400" style="background-color: black">對不起，您的瀏覽器不支持canvas</canvas>
<script>
var snake = [41, 40], //snake隊列表示蛇身，初始節點存在但不顯示
direction = 1, //1表示向右，-1表示向左，20表示向下，-20表示向上
food = 43, //食物的位置
n, //與下次移動的位置有關
box = document.getElementById('can').getContext('2d');
//從0到399表示box里[0~19]*[0~19]的所有節點，每20px一個節點
function draw(seat, color) {
box.fillStyle = color;
box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
//用color填充一個矩形，以前兩個參數為x，y坐標，后兩個參數為寬和高。
}
document.onkeydown = function(evt) {
//當鍵盤上下左右鍵摁下的時候改變direction
direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};
!function() {
snake.unshift(n = snake[0] + direction);
//此時的n為下次蛇頭出現的位置，n進入隊列
if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
//if語句判斷貪吃蛇是否撞到自己或者墻壁，碰到時返回，結束程序
return alert("GAME OVER!");
}
draw(n, "lime"); //畫出蛇頭下次出現的位置
if(n == food) { //如果吃到食物時，產生一個蛇身以外的隨機的點，不會去掉蛇尾
while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
draw(food, "yellow");
} else { //沒有吃到食物時正常移動，蛇尾出隊列
draw(snake.pop(),"black");
}
setTimeout(arguments.callee, 150);
//每隔0.15秒執行函數一次，可以調節蛇的速度
}();
</script>
</body>
</html>??首先，我們要知道做一個貪吃蛇最主要的是什么，是做出蛇活動的場所和如何使蛇動起來。??我們先看蛇活動的場所：
<!-- html -->
<canvas id="can" width="400" height="400" style="background-color: black">
對不起，您的瀏覽器不支持canvas
</canvas>
<!-- js -->
box = document.getElementById('can').getContext('2d');??這是一個 400px*400px的 canvas，思路是以 20px*20px為一個方格，組成 20行 20列的方陣，總共 400格，然后綠色填充的格子表示蛇身，用黃色表示食物。這 400個格子和數字 0~399一一對應，對應的方式就是以 20作為基數， n/20再取整表示第幾行， n%20表示第幾列。行數和列數都用 0~19表示。??蛇用一個一維數組表示，每個值都是這 400個數中的一個，用 varsnake=[41,40];初始化這條蛇，索引 0為蛇頭。food表示食物的位置， direction表示蛇頭下一次運動的轉向。蛇的運動就用添加和刪除數組元素來實現，每次執行繪制蛇頭，去掉蛇尾，循環執行使蛇運動。??下邊從函數運行的起始處（ 39行）開始看:
!function() {}();??什么鬼？這其實是立即執行函數 IIFE的另一種寫法。關于 IIFE，這篇文章講的挺不錯的。繼續往下看，給蛇頭添加一個節點 n，其值為當前蛇頭的值加 direction的值，如此一來就能理解為什么要用 20表示向下， -20表示向上了。再下一行是一個 if語句，其中值得提醒的是 &&的優先級高于 ||，這個語句就是判斷即將出現的蛇頭是不是屬于蛇身，或者跑到box外邊去了。如果沒有死亡，就把這個蛇頭繪制出來，下邊就看看繪制的代碼：
function draw(seat, color) {
box.fillStyle = color;
box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}??填充時填充 18*18的像素，留 1px邊框。.fillRect()中第一個參數就是要繪制的矩形的 x坐標 seat%20*20+1，即先得到所要繪制的矩形塊在方陣中的位置：第 ~~(seat/20)行，第 seat%20列，再 *20+1具體到像素點。可能這個 ~~有點難理解，我感覺在這里的用處應該和 Math.floor()差不多，對一個浮點型的數取反再取反，得到的數就是去掉小數位的整數了。
??回到 47行，又是一個判斷語句，判斷下次蛇頭出現的位置是不是和當前的食物的位置相同，如果相同，生成下一個食物，食物的位置為一個隨機數，但是要判斷這個點不是出現在當前的蛇身上，繪制食物。如果沒有吃到食物，即蛇在正常運動時，每向前一次，將蛇尾彈出，并利用其返回值將這個點重新繪制為黑色。??最后的 setTimeout，循環執行當前函數，設置執行周期來調蛇的移動速度。??到了這里，我們發現這條蛇已經可以動了，加上鍵盤的操作就完成了：
document.onkeydown = function(evt) {
direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};??將這個函數綁定到鍵盤事件上， evt||event用法的原因這里有詳細的解釋，是為了兼容 ie。??三目運算符 ?前邊的判斷語句又可分為兩部分：
??再用三目運算符來判斷，如果按鍵方向不是反方向，就更新 direction的值。
以上就是本篇的全部內容啦，雖然都是一些基礎的東西，但是感覺還是挺好玩的。要是哪里理解的不對還希望指證出來，共同進步。
源自：https://segmentfault.com/a/1190000009770460
聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
