js程式設計--貪吃蛇遊戲07
阿新 • • 發佈：2018-12-06
注意，都是建立在前面幾個步驟至上開發的。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的貪吃蛇07</title> <script type="text/javascript" src="jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="snake.js" ></script> </head> <body> <button id="start">開始</button><button id="pause">暫停</button> </body> </html>
snake.js
$(document).ready(function(){ var mapDiv=new Mapdiv();//地圖 var snake=new Snake();//蛇 var food=new Food();//食物 snake.show();//將蛇顯示出來 food.show();//將食物顯示出來 snake.food=food; $(document).keydown(function(e){//鍵盤事件 var code=e.keyCode; switch (code){ case 37: case 38: case 39: case 40: snake.code=code;//蛇移動，根據鍵盤方向 break; } }); var timer=null; $("#start").click(function(){ timer=setInterval(function(){ snake.run(); }, 300); }); $("#pause").click(function(){ clearInterval(timer); }); }); //地圖 var Mapdiv=function(){ var div=$("<div></div>"); div.appendTo("body"); div.css( { "width": "800px", "height": "500px", "background-color":"darkgrey", "position": "absolute" }); div.attr("id","map_div"); }; //蛇 var Snake=function(){ this.code=39; var stup=50; this.food=null; this.body=[ {x:2,y:0,c:"green"}, {x:1,y:0,c:"black"}, {x:0,y:0,c:"blue"} ]; this.show=function(){ $("div").remove(".snake_body"); $.each(this.body, function(i,d) { var div=$("<div></div>"); div.appendTo("#map_div"); div.attr("class","snake_body"); //alert(d.x); div.css( { "width": "50px", "height": "50px", "background-color":d.c, "position": "absolute", "margin-left":d.x*stup, "margin-top":d.y*stup }); }); }; //吃食物 this.eat=function(food){ food.eated(this); var color=randomRgbaColor(); this.body.push({x:this.food.x,y:this.food.y,c:this.food.c}); }; //移動 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; } // alert(code); //判斷方向 switch(this.code){ case 37 :this.body[0].x--;//蛇頭向左 break; case 39 :this.body[0].x++;//蛇頭向右 break; case 38 :this.body[0].y--;//蛇頭向上 break; case 40 :this.body[0].y++;//蛇頭向下 break; } //判斷是否碰壁 if(this.body[0].x<0||this.body[0].x>15||this.body[0].y<0||this.body[0].y>9){ alert("碰壁了！！！"); this.body=[ {x:2,y:0,c:"green"}, {x:1,y:0,c:"black"}, {x:0,y:0,c:"blue"} ]; } //判斷是否碰到蛇身 for(var i=1;i<this.body.length;i++){ if(this.body[i].x==this.body[0].x&&this.body[i].y==this.body[0].y){ alert("已經碰到蛇身了！！"); } } //判斷是否遇到食物 if(this.food.x==this.body[0].x&&this.food.y==this.body[0].y){ this.eat(this.food); } this.show(); } }; //食物 var Food=function(){ var div=$("<div></div>"); div.appendTo("#map_div"); this.x=0; this.y=0; this.c=randomRgbaColor(); //食物被吃 this.eated=function(snake){ var labe=true; this.c=randomRgbaColor(); while(labe){ this.x=parseInt(Math.random()*16); this.y=parseInt(Math.random()*10); for(var i=0;i<snake.body.length;i++){ if(this.x==snake.body[i].x&&this.y==snake.body[i].y){ this.x=parseInt(Math.random()*16); this.y=parseInt(Math.random()*10); labe=true; break; }else{ labe=false; } } } div.css( { "background-color":this.c, "margin-left":this.x*50, "margin-top":this.y*50 }); }; //顯示食物 this.show=function(){ this.x=parseInt(Math.random()*16); this.y=parseInt(Math.random()*10); div.css( { "width": "50px", "height": "50px", "background-color":this.c, "position": "absolute", "margin-left":this.x*50, "margin-top":this.y*50 }); }; }; //隨機生成顏色 function randomRgbaColor() { //隨機生成RGBA顏色 var r = Math.floor(Math.random() * 256); //隨機生成256以內r值 var g = Math.floor(Math.random() * 256); //隨機生成256以內g值 var b = Math.floor(Math.random() * 256); //隨機生成256以內b值 //var alpha = Math.random(); //隨機生成1以內a值 return `rgb(${r},${g},${b})`; //返回rgba(r,g,b,a)格式顏色,${alpha} //$("#map_div").text(r); }