前言
很多朋友學習了計算機語言后都做過貪吃蛇的游戲（VB，C，C++，C#，JAVA，JQuery等），現在估計很多人都忘記怎么寫了，
我們現在用jquery+css來實作一個貪吃蛇的游戲效果，
這里主要溫習一下資料演算法、游戲中面向物件和由區域到整體的思想，
原始碼下載地址+演示地址
百度網盤原始碼下載地址： https://pan.baidu.com/s/1FGKVQfxgTJaPilKSRH0kDQ 提取碼: sybv
在線演示地址：http://www.xiongze.net/snake/index.html
效果圖GIf
設計思路
第一步，構思撰寫出靜態頁面，
第二步，讓貪吃蛇動起來，
第三步，通過鍵盤上下左右鍵去控制運動方向，空格鍵暫停，
第四步，判斷貪吃蛇有沒有撞墻，有沒有吃到自己，有的話結束游戲，生成排名，
第五步，給貪吃蛇隨機生成一個"食物"，
第六步，實作每當貪吃蛇吃了一個"食物"后身體就會變長，移動速度變快，
兩個物件
貪吃蛇有兩個物件，蛇的物件和食物的物件，
食物物件有一個屬性：食物的坐標點，
蛇物件有一個屬性：一個陣列（用來存放蛇身體所有的坐標點），
如何移動
全域需要有一個定時器來周期性的移動蛇的身體，
由于蛇的身體彎彎曲曲有各種不同的形狀，因此我們只處理蛇的頭部和尾部，
每次移動都根據移動的方向的不同來添加新的頭部，再把尾部擦去，看起來就像蛇在向前爬行一樣，
方向控制
由于蛇有移動的方向，因此我們也需要在全域定義一個方向物件，物件中有上下左右所代表的值，
同時，在蛇物件的屬性中我們也需要定義一個方向屬性，用來表示當前蛇所移動的方向，
碰撞檢測
在蛇向前爬行的程序中，會遇到三種不同的情況，需要進行不同的判斷檢測，
第一種情況是吃到了食物，這時候就需要向蛇的陣列中添加食物的坐標點；
第二種情況是碰到了自己的身體，
第三種是碰到了邊界，這兩種情況都導致游戲結束；
如果不是上面的三種情況，蛇就可以正常的移動，
實作程序
搭建游戲畫面：首先整個游戲需要一個搭建活動的場景，我們通過Div+css布局來作為整個游戲的背景，
方向和定位：游戲背景搭建完后，怎么來定義我們“蛇”的位置和移動的方向？首先定義一個全域的方向變數，對應的數值就是我們的上下左右方向鍵所代表的keyCode，
我們游戲幕布的時候通過兩次遍歷畫出了一個坐標系，有X軸和Y軸，
如果每次都用{x:x,y:y}來表示會很麻煩，也顯得很low，我們可以定義一個坐標點物件，
食物物件：既然定義好了坐標點物件，那么可以先來看一下簡單的物件，就是我們的食物物件，它有一個重要的屬性就是它的坐標點，
既然食物有了坐標點這個屬性，那么我們什么時候給他賦值呢？我們知道食物是隨機產生的，因此我們定義了一個Create函式用來產生Food的坐標點，
但是產生的坐標點又不能在蛇的身體上，所以通過一個while回圈來產生坐標點，如果坐標點正確了，就終止回圈，
//食物 function foodRandom(){ var t = 40; var x = 54; var y = 0; var repeat = false; var top = parseInt(Math.random() * (t - y) + y); var left = parseInt(Math.random() * (x - y) + y); //判斷食物與蛇身坐標是否重合 $('.snake_wrap li').each(function() { if($(this).position().left == left && $(this).position().top == top){ foodRandom(); }else{ repeat = true; } }); //如果食物沒在蛇身上，定位食物 if(repeat){ $('.food').css({'top':top*15 + 1 + 'px','left':left*15 + 1 + 'px'}); } }
蛇物件：首先定義一下蛇基本的屬性，最重要的肯定是蛇的屬性，每次移動時，都需要對這個陣列進行一些操作，
其次是蛇的方向，我們給它一個默認方向，然后是食物，在蛇的建構式中我們傳入食物物件，在后續移動時需要判斷是否吃到食物，
//移動 function run(){ //計時器，每speed時重繪一次 myVar.itimes = setInterval(function(){ //獲取當前食物位置 var food_top = $('.food').position().top; var food_left = $('.food').position().left; //設定新增蛇頭坐標 var header_top = $('.snake_wrap li').eq(0).position().top + myVar.del_y; var header_left = $('.snake_wrap li').eq(0).position().left + myVar.del_x; //當前蛇頭顏色重置 $('.snake_wrap li').eq(0).css({'background': '#779006'}); //新增蛇頭，并賦予樣式 $('.snake_wrap').prepend('<li></li>'); $('.snake_wrap li').eq(0).css({'left':header_left + 'px','top':header_top + 'px','background':'#fff'}) //移除最后一節蛇尾 $('.snake_wrap li:last').remove(); //判斷蛇是否吃到食物 if((header_left == (food_left - 1)) && (header_top == (food_top - 1))){ var last_top = $('.snake_wrap li:last').position().top; var last_left = $('.snake_wrap li:last').position().left; $('.snake_wrap').append('<li></li>'); $('.snake_wrap li:last').eq(0).css({'left':last_left + 'px','top':last_top + 'px'}) //重繪食物 foodRandom(); //蛇身長度 myVar.myscore++; scoreFn(myVar.myscore); //每加長5，速度提升10 if(!(myVar.myscore%5) && myVar.speed > 10){ clearInterval(myVar.itimes); myVar.speed -= 10; run(); } } //邊界判斷 borderDetection(header_top,header_left); //自撞判斷 selfDetection(header_top,header_left); },myVar.speed) }
建議大家下載原始碼進行對比查看比較好理解，下面展示的是需要處理的方法；
總結
這里主要溫習一下資料演算法、游戲中面向物件和由區域到整體的思想，
邏輯有很多種，不必拘泥于一種，大家可以換一種不同的方法進行實作，
歡迎關注訂閱我的微信公眾平臺【熊澤有話說】，更多好玩易學知識等你來取作者：熊澤-學習中的苦與樂 公眾號：熊澤有話說 出處： https://www.cnblogs.com/xiongze520/p/14308996.html 創作不易，轉載或者部分轉載、摘錄，請在文章明顯位置注明作者和原文鏈接，
|
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/251592.html
標籤：其他
上一篇：企業微信頁面如何在電腦端除錯