回味

小時(shí)候玩的經(jīng)典貪吃蛇游戲我們印象仍然深刻，謀劃了幾天，小時(shí)候喜歡玩的游戲，長(zhǎng)大了終于有能力把他做出來(lái)(從來(lái)都沒有通關(guān)過，不知道自己寫的程序，是不是能通關(guān)了...)，好了，閑話不多談，先來(lái)看一下效果吧！！

功能和小時(shí)候玩的貪吃蛇一樣，

1、選擇速度 slownormalfast 2、選擇是否有墻作為障礙物onoff

看完效果就先附上地址嘍：大山深處修煉的小龍蝦，歡迎fork.

結(jié)構(gòu)分解

如果構(gòu)建一個(gè)簡(jiǎn)單的經(jīng)典貪吃蛇游戲呢？我們根據(jù)面板可以分解出如下結(jié)構(gòu)：

因?yàn)槠渌姘灞容^簡(jiǎn)單，我們重點(diǎn)來(lái)看一下游戲面板

游戲面板

游戲面板是核心，在游戲面板中，我們來(lái)分解一下游戲面板我們需要的因素：

場(chǎng)景、snake、食物

首先我們需要一個(gè)游戲場(chǎng)景、snake、食物這些基礎(chǔ)設(shè)施
這里使用canvas作為我們的整個(gè)游戲的場(chǎng)景：

<canvas class="wrap" id="snake" width="400" height="400" tabindex="1"></canvas>

需要一只snake,后面初始化他的位置

var activeDot = function (x, y) {ctx.fillStyle = "#eee";ctx.fillRect(x * 10, y * 10, 10, 10); }

需要食物作為對(duì)象(關(guān)于食物我們需要定義一些規(guī)則，如食物的產(chǎn)生)

var food = {x: 0,y: 0 };

規(guī)則

規(guī)則是游戲的核心

1、關(guān)于游戲的規(guī)則

snake的方向控制：(使用鍵盤的上下左右鍵控制蛇的方向)

// changer dirvar changeDir = function (key) {if (key == 38 && snake_dir != 2) {snake_next_dir = 0;} else {if (key == 39 && snake_dir != 3) {snake_next_dir = 1;} else {if (key == 40 && snake_dir != 0) {snake_next_dir = 2;} else {if (key == 37 && snake_dir != 1) {snake_next_dir = 3;}}}}}

關(guān)于食物，如果食物被吃掉，我們就需要產(chǎn)生新的食物

// add foodvar addFood = function () {food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));for (var i = 0; i < snake.length; i++) {// 如果食物被吃就增加食物if (checkBlock(food.x, food.y, snake[i].x, snake[i].y)) {addFood();}}}var checkBlock = function (x, y, _x, _y) {return (x == _x && y == _y) ? true : false;}

接下來(lái)是核心的函數(shù)，根據(jù)選擇的速度和是否有墻體作為障礙物的設(shè)置，讓蛇運(yùn)動(dòng)起來(lái)，并且實(shí)現(xiàn)

1、根據(jù)選擇slow、norma、fast決定蛇運(yùn)動(dòng)速度速度
2、如果蛇碰到自己==自殺，游戲結(jié)束
3、有墻模式碰到墻體，游戲結(jié)束
4、無(wú)墻模式蛇穿過墻體，從另一側(cè)出現(xiàn)
5、使蛇碰到食物就加入自身身體的一部分，執(zhí)行增加食物函數(shù)

var mainLoop = function () {var _x = snake[0].x;var _y = snake[0].y;snake_dir = snake_next_dir;// 0 — up 1 — right 2 — down 3 — leftswitch (snake_dir) {case 0:_y--;break;case 1:_x++;break;case 2:_y++;break;case 3:_x--;break;}snake.pop();snake.unshift({x: _x,y: _y})// --wallif (wall == 1) {if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {showScreen(3);return;}} else {// off 無(wú)墻for (var i = 0, x = snake.length; i < x; i++) {if (snake[i].x < 0) {snake[i].x = snake[i].x + (canvas.width / 10);}if (snake[i].x == canvas.width / 10) {snake[i].x = snake[i].x - (canvas.width / 10);}if (snake[i].y < 0) {snake[i].y = snake[i].y + (canvas.height / 10);}if (snake[i].y == canvas.height / 10) {snake[i].y = snake[i].y - (canvas.height / 10);}}}// Autophagy deathfor (var i = 1; i < snake.length; i++) {if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {showScreen(3);return;}}// Eat foodif (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {snake[snake.length] = {x: snake[0].x,y: snake[0].y};score += 1;altScore(score);addFood();activeDot(food.x, food.y);}// --------------------ctx.beginPath();ctx.fillStyle = "#111";ctx.fillRect(0, 0, canvas.width, canvas.height);// --------------------for (var i = 0; i < snake.length; i++) {activeDot(snake[i].x, snake[i].y);}// --------------------activeDot(food.x, food.y);setTimeout(mainLoop, snake_speed);}

ok以上展示出一些核心部分，構(gòu)建出一個(gè)舞臺(tái)中一只小蛇的故事.

小時(shí)候爸媽手機(jī)里有一款小游戲叫貪吃蛇。就是一條小蛇，不停地在屏幕上游走，吃各個(gè)方向出現(xiàn)的蛋，越吃越長(zhǎng)。只要蛇頭碰到屏幕四周，或者碰到自己的身子，小蛇就立即斃命。方寸的舞臺(tái)間，亦有無(wú)限精彩；PS:到現(xiàn)在也沒有通關(guān)過..現(xiàn)在不知道能不能通關(guān)了...

最后在附上次源碼，歡迎fork交流：okaychen... 因?yàn)樽约簻y(cè)試用的服務(wù)器被占用，目前只有做的效果圖供大家參考嘍.
掘金地址：手起刀落-一起來(lái)寫經(jīng)典的貪吃蛇游戲

轉(zhuǎn)載于:https://www.cnblogs.com/okaychen/p/7954207.html

總結(jié)

以上是生活随笔為你收集整理的手起刀落-一起来写经典的贪吃蛇游戏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。