JS實(shí)現(xiàn)的貪吃蛇游戲完整實(shí)例
本文實(shí)例講述了JS實(shí)現(xiàn)的貪吃蛇游戲。分享給大家供大家參考,具體如下:
思想:
1、設(shè)計(jì)蛇:屬性有寬、高、方向、狀態(tài)(有多少節(jié)),方法:顯示,跑
2、設(shè)計(jì)食物:屬性寬、高
3、顯示蛇:根據(jù)狀態(tài)向地圖里加元素
4、蛇跑起來(lái):下一節(jié)到前一節(jié)的位置,蛇頭根據(jù)方向變,刪除原來(lái)的蛇,新建蛇;當(dāng)出界時(shí),死亡,初始化;當(dāng)蛇頭吃到自己的時(shí)候,死亡,初始化
5、食物被吃掉,蛇加一節(jié),去掉原來(lái)的食物,生成新的食物
6、添加定時(shí)器,綁定按鍵
完整示例:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> body { margin: 0; padding: 0; } .main { width: 800px; height: 400px; margin: 50px auto; } .btn { width: 100px; height: 40px; } .map { position: relative; width: 800px; height: 400px; background: #ccc; } </style> </head> <body> <div class="main"> <button class="btn" id="begin">開(kāi)始游戲</button> <div class="map" id="map"></div> <script type="text/javascript"> var map = document.getElementById('map'); // 使用構(gòu)造方法創(chuàng)建蛇, function Snake() { // 設(shè)置蛇的寬、高、默認(rèn)走的方向 this.width = 10; this.height = 10; this.direction = 'right'; // 記住蛇的狀態(tài),當(dāng)吃完食物的時(shí)候,就要加一個(gè),初始為3個(gè)小點(diǎn)為一個(gè)蛇, this.body = [ {x:2, y:0}, // 蛇頭,第一個(gè)點(diǎn) {x:1, y:0}, // 蛇脖子,第二個(gè)點(diǎn) {x:0, y:0} // 蛇尾,第三個(gè)點(diǎn) ]; // 顯示蛇 this.display = function() { // 創(chuàng)建蛇 for (var i=0; i<this.body.length; i++) { if (this.body[i].x != null) { // 當(dāng)吃到食物時(shí),x==null,不能新建,不然會(huì)在0,0處新建一個(gè) var s = document.createElement('div'); // 將節(jié)點(diǎn)保存到狀態(tài)中,以便于后面刪除 this.body[i].flag = s; // 設(shè)置寬高 s.style.width = this.width + 'px'; s.style.height = this.height + 'px'; s.style.borderRadius = "50%"; s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")"; // 設(shè)置位置 s.style.position = 'absolute'; s.style.left = this.body[i].x * this.width + 'px'; s.style.top = this.body[i].y * this.height + 'px'; // 添加進(jìn)去 map.appendChild(s); } } }; // 讓蛇跑起來(lái),后一個(gè)元素到前一個(gè)元素的位置 // 蛇頭根據(jù)方向處理,所以i不能等于0 this.run = function() { // 后一個(gè)元素到前一個(gè)元素的位置 for (var i=this.body.length-1; i>0; i--) { this.body[i].x = this.body[i-1].x; this.body[i].y = this.body[i-1].y; } // 根據(jù)方向處理蛇頭 switch(this.direction) { case "left": this.body[0].x -= 1; break; case "right": this.body[0].x += 1; break; case "up": this.body[0].y -= 1; break; case "down": this.body[0].y += 1; break; } // 判斷是否出界,一蛇頭判斷,出界的話, if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) { clearInterval(timer); // 清除定時(shí)器, alert("!"); // 刪除舊的 for (var i=0; i<this.body.length; i++) { if (this.body[i].flag != null) { map.removeChild(this.body[i].flag); } } this.body = [ // 回到初始狀態(tài), {x:2, y:0}, {x:1, y:0}, {x:0, y:0} ]; this.direction = 'right'; this.display(); // 顯示初始狀態(tài) return false; // 結(jié)束 } // 判斷蛇頭吃到食物,xy坐標(biāo)重合, if (this.body[0].x == food.x && this.body[0].y == food.y) { // 蛇加一節(jié),因?yàn)楦鶕?jù)最后節(jié)點(diǎn)定,下面display時(shí),會(huì)自動(dòng)賦值的 this.body.push({x:null, y:null, flag: null}); // 清除食物,重新生成食物 map.removeChild(food.flag); food.display(); } // 吃到自己死亡,從第五個(gè)開(kāi)始與頭判斷,因?yàn)榍八膫€(gè)永遠(yuǎn)撞不到 for (var i=4; i<this.body.length; i++) { if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) { clearInterval(timer); // 清除定時(shí)器, alert("你怎么能吃自己呢?"); // 刪除舊的 for (var i=0; i<this.body.length; i++) { if (this.body[i].flag != null) { // 如果剛吃完就死掉,會(huì)加一個(gè)值為null的 map.removeChild(this.body[i].flag); } } this.body = [ // 回到初始狀態(tài), {x:2, y:0}, {x:1, y:0}, {x:0, y:0} ]; this.direction = 'right'; this.display(); // 顯示初始狀態(tài) return false; // 結(jié)束 } } // 先刪掉初始的蛇,在顯示新蛇 for (var i=0; i<this.body.length; i++) { if (this.body[i].flag != null) { // 當(dāng)吃到食物時(shí),flag是等于null,且不能刪除 map.removeChild(this.body[i].flag); } } // 重新顯示蛇 this.display(); } } // 構(gòu)造食物 function Food() { this.width = 10; this.height = 10; this.display = function() { var f = document.createElement('div'); this.flag = f; f.style.width = this.width + 'px'; f.style.height = this.height + 'px'; f.style.background = 'red'; f.style.borderRadius = '50%'; f.style.position = 'absolute'; this.x = Math.floor(Math.random()*80); this.y = Math.floor(Math.random()*40); f.style.left = this.x * this.width + 'px'; f.style.top = this.y * this.height + 'px'; map.appendChild(f); } } var snake = new Snake(); var food = new Food(); snake.display(); // 初始化顯示 food.display(); // 給body加按鍵事件,上下左右 document.body.onkeydown = function(e) { // 有事件對(duì)象就用事件對(duì)象,沒(méi)有就自己創(chuàng)建一個(gè),兼容低版本瀏覽器 var ev = e || window.event; switch(ev.keyCode) { case 38: if (snake.direction != 'down') { // 不允許返回,向上的時(shí)候不能向下 snake.direction = "up"; } break; case 40: if (snake.direction != "up") { snake.direction = "down"; } break; case 37: if (snake.direction != "right") { snake.direction = "left"; } break; case 39: if (snake.direction != "left") { snake.direction = "right"; } break; } }; // 點(diǎn)擊開(kāi)始時(shí),動(dòng)起來(lái) var begin = document.getElementById('begin'); var timer; begin.onclick = function() { clearInterval(timer); // timer = setInterval(snake.run(), 500); // 先執(zhí)行run函數(shù),把執(zhí)行得到的結(jié)果,每500毫秒執(zhí)行一次,不會(huì)在執(zhí)行內(nèi)部代碼 timer = setInterval("snake.run()", 500); // 小技巧,每500毫秒執(zhí)行字符串,字符串執(zhí)行內(nèi)部代碼 }; </script> </div> </body> </html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼,可得到如下運(yùn)行效果:
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JSON格式的時(shí)間/Date(2367828670431)/格式轉(zhuǎn)為正常的年-月-日 格式的代碼
這篇文章主要介紹了JSON格式的時(shí)間/Date(2367828670431)/格式轉(zhuǎn)為正常的年-月-日 格式的代碼的相關(guān)資料,需要的朋友可以參考下2016-07-07axios使用攔截器統(tǒng)一處理所有的http請(qǐng)求的方法
這篇文章主要介紹了axios使用攔截器統(tǒng)一處理所有的http請(qǐng)求的方法,通過(guò)一段實(shí)例代碼給大家介紹了axios攔截器使用,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
使用three.js可以方便的讓我們?cè)诰W(wǎng)頁(yè)中做出各種不同的3D效果,下面這篇文章主要給大家介紹了關(guān)于利用Three.js如何實(shí)現(xiàn)陰影效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-09-09js檢測(cè)標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁(yè)面
這篇文章主要介紹了js檢測(cè)標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁(yè)面的實(shí)現(xiàn)方法,主要是分享它的編程思路與加密方法2021-06-06JavaScript使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09layui table設(shè)置前臺(tái)過(guò)濾轉(zhuǎn)義等方法
今天小編就為大家分享一篇layui table設(shè)置前臺(tái)過(guò)濾轉(zhuǎn)義等方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-0820行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂(lè)效果
下面小編就為大家?guī)?lái)一篇20行JS代碼實(shí)現(xiàn)網(wǎng)頁(yè)刮刮樂(lè)效果。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果
本文主要介紹了js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03