2. 程式人生 > >純原生js 貪吃蛇（鍛鍊你邏輯思維）

純原生js 貪吃蛇（鍛鍊你邏輯思維）

阿新 • • 發佈：2019-02-18
//獲取分數標籤 var score = document.getElementById('score'); // 獲取路徑地圖標籤 var map = document.getElementById('snake_map'); // 為了靈活的設定地圖的大小,以下設定兩個變數 // 用於儲存行數和列數(即方格的個數) var rowNumber = 25;// 行數 var columnNumber = 20;// 列數; var mapWidth = columnNumber * 20 + 'px';// 地圖的寬 var mapHeight = rowNumber * 20 + 'px';// 地圖的高 map.style.width = mapWidth; map.style.height = mapHeight;// 設定地圖寬高
// 建立一個二維陣列,用來記錄地圖上的所有div的位置 var snakeDIVPosition = []; // 通過雙層for迴圈來建立地圖元素 for ( var i = 0; i < rowNumber; i++) { // 建立行div var rowDIV = document.createElement('div'); // 設定div樣式 rowDIV.className = 'row'; // 將行div新增到路徑地圖map中 map.appendChild(rowDIV); // 建立一個行級陣列,用來儲存當前行中的每個方塊div var
rowArray = []; for ( var j = 0; j < columnNumber; j++) { // 建立每一行中的方塊div var columnDIV = document.createElement('div'); // 設定css樣式 columnDIV.className = 'col'; // 將方塊DIV新增到當前行中 rowDIV.appendChild(columnDIV); // 同時將方塊新增到行陣列中 rowArray.push(columnDIV); } // 當前內層迴圈結束,將行陣列新增到二維陣列中
snakeDIVPosition.push(rowArray); } // 建立蛇模型 // 建立一個一維陣列,用來儲存蛇身所佔的div var snake = []; // 固定蛇身起始長度為3個div for ( var i = 0; i < 3; i++) { // 為蛇身設定不同顏色的div snakeDIVPosition[0][i].className = 'col activeSnake'; // 儲存在蛇身陣列中 snake[i] = snakeDIVPosition[0][i]; } // 定義變數來控制蛇 var x = 2; var y = 0;// 蛇頭的起始位置偏移量 var scoreCount = 0;// 分數計數器,即吃了多少個蛋 var eggX = 0;// 記錄蛋所在的行位置 var eggY = 0;// 記錄蛋所在的列位置; var direction = 'right';// 記錄蛇移動的方向,初始為向右 var changeDir = true;// 判斷是否需要改變蛇的移動方向 var delayTimer = null;// 延遲定時器 // 新增鍵盤事件監聽方向鍵來改變蛇的移動方向 document.onkeydown = function(event) { // 先判斷是否需要改變方向,true表示需要,false表示不需要 if (!changeDir) { return;// return空表示直接結束函式,後續程式碼不執行 } event = event || window.event; // 為了合理處理蛇的移動,需要判斷蛇頭和蛇身 // 假設蛇向右移動,點方向鍵左,右鍵都不需要做出響應 if (direction == 'right' && event.keyCode == 37) { return;// 終止事件執行 } if (direction == 'left' && event.keyCode == 39) { return; } if (direction == 'up' && event.keyCode == 40) { return; } if (direction == 'down' && event.keyCode == 38) { return; } // 我們通過keyCode確定蛇要移動的方向 switch (event.keyCode) { case 37: direction = 'left';// 向左 break; case 38: direction = 'up';// 向上; break; case 39: direction = 'right';// 向右 break; case 40: direction = 'down';// 向下 break; } changeDir = false; delayTimer = setTimeout(function() { // 設定是否需要改變方向 changeDir = true; }, 300); }; // 開始設定蛇移動邏輯 // 蛇移動函式 function snakeMove() { // 根據上面設定的方向來設定蛇頭的位置 switch (direction) { case 'left': x--; break; case 'right': x++; break; case 'up': y--; break; case 'down': y++; break; }; // 判斷是否遊戲結束 if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) { alert('Game Over!!!'); // 結束蛇移動的定時器 clearInterval(moveTimer); return;// 終止鍵盤事件; } // 如果蛇吃到自己,也要結束遊戲 for ( var i = 0; i < snake.length; i++) { // 將此時蛇頭移動後的位置與之前左右的組成蛇的div的位置進行比較,如果相同則說明吃到自己,遊戲結束 if (snake[i] == snakeDIVPosition[y][x]) { alert('Game over!!!'); clearInterval(moveTimer); return; }; } // 判斷蛇頭移動的位置是否有蛋 if (eggX == x && eggY == y) { snakeDIVPosition[eggY][eggX].className = 'col activeSnake'; snake.push(snakeDIVPosition[eggY][eggX]);// 加入蛇身 scoreCount++;// 記錄分數 // 更新當前的分數 score.innerHTML = scoreCount; // 隨機產生一個新的蛋 createNewEgg(); } else { // 設定蛇碰不到蛋的邏輯 // 讓蛇移動 // 蛇尾去掉蛇自身的顏色,變成格子的顏色 snake[0].className = 'col'; // 將蛇尾div從陣列中移除 snake.shift(); // 定位到的新的蛇頭加入到蛇陣列中 snakeDIVPosition[y][x].className = 'col activeSnake'; snake.push(snakeDIVPosition[y][x]); }; }; var moveTimer = setInterval('snakeMove()', 300); // 定義一個生成min,max之間的隨機數函式 function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; function createNewEgg() { // 隨機出新的egg的下標的x和y值 eggX = random(0, columnNumber - 1); eggY = random(0, rowNumber - 1); // 判斷如果隨機產生的蛋與蛇身重合,就重新隨機產生一個蛋 if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') { createNewEgg();// 重新隨機新的egg } else { snakeDIVPosition[eggY][eggX].className = 'col egg'; } }; createNewEgg();// 在遊戲開始的時候生成新的egg var pause = document.getElementById('Pause'); var start = document.getElementById('Start'); var refresh = document.getElementById('Refresh'); var speed = document.getElementById('Speed'); // 新增暫停按鈕 pause.onclick = function() { clearInterval(moveTimer); }; // 新增開始按鈕 start.onclick = function() { clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1); }; // 新增重新整理按鈕 refresh.onclick = function() { window.location.reload(); }; // 新增加速按鈕 var speed1 = 300; speed.onclick = function() { speed1 -= 20; clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1); };

