我也來寫乙個貪吃蛇

最近工作量好大，好忙，趁週末練練手，花了近3小時寫了乙個貪吃蛇。（後續會把自己的一些想法繼續更新，目前是1.3版本~更新過4次，文末有更新說明）。

實現貪吃蛇的功能很簡單。

我就分享一下我實現貪吃蛇看起來在介面上移動並且吃食物長大的原理。

我建了乙個陣列list_arr來儲存貪吃蛇所在的每個格仔的id，並建了2個全域性變數x和y，監聽貪吃蛇頭的位置，當然x和y也是貪吃蛇的起始位置。

那麼貪吃蛇移動實際上就是每次從list_arr裡取出第乙個元素（list_arr.shift()方法），取出的第乙個元素也可以認為是貪吃蛇的尾巴，然後把這個元素（也就是格仔的id）代表的格仔的css中的貪吃蛇的樣式去掉。然後，把[x, y]這組座標所代表的格仔的id扔進list_arr裡（list_arr.push()），並給這個格仔新增上貪吃蛇的樣式。所以實際上每次就操作了2個格仔的樣式。

如果貪吃蛇吃食物（[x, y]與食物所在座標相同），那麼把食物那個格仔的css去掉代表食物的樣式並加上貪吃蛇的樣式，並且不去掉尾巴，也就是不去掉list_arr裡的第乙個元素所在格仔的樣式。

開始

更新說明：

1.0版本：實現最基本的功能，貪吃蛇移動，吃食物和死亡判定；

1.1版本：加入了控制按鈕，支援空格控制按鈕；解決快速按下非同軸方向鍵時，setinterval延遲觸發問題；在貪吃蛇長度為1時，可以往4個方向移動，當大於2時，不能往移動方向反方向移動；

1.2版本：美化ui（小蛇有蛇頭和眼睛了，有興趣的可以加個蛇尾，原理和蛇頭類似）；食物加入了顏色和對應效果（目前只有紅色的加速效果有效，加速週期和加速步長都在option裡配置）；o現在是繼承option；

其實還寫了乙個藍色食物的換向效果：

if (document.getelementbyid(snakeboxarray[y][x]).classlist.contains('food-convert'))  else if (dir_arr[dir_arr.length - 1] == 38)  else if (dir_arr[dir_arr.length - 1] == 39)  else if (dir_arr[dir_arr.length - 1] == 40)  
moveevent = setinterval(move.bind(this, newdir, o.speed));  //移動	
}

建了乙個陣列dir_arr來監聽蛇身體每個格仔的方向（就是蛇頭每次進入乙個新格仔的方向），然後轉向也就是把監聽小蛇身體位置的list_arr和監聽方向的dir_arr均顛倒（reverse()），然後重置蛇頭座標（x，y），list_arr和dir_arr裡的最後乙個元素就是轉向後的小蛇新的頭部位置和方向，最後重置setinterval就可以了。原理就是如上。該特殊食物由於效果觸發後，轉向是往之前蛇頭第一次進入當前的蛇尾所在的格仔的方向的反方向進行的，所以在小蛇較長或者貼邊緣移動時，很容易觸發死亡判定，所以最後把這個特殊事務移除了。

1.3版本：美化ui，新增了蛇頭進入新格仔的動畫（如果蛇身也要，原理一樣；animation沒有對瀏覽器作適配，需要的自己適配）；

2023年11月23日發現乙個bug：

在小蛇長度為4時，繞乙個2*2的正方形格仔轉圈為直接觸發死亡條件，發現是**334行先觸發死亡判定，而後在350行才將尾巴從小蛇身體內去掉，最簡單的改法應該就是下面這樣了：

我也來寫乙個貪吃蛇

c語言寫了乙個貪吃蛇

用 Python 製作乙個貪吃蛇

乙個功能簡單的貪吃蛇遊戲

我也來寫乙個貪吃蛇

c語言寫了乙個貪吃蛇

用 Python 製作乙個 貪吃蛇

乙個功能簡單的貪吃蛇遊戲

相關推薦

用 Python 製作乙個貪吃蛇