js實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
本文實(shí)例為大家分享了js實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
運(yùn)行截圖：
源碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>貪吃蛇小游戲</title> <style> body { margin:0px; padding:0px; } #main { margin:100px; } .btn { width:100px; height:40px; } .gtitle { font-size:25px; font-weight: bold; } #gnum { color:red; } </style></head> <body> <div id='main'> <h1>貪吃蛇</h1> <input type='button' value='開(kāi)始游戲' /> <input type='button' value='暫停游戲' /> <span class='gtitle'>第 <span id='gnum'>1</span> 關(guān)</span> <script> var main = document.getElementById(’main’); var showcanvas = true; //是否開(kāi)啟畫(huà)布格子 /** * 地圖對(duì)象的構(gòu)造方法 * @param atom 原子大小寬和高是一樣的 10 * @param xnum 橫向原子的數(shù)量 * @param ynum 縱向原子的數(shù)量 * @constructor */ function Map(atom, xnum, ynum){ this.atom = atom; // 20x20 this.xnum = xnum; // this.ynum = ynum; this.canvas = null; //創(chuàng)建畫(huà)布的方法 this.create = function(){this.canvas = document.createElement(’div’);this.canvas.style.cssText='position:relative;top:40px;border:1px solid darkred; background:#FAFAFA';this.canvas.style.width = this.atom * this.xnum + ’px’; //畫(huà)布的寬this.canvas.style.height = this.atom * this.ynum + ’px’; //畫(huà)布的高main.appendChild(this.canvas); if(showcanvas) { for(var y=0; y<ynum; y++) { for (var x = 0; x < xnum; x++) { var a = document.createElement(’div’); a.style.cssText = 'border:1px solid yellow'; a.style.width = this.atom + ’px’; a.style.height = this.atom + ’px’; a.style.backgroundColor = 'LightSkyBlue'; this.canvas.appendChild(a); a.style.position = ’absolute’; a.style.left = x * this.atom + ’px’; a.style.top = y*this.atom+’px’; } }} } } /** * 創(chuàng)建食物的構(gòu)造方法 * @param map 地圖對(duì)象 * @constructor */ function Food(map){ this.width = map.atom; this.height = map.atom; this.bgcolor= 'rgb('+Math.floor(Math.random()*200)+', '+Math.floor(Math.random()*200)+', ' + Math.floor(Math.random() * 200) +')'; this.x = Math.floor(Math.random()*map.xnum); this.y = Math.floor(Math.random()*map.ynum); this.flag = document.createElement(’div’); this.flag.style.width = this.width + ’px’; this.flag.style.height = this.height + ’px’; this.flag.style.backgroundColor = this.bgcolor; // this.flag.style.borderRadius = ’50%’; this.flag.style.position = ’absolute’; this.flag.style.left = this.x * this.width +’px’; this.flag.style.top = this.y * this.height + ’px’; map.canvas.appendChild(this.flag); } function Snake(map) { //設(shè)置寬，高 this.width=map.atom; this.height = map.atom; //默認(rèn)走的方向 this.direction = ’right’; this.body = [{x:2, y:0}, //蛇頭， 第一點(diǎn) 0{x:1, y:0}, //蛇脖子, 第二點(diǎn) 1{x:0, y:0} //蛇尾， 第三點(diǎn) 2//{x:null, y:null, flag:null} 3 ]; //顯示蛇 this.display = function(){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)保存到一個(gè)狀態(tài)變量中， 以便以后刪除使用 this.body[i].flag = s; //設(shè)置蛇的樣式 s.style.width = this.width + ’px’; s.style.height = this.height + ’px’; s.style.backgroundColor='rgb('+Math.floor(Math.random()*200)+', '+Math.floor(Math.random()*200)+', ' + Math.floor(Math.random() * 200) +')'; //s.style.borderRadius = ’50%’; //設(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’; //添加到地圖中 map.canvas.appendChild(s); } } } //讓蛇運(yùn)動(dòng)起來(lái) this.run = function() { 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;}//默認(rèn)是right left up down// 根據(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;} //判斷蛇頭吃到食物， xy和食物的XY重合if(this.body[0].x ==food.x && this.body[0].y == food.y ){ //蛇加一節(jié)， 根據(jù)最后節(jié)點(diǎn)定 this.body.push({x:null, y:null, flag:null}); //判讀一下設(shè)置級(jí)別 if(this.body.length > l.slength) { l.set(); } map.canvas.removeChild(food.flag); food = new Food(map); }//判斷是否出界， 蛇頭if(this.body[0].x <0 || this.body[0].x > map.xnum-1 || this.body[0].y <0 || this.body[0].y > map.ynum -1) { clearInterval(timer); //清除定時(shí)器 alert('怎么這么不小心撞墻了呢，摸摸頭'); //重新開(kāi)始游戲 restart(map, this) return false;} //判讀是否和自己重合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('呀，怎么喜歡咬自己的肉肉'); //重新開(kāi)始游戲 restart(map, this) return false; } } for(var i=0; i<this.body.length; i++){ if(this.body[i].flag != null) { //當(dāng)吃到食物， flag是等null, 且不能刪除 map.canvas.removeChild(this.body[i].flag) }} this.display(); } } //重新開(kāi)始游戲 function restart(map, snake) { for(var i=0; i<snake.body.length; i++) {map.canvas.removeChild(snake.body[i].flag); } snake.body = [{x:2, y:0}, //蛇頭， 第一點(diǎn) 0{x:1, y:0}, //蛇脖子, 第二點(diǎn) 1{x:0, y:0} //蛇尾， 第三點(diǎn) 2 ]; snake.direction = ’right’; snake.display(); map.canvas.removeChild(food.flag); food = new Food(map); } //設(shè)置級(jí)別對(duì)象 function Level() { this.num = 1; //第幾級(jí)別 this.speed= 300; //毫秒， 每升一關(guān)， 數(shù)量減少20， 速度就加快了 this.slength = 8; //每個(gè)關(guān)的長(zhǎng)度判斷 this.set = function() {this.num++;if(this.speed <= 50) { this.speed = 50;}else{ this.speed -=50;}this.slength += 10; //這個(gè)可以自己定義this.display();start(); //重新開(kāi)始， 速度加快 } this.display = function() {document.getElementById(’gnum’).innerHTML = this.num; } } var l = new Level(); l.display(); //創(chuàng)建地圖對(duì)象 var map = new Map(20, 40, 20); map.create(); //顯示畫(huà)布 //構(gòu)造食物對(duì)象 var food = new Food(map); //構(gòu)造蛇對(duì)象 var snake = new Snake(map); snake.display(); // 組body加鍵盤(pán)事件， 上下左右 window.onkeydown = function(e){ var event = e || window.event; // console.log(event.keyCode); switch(event.keyCode) {case 38: if(snake.direction != 'down') { 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; } } var timer; //變量可以提升 function start() { clearInterval(timer); timer = setInterval(function(){snake.run(); },l.speed); } document.getElementById(’begin’).onclick=function(){ start(); } document.getElementById(’pause’).onclick=function() { clearInterval(timer); } </script></div> </body></html>
小編還為大家準(zhǔn)備了精彩的專題：javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Laravel操作session和cookie的教程詳解2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. XML入門(mén)的常見(jiàn)問(wèn)題(一)4. css進(jìn)階學(xué)習(xí) 選擇符5. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法6. PHP字符串前后字符或空格刪除方法介紹7. jsp實(shí)現(xiàn)登錄界面8. 解析原生JS getComputedStyle9. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式10. Echarts通過(guò)dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖
網(wǎng)公網(wǎng)安備