相關推薦

純原生js 貪吃蛇（鍛鍊你邏輯思維）

//獲取分數標籤 var score = document.getElementById('score'); // 獲取路徑地圖標籤 var map = document.getElementById('snake_map'); // 為了靈活的設定地圖的大小,以下設定兩個變數 // 用於儲存行數和列數(即

Python：遊戲：貪吃蛇（附源碼）

false 快速 寬度 技術分享 如何 game 點擊 遊戲 範圍 貪吃蛇是個非常簡單的遊戲，適合練手。 首先分析一下這個遊戲 1、蛇怎麽畫？ 蛇是由一個個小方塊組成的，那麽我們可以用一個 list 記錄每一個小方塊的坐標，顯示的時候將所有小方塊畫出來即可。 2、蛇怎麽移動

C語言寫的貪吃蛇（國慶任務專案）

分享寫貪吃蛇的緣起 博主大一新生，因為有任務C語言寫貪吃蛇，去網上找別人的原始碼試一試效果，可是沒有一個可以通過編譯執行，現在博主好不容易寫完了貪吃蛇，卻深感單初不易，現在分享一下原始碼，應該不會像網上大多數的C語言貪吃蛇程式碼無法編譯正確，通過執行。（我用的D

貪吃蛇（移動游標實現）

我將其寫成了一個貪吃蛇類 主程式 #include<stdio.h> #include"SnakeGame.h" int main() { SnakeGame a;//建立一個貪吃蛇遊戲 system("pause");//系統暫停 return 0;

JS編寫貪吃蛇（面向對象思想）

removes 超出 child case 如果 原來 creat http 改變 效果圖：（抱歉，由於本人能力有限，只能暫時放靜態圖。後期會把動態圖更新上去） <!DOCTYPE html><html><head lang="en">

js貪吃蛇小遊戲（相容ie8）DOM,BOM操作

效果圖 本篇將使用JavaScript 編寫一個貪吃蛇的小遊戲，採用OOP（面向物件）程式設計 基本沒有CSS樣式和HTML結構，主要是體會js操作 HTML程式碼 <div class="map"></div> &

js--貪吃蛇小遊戲（加牆）

---新手上路，路過的大佬多多指教。用了大半天的時間熟悉了一下js的基本語法，學習他就是為了寫幾個小的網頁遊戲。網上的關於js寫的貪吃蛇遊戲的程式碼比比皆是，我就學了一個試著自己寫。寫了將近兩天，還有很多介面問題我還有很多想法沒實現。先寫個小部落格，後面有加就再改改博文就好

JS貪吃蛇小遊戲

ttr etime opened IE title 跨瀏覽器 tac 再次 key 效果圖展示： 具體實現代碼如下： （1）html部分 1 !DOCTYPE html> 2 <html> 3 <head> 4

js/jq基礎（日常整理記錄）-1-純js格式化時間

seconds form 由於 分享 log var d+ 方法 class 一、純js格式化時間 　之前記錄了一些，工作中發現的比較常用的使用，就記錄一下。 由於很基礎，就直接貼出來了，不做分析了。 改造一下Date的原型 Date.prototype.format =

html,css,js,貪吃蛇網頁遊戲

mov reload dom document bubuko ima sep rand [] 遊戲效果如圖： 實現代碼如下： <!DOCTYPE html><html> <head> <meta charset="utf-8

html5+js 貪吃蛇

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="kzm"> <meta name="Keyw

原生JS去重（一）--兩種方法去掉重複字元

所謂“去重”，即是去掉重複的字元。本篇部落格講述兩種方式去重，一種是比較簡單但程式碼比較囉嗦點的，另一種是有點深度但是簡潔的。  我直接寫JavaScript程式碼了。  方式一： function deleteRepetionChar(arr){ //先判斷輸入進

C++練習例項————貪吃蛇（OO思想）

這是一款在vs上直接控制檯輸出的貪吃蛇遊戲，沒有使用任何圖形庫。遊戲具有多個介面，狀態轉換如下： 下面直接上程式碼： Position類，用來記錄遊戲中的座標位置： #include<iostream> using namespace std; #if

貪吃蛇（一）

          還記得小時候玩過的貪吃蛇小遊戲嗎？每當小蛇吃到食物時，身體便會長大一截；但當碰到圍牆或自己的身體時，那麼，遊戲結束！！現在讓我們學習如何一步一步完成這個遊戲吧。 （1）建立舞臺背景           在“背景”標籤中選中“用顏色填充”的工具，選取兩種

純C語言貪吃蛇遊戲

說明 我在2018年5月8日重新更新了貪吃蛇的程式碼，現在它比以前更精簡，且未使用全域性變數 函式均使用功能命名，可以輕易明白函式功能 貪吃蛇通過連結串列實現 你可以前往我的github下載此程式碼，僅可在vs下編譯，呼叫GameE

常用原生JS方法總結（相容性寫法）

經常會用到原生JS來寫前端。。。但是原生JS的一些方法在適應各個瀏覽器的時候寫法有的也不怎麼一樣的。。。 今天下班有點累。。。 就來總結一下簡單的東西吧…… 備註：一下的方法都是包裹在一個EventUtil物件裡面的，直接採用物件字面量定義方法了。。。 ①新增事件方法 addHandle

C#貪吃蛇（窗體版本）

新建 在工具箱中找到 Timer，拖拽使用，將Name改為dt，Interval（單位：毫秒）改為500 然後編寫程式碼 string key_name = "start"; //記錄鍵盤狀態 Label[] l_b =

C#貪吃蛇（WPF版）

最近寫了個貪吃蛇，雖然有很多BUG，但是還是拿出來讓大家看下！ 額，我用的還是VS2010. 首先，新建專案——WPF應用程式 將 canvas設定為定義為lol 接下來是引用部分 新增 using System.Windows.Threading;

純原生JS模擬複製貼上功能 支援IE5+

if (!Function.prototype.bind) { Function.prototype.bind = function(obj) { var _self = this ,args = arguments;

C語言實現貪吃蛇（二）----區域性重新整理

前言： 在上一篇部落格《C語言實現貪吃蛇（一）—-陣列實現》，我們使用陣列來儲存座標，並且不斷的通過全屏重新整理的方式來實現蛇移動的動態效果。但是全屏重新整理使得該遊戲整個過程中的閃爍現象，究其原因，無非就是在於頻繁的清空與列印。 但是想想看，整個遊戲過程中