html5 貪吃蛇canvas小遊戲

貪吃蛇是一個經典的小遊戲，雖然我當年是個遊戲小白，但是好歹當年玩這種不需要腦力的小遊戲，還是手到擒來的。

貪吃蛇的演算法不算複雜，主要講蛇身的每一個片段分解儲存在數組裡，然後每一次移動時，a[n-1] = a[n],即將每一個前元素的值，賦給下一個元素。最後重新設定第一個元素a[0]的位置和方向。

// r表示蛇，co表示蛇前進的方向，預設向下， e表示食物            var r = [{x : 10, y : 9}, {x : 10, y : 8}],                co = 40,                e = null;

下面是蛇的移動演算法

function move () {                // 遊戲是否結束                if(check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){                    return;                }                // 如果有食物，則根據蛇前進的方向判斷是否吃到了食物，並且將蛇數組中最後一個元素換到首部                e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) || (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) || (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) || (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ? (r.unshift(e), e = null, r.unshift(r.pop()), console.log('food')) : (r.unshift(r.pop()), console.log('no food'));                // 根據方向，重新設定蛇數組元素的座標，從而進行移動                (co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);                console.dir(r);                // 清空螢幕                ctx.clearRect(0, 0, 240, 240);                // 如果有食物，則繪製食物                if (e) {                    ctx.fillRect(e.x * 10, e.y *10, 10, 10);                }                // 繪製蛇                for (var i = 0; i < r.length; i++) {                    ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);                }                // 如果沒有食物，則隨機位置上加入一粒食物                while (e == null || check(e)) {                    e = {y : (Math.random() * 24 >>> 0), x : (Math.random() * 24 >>> 0)};                    console.dir(e);                }                // 判斷遊戲是否結束                if(check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){                    alert('game over! the length is : ' + (r.length - 2) );                }            }

最後綁定按鍵

// 加入鍵盤事件， 用方向鍵控制蛇前進方向        document.onkeyup = function (event) {            co = event.keyCode >= 37 && event.keyCode <= 40 && (Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;        }

在隨機產生食物時：判斷食物是否與蛇重合

// 判斷指定位置是否與蛇重疊        function check (e, j) {            for (var i =0; i < r.length; i++) {                if (j != i && r[i].x == e.x && r[i].y == e.y) {                    return true;                }                return false;            }        }

完整的html檔案在我的github上：https://github.com/chenkehxx/practice/blob/test/gluttonousSnake.html