js如何實(shí)現(xiàn)網(wǎng)頁版貪吃蛇游戲
這篇文章將為大家詳細(xì)講解有關(guān)js如何實(shí)現(xiàn)網(wǎng)頁版貪吃蛇游戲，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括黑河網(wǎng)站建設(shè)、黑河網(wǎng)站制作、黑河網(wǎng)頁制作以及黑河網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，黑河網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到黑河省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
使用原生 js 實(shí)現(xiàn)貪吃蛇小游戲，首先這個(gè) 小游戲的目錄結(jié)構(gòu)如下： 有 貪吃蛇 ， 食物 ，地圖 ，還有 游戲
當(dāng)我們在瀏覽器打開 index.html 的時(shí)候，會出現(xiàn) 移動(dòng)的小蛇 ，隨機(jī)生成的食物（這里只有一個(gè)，當(dāng)前食物被吃掉，才會初始化下一個(gè)），用戶通過鍵盤上的方向鍵控制小蛇移動(dòng)的方向
當(dāng)小蛇觸碰到了墻，即畫布邊緣的時(shí)候，游戲結(jié)束!
接下來就是代碼實(shí)現(xiàn)啦 ~
食物模塊
//食物的自調(diào)用函數(shù)
(function(){
//創(chuàng)建一個(gè)數(shù)組 來存放元素
var elements=[];
//食物就是一個(gè)對象 有寬 有高 有顏色 有橫縱坐標(biāo) 先有構(gòu)造函數(shù) 然后創(chuàng)建對象
function Food(width,height,color,x,y){
//元素的寬和高 默認(rèn)20
this.width=width||20;
this.height=height||20;
//元素的顏色 默認(rèn)綠色
this.color=color||"green";
//元素的橫縱坐標(biāo) 默認(rèn)為0
this.x=x||0;
this.y=y||0;
}
//為元素添加初始化的方法 最好放原型里 公用 在頁面上顯示 所以需要map
Food.prototype.init=function(map) {
//先刪除食物
//外部無法訪問的函數(shù)
remove();
// 創(chuàng)建元素
var div=document.createElement("div");
// 把元素追加到map中
map.appendChild(div);
// 設(shè)置元素的樣式 寬 高 顏色
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
//先脫離文檔流
div.style.position="absolute";
//橫縱坐標(biāo)隨機(jī)產(chǎn)生的
this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
//元素的橫縱坐標(biāo)
div.style.left=this.x+"px";
div.style.top=this.y+"px";
//把div元素追加到elements數(shù)組中
elements.push(div);
};
//私有的函數(shù) 刪除食物的
function remove(){
//elements數(shù)組中有這個(gè)食物
for(var i=0;i小蛇模塊
//小蛇的自調(diào)用函數(shù)
(function(){
//定義一個(gè)數(shù)組 存放小蛇
var elements=[];
// 小蛇的構(gòu)造函數(shù)
function Snake(width,height,direction){
//每個(gè)部分的寬和高
this.width=width||20;
this.height=height||20;
//小蛇的身體部分
this.body=[
{x:3,y:2,color:"red"},//小蛇的頭部
{x:2,y:2,color:"orange"},//小蛇的身體
{x:1,y:2,color:"orange"}//小蛇的身體
];
//方向
this.direction=direction||"right";
}
//通過原型添加方法，給小蛇添加初始化方法
Snake.prototype.init=function(map){
remove();
//循環(huán)遍歷
for(var i=0;i0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
// 判斷方向 改變小蛇的頭部的坐標(biāo)
switch(this.direction){
case "right":
this.body[0].x+=1;
break;
case "left":
this.body[0].x-=1;
break;
case "top":
this.body[0].y-=1;
break;
case "bottom":
this.body[0].y+=1;
break;
}
//判斷有沒有吃到食物
//小蛇的頭的坐標(biāo)和食物的坐標(biāo)一致
var headX=this.body[0].x*this.width;
var headY=this.body[0].y*this.height;
//判斷小蛇的頭部坐標(biāo)和食物的坐標(biāo)是否相同
if(headX==food.x&&headY==food.y){
//獲取小蛇的最后的尾巴
var last=this.body[this.body.length-1];
//加入到數(shù)組中 以對象的方式加入
this.body.push({
x:last.x,
y:last.y,
color:last.color
});
//把食物刪除 初始化食物
food.init(map);
}
};
//添加私有的刪除函數(shù)
function remove(){
var i=elements.length-1;
//逆序 找到這個(gè)元素的父元素 刪除
for(;i>=0;i--){
var ele=elements[i];
//從地圖上刪除元素
ele.parentNode.removeChild(ele);
//從數(shù)組中刪除
elements.splice(i,1);
}
}
//把Snake暴露給window
window.Snake=Snake;
}()); 游戲模塊
//游戲的自調(diào)用函數(shù)
(function(){
var that=null;
//游戲的構(gòu)造函數(shù)
function Game(map){
this.food=new Food();//食物對象
this.snake=new Snake();//小蛇對象
this.map=map;//地圖
that=this;//保留當(dāng)前的實(shí)例對象到that變量中 此時(shí)that 就是this
}
//游戲初始化
Game.prototype.init=function(){
//食物初始化
this.food.init(this.map);
//小蛇初始化
this.snake.init(this.map);//先讓小蛇顯示
//調(diào)用設(shè)置小蛇移動(dòng)的方法
this.runSnake(this.food,this.map);
//調(diào)用按鍵的方法
this.bindKey();
};
//添加原型函數(shù) 設(shè)置小蛇可以自由移動(dòng)
Game.prototype.runSnake=function(food,map){
//此時(shí)的this是實(shí)例對象
//setInterval 方法是通過window調(diào)用的 this指向改變了
var timeId=setInterval(function(){
this.snake.move(food,map);
this.snake.init(map);
//橫坐標(biāo)的最大值 map的屬性在style標(biāo)簽中
var maxX=map.offsetWidth/this.snake.width;
//縱坐標(biāo)的最大值
var maxY=map.offsetHeight/this.snake.height;
var headX=this.snake.body[0].x;
var headY=this.snake.body[0].y;
// 橫坐標(biāo)方向的檢測
if(headX<0||headX>=maxX){
//撞墻了 停止定時(shí)器
clearInterval(timeId);
alert("游戲結(jié)束");
}
//縱坐標(biāo)方向的檢測
if(headY<0||headY>=maxY){
//撞墻了 停止定時(shí)器
clearInterval(timeId);
alert("游戲結(jié)束");
}
}.bind(that),200);//綁定到that中 即實(shí)例對象
};
//獲取用戶的按鍵 改變小蛇的方向
Game.prototype.bindKey=function(){
//這里的this 應(yīng)該是觸發(fā)keydown事件的對象 --document
//所以這里的this就是document
//獲取用戶的按鍵
document.addEventListener("keydown",function(e){
switch(e.keyCode){
case 37:
this.snake.direction="left";
break;
case 38:
this.snake.direction="top";
break;
case 39:
this.snake.direction="right";
break;
case 40:
this.snake.direction="bottom";
break;
}
}.bind(that),false);//綁定實(shí)例對象
};
//暴露給window
window.Game=Game;
}());主頁面
貪吃蛇