前言
最近在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');
新聞熱點
疑難解答
圖片精選
