JavaScript面向對象實現(xiàn)貪吃蛇游戲
本文實例為大家分享了面向對象的貪吃蛇實現(xiàn)代碼,供大家參考,具體內容如下
1 工具對象(Tools.js)
因為要隨機生成食物,所以先將生成min-max范圍內隨機整數(shù)的方法提取出來。randomNum屬性就是生成的隨機數(shù)。
function Tools(min,max){ ? ? min = Math.ceil(min); ? ? max = Math.floor(max); ? ? this.randomNum=Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 }
2 食物對象(Food.js)
//為避免命名沖突,使用自調用函數(shù) (function(){ ? ? var foodDivs=[]; ? //1 定義食物對象 ? function Food(options){ ? ? ? options=options||{};//封裝屬性的對象 ? ? ? this.backgroundColor=options.backgroundColor||'green'; ? ? ? this.width=options.width||20; ? ? ? this.height=options.height||20; ? ? ? this.x=options.x||0; ? ? ? this.y=options.y||0; ? } ? //2 渲染到map上 ? Food.prototype.render=function(map){ ? ? ? removeFood(); ? ? ? var div=document.createElement('div'); ? ? ? this.x=new Tools(0,map.offsetWidth/this.width-1).randomNum; ? ? ? this.y=new Tools(0,map.offsetHeight/this.height-1).randomNum; ? ? ? div.style.width=this.width+'px'; ? ? ? div.style.height=this.height+'px'; ? ? ? div.style.backgroundColor=this.backgroundColor; ? ? ? div.style.left=this.x*this.width+'px'; ? ? ? div.style.top=this.y*this.height+'px'; ? ? ? div.style.position = 'absolute'; ? ? ? map.appendChild(div); ? ? ? foodDivs.push(div); ? } ? function removeFood(){ ? ? for(var i=foodDivs.length-1;i>=0;i--){ ? ? ? ? foodDivs[i].parentNode.removeChild(foodDivs[i]);//先從頁面刪除 ? ? ? ? foodDivs.splice(i,1);//刪除指定位置元素 ?//再從數(shù)組實際刪除 ? ? } ? } ? window.Food=Food;//暴露Food,外部才能訪問 })();
3 蛇對象(Snake.js)
(function(){ ? ? var snakeDivs=[]; ? ? //1 蛇構造函數(shù) ? ? function Snake(options){ ? ? ? ? options=options||{}; ? ? ? ? this.body=[ ? ? ? ? ? ? {x:3,y:2,bgc:'red'}, ? ? ? ? ? ? {x:2,y:2,bgc:'blue'}, ? ? ? ? ? ? {x:1,y:2,bgc:'blue'} ? ? ? ? ]; ? ? ? ? this.width=options.width||20; ? ? ? ? this.height=options.height||20; ? ? ? ? ? ? ? this.direction=options.direction||'right'; ? ? ? ? ? } ? ? //2 渲染到map上 ? ? Snake.prototype.render=function(map){ ? ? ? ? removeSnake(); ? ? ? ? for(var i=0;i<this.body.length;i++){ ? ? ? ? ? ? var block=this.body[i]; ? ? ? ? ? ? var div=document.createElement('div'); ? ? ? ? ? ? div.style.width=this.width+'px'; ? ? ? ? ? ? div.style.height=this.height+'px'; ? ? ? ? ? ? div.style.backgroundColor=block.bgc; ? ? ? ? ? ? div.style.left=block.x*this.width+'px'; ? ? ? ? ? ? div.style.top=block.y*this.height+'px'; ? ? ? ? ? ? div.style.position = 'absolute'; ? ? ? ? ? ? map.appendChild(div); ? ? ? ? ? ? snakeDivs.push(div);//添加蛇divs ? ? ? ? } ? ? } ? ? //3 蛇的移動 ? ? Snake.prototype.move=function(food,map){ ? ? ? ? //邏輯上從后往前 先蛇身再蛇頭 ? ? ? ? //蛇身每一節(jié)替換上次的位置 ? ? ? ? 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; ? ? ? ? } ? ? ? ? //蛇頭移動 ? ? ? ? var head=this.body[0]; ? ? ? ? switch(this.direction){ ? ? ? ? ? ? ? case 'left': ? ? ? ? ? ? ? head.x-=1; ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? case 'up': ? ? ? ? ? ? ? head.y-=1; ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? case 'right': ? ? ? ? ? ? ? head.x+=1; ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? case 'down': ? ? ? ? ? ? ? head.y+=1; ? ? ? ? ? ? ? break; ? ? ? ? } ? ? ? ? if(head.x===food.x&&head.y===food.y){//蛇頭與食物重合 ? ? ? ? ? ? var last=this.body[this.body.length-1]; ? ? ? ? ? ? this.body.push({ ? ? ? ? ? ? ? ? x:last.x, ? ? ? ? ? ? ? ? y:last.y, ? ? ? ? ? ? ? ? bgc:last.bgc ? ? ? ? ? ? }); ? ? ? ? ? ? ? food.render(map);//這里就包括移除前面的食物這一操作 ? ? ? ? ?? ? ? ? ? } ? ? ? ? ? ? } ? ? function removeSnake(){ ? ? ? ?for(var i=snakeDivs.length-1;i>=0;i--){ ? ? ? ? ? ?snakeDivs[i].parentNode.removeChild(snakeDivs[i]);//先從頁面刪除 ? ? ? ? ? ?snakeDivs.splice(i,1);//刪除指定位置元素 ?//再從數(shù)組實際刪除 ? ? ? ?} ? ? } ? ? window.Snake=Snake; })();
4 游戲對象(Game.js)
主要是控制游戲的開始,以及按鍵對應的行為在游戲中的含義,將蛇和食物這兩個對象組織在一起。
?(function(){ var that; ?function Game(){ ? ? ?this.food=new Food(); ? ? ?this.snake=new Snake(); ? ? ?that=this; ?} ?Game.prototype.start=function(map){ ? ? this.snake.render(map); ? ? this.food.render(map); ? ? var head=this.snake.body[0]; ? ? var span=document.getElementById('tag'); ? ? var timerId=setInterval(function(){ ? ? ? ?that.snake.move(that.food,map); ? ? ? ?that.snake.render(map); ? ? ? ?if((head.x>map.offsetWidth/that.snake.width-2)||head.x<=0){ ? ? ? ? ?clearInterval(timerId); ? ? ? ? ?span.style.display='block';//提示Game Over ? ? ? ?} ? ? ? ?if((head.y>map.offsetHeight/that.snake.height-2)||head.y<=0){ ? ? ? ? clearInterval(timerId); ? ? ? ? span.style.display='block';//提示Game Over ? ? ? } ? ? },150); ?? ? ? console.log(map.offsetWidth/this.snake.width-1); ? ? bindKey(); } function bindKey(){ ? ? document.addEventListener('keydown',function(e){ ? ? ? ? switch(e.keyCode){//left 37 up 38 right 39 down 40 ? ? ? ? ? ? case 37: ? ? ? ? ? ? that.snake.direction='left'; ? ? ? ? ? ? break; ? ? ? ? ? ? case 38: ? ? ? ? ? ? that.snake.direction='up'; ? ? ? ? ? ? break; ? ? ? ? ? ? case 39: ? ? ? ? ? ? that.snake.direction='right'; ? ? ? ? ? ? break; ? ? ? ? ? ? case 40: ? ? ? ? ? ? that.snake.direction='down'; ? ? ? ? ? ? break; ? ? ? ? } ? ? }); } window.Game=Game; })() var Game=new Game(); var map=document.getElementById('map'); Game.start(map);
5 index.html
顯示的html頁面
<!DOCTYPE html> <html> <head> ? ? <meta charset="utf-8" /> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <title>Page Title</title> ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> ? ? <style> ? ? #map{ ? ? ? ? background-color: lightgray; ? ? ? ? width: 800px; ? ? ? ? height: 500px; ? ? ? ? margin: 0 auto; ? ? ? ? position: relative; ? ? } ? ? #tag{ ? ? width: 200px; ? ? height: 100px; ? ? background-color: gray; ? ? position: absolute; ? ? left:300px; ? ? top:200px; ? ? line-height: 100px; ? ? text-align: center; ? ? display: none; ? ? } ? ? </style> </head> <body> ? ? <div id='map'> ? ? ? ? <span id='tag'>Game Over</span> ? ? </div> ? ? <script src="js/Tools.js"></script> ? ? <script src="js/Food.js"></script> ? ? <script src="js/Snake.js"></script> ? ? <script src="js/Game.js"></script> </body> </html>
6 運行界面
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Highcharts使用簡例及異步動態(tài)讀取數(shù)據(jù)
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網(wǎng)站或是web應用程序添加有交互性的圖表,并且免費提供給個人學習、個人網(wǎng)站和非商業(yè)用途使用,通過本文給大家介紹Highcharts使用簡例及異步動態(tài)讀取數(shù)據(jù)的相關知識,感興趣的朋友一起學習吧2015-12-12javascript實現(xiàn)節(jié)點(div)名稱編輯
這篇文章主要介紹了js實現(xiàn)節(jié)點(div)名稱編輯,需要的朋友可以參考下2014-12-12