Snake小遊戲

 

var title=document.querySelector(".title");

var wrap=document.querySelector(".wrap")

warp.style.left=(document.documentElement.clientWidth-wrap.offsetWidth)/2+"px";

drag(title,wrap); //設置遊戲框的拖拽　　　　

/*

HTML DOM querySelector()方法：

querySelector()方法返回文檔中匹配指定 CSS 選擇器的一個元素；

實例：

獲取文檔中id="demo"的第一個元素

document.querySelector("#demo");

注意：querySelector()方法僅返回匹配指定選擇器的第一個元素。如需返回所有元素，使用 querySelectorAll() 方法；

 

jQuery wrap()方法

wrap()方法使用指定的 HTML 元素來包裹每一個被選元素。

實例：

在<div>元素中包裹P元素

$("button").click(function(){

$("p").wrap("<div></div>")

});

 

scrollWidth  
是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。 
clientWidth  
是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。  
offsetWidth  
是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。

*/

var ohScore=document.querySelector(".hScore");

var oScore=document.querySelector(".score");

var score=0;  //初始分0

//設置最高分爲以前存儲過的最高分

if(localStorage.getItem('max')){

ohScore.innerHTML="歷史最高分 ："+localStorage.getItem('max')+"  分";

}

var ulBox=document.queryScore(".boxWrap");

var c=28;  //28列

var r=35;  //35行

var allArr=[];  //用於裝入全部的盒子

//建立遊戲區域

for(var i=0;i<r;i++){

var rArr=[];  //裝入的是一排全部的盒子

var rLi=document.createElement("li");

rLi.className="clearfix";   //清浮動

for(var j=0;j<c;j++){

var box=document.createElement("div");

rArr.push(box);

rLi.appendChild(box)

}

ulBox.appendChild(rLi);

allArr.push(rArr);

}

//蛇的移動

var stepTime;    //蛇每走一步的時間

var moveTimer=null;    //定時器

var direction='right';

var x=4,y=0  //起始位置

function move(){

　　moveTimer=setInterval(function(){

　　　　switch (direction){

　　　　　　case 'right':

　　　　　　x++;

　　　　　　break;

　　　　　　case 'left':

　　　　　　x--;

　　　　　　break;

　　　　　　case 'up':

　　　　　　y--;

　　　　　　break;

　　　　　　case 'down':

　　　　　　y++;

　　　　　　break;

　　　　}

　　　　if(x<0 || y<0 || x>=c || y>=r){

　　　　　　clearInterval(moveTimer);

　　　　　　gameOver()   //遊戲結束

　　　　　　return;

　　　　}

　　　　if(x==eggX && y==eggY && allArr[eggY][eggX].className=='egg'){   //防止createEgg()函數在遞歸時產生的eggX和eggY的影響

　　　　　　snakeArr.push(allArr[eggY][eggX]);

　　　　　　allArr[eggY][eggX].className="snake";

　　　　　　score++;

　　　　　　oScore.innerHTML='得分 ：'+score+"  分";

　　　　　　createEgg();

　　　　}

　　　　else{

　　　　　　//判斷蛇是否咬到本身

　　　　　　if(allArr[y][x].className="snake"){

　　　　　　　　clearInterval(moveTimer);

　　　　　　　　gameOver();   //遊戲結束

　　　　　　}

　　　　　　snakeArr[0].className="";

　　　　　　snakeArr.shift();

　　　　　　allArr[y][x].className="snake";

　　　　　　snakeArr.push(allArr[y][x]);

　　　　}

　　}

　　,stepTime)

}

/*

setInterval()方法可按照指定的週期（以毫秒計）來調用函數或表達式。

setInterval()方法會不停地調用函數，直到clearInterval()被調用或窗口被關閉。由setInterval()返回的ID值可用作clearInterval()方法的參數。

 

css direction 屬性：

direction屬性規定文本的方向/書寫的方向

該屬性指定了塊的基本書寫方向，以及針對 Unicode 雙向算法的嵌入和覆蓋方向。不支持雙向文本的用戶代理能夠忽略這個屬性。

ltr   默認。文本方向從左到右

rtl  文本方向從右到左

*/

 

 //添加鍵盤的對蛇的控制

var ks=true;    //阻止按鍵衝突，即防止下一次的按鍵覆蓋上一次按鍵的操做

document.onkeydown=function(event){

if(!ks){

return;

}

//化解方向衝突，阻止蛇的原地反向

if(event.keyCode==37 && direction =='right'){

return;

}

if(event.keyCode==39 && direction =='left'){

return;

}

if(event.keyCode==40 && direction=='up'){

return;

}

if(event.keyCode==38 && direction=='down'){

return;

}

//設置鍵盤方向鍵對蛇的控制

switch(event.keyCode){

case 37:

direction="left";

break;

case 38:

direction="up";

break;

case 39:

direction="right";

break;

case 40:

direction="down";

break;

}

ks=false;

setTimeout(

function(){

ks=true;

}

,stepTime)

console.log(stepTime);

}

/*

onkeydown事件會在用戶按下一個鍵盤按鍵發生

語法：onkeydown="SomeJavaScriptCode"

參數：SomeJavaScriptCode  必需。規定該事件發生時執行的JavaScript;

瀏覽器差別：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。

*/

 

//生成隨機位置的蛋

var eggX,eggY;   //蛋的位置索引

function createEgg(){

eggX=parseInt(Math.random()*c);

eggY=parseInt(Math.random()*r);

if(allArr[eggY][eggX].className!='snake'){

allArr[eggY][eggX].className='egg';

}

else{

createEgg();

}

}

createEgg();

 

//開始按鈕的點擊事件，以及初中高遊戲等級的選擇按鈕

var btn=document.getElementById("btn");

var snakeArr=[];    //用於裝入蛇身體全部的方塊

var btnChoose=document.querySelectorAll(".choose");

for(var i=0;i<btnChoose.length;i++){

btnChoose[i].style.background='gray';    //先將全部難度按鈕變灰

//定義難度按鈕的點擊事件

btnChoose[i].onclick=function(){

for (var j=0;j<btnChoose.length;j++){

btnChoose[j].style.background='gray';

}

this.style.background=' ';    //此難度被選中

}

}

btn.onclick=function(){

init();    //遊戲初始化

//判斷用戶選擇的遊戲難度

if(btnChoose[0].style.background==' '){

stepTime=280;    //初級難度

}

else if(btnChoose[1].style.background==' '){

stepTime=140;    //中級難度

}

else if(btnChoose[2].style.background==' '){

stepTime=70;    //高級難度

}

else{

alert('請選擇遊戲難度~(^_^)');

return;

}

//封面收起特效

btn.parentNode.style.transform='rotate(180deg) scale(0)';

move();

}

 

/*

中止遊戲，並彈出成績，並記錄最高分

*/

var gameOverBox=document.querySelector(".gameOver");

function gameOver(){

gameOverBox.innerHTML='<font size-"8" color="red">Game Over</font><br/>'+"你的得分   ："+score+'<span id="again">再來一次</span>'+'<span id="quit">退出遊戲</span>';

gameOverBox.style.transform="scale(1)";    //transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。

//退出遊戲按鈕的點擊事件

document.getElementById("quit").onclick=function(){

btn.parentNode.style.transform='rotate(0deg) scale(1)';

gameOverBox.style.transform="scale(0)";

}

//設置再來一次按鈕的點擊事件

document.getElementById("again").onclick=function(){

gameOverBox.style.transform="scale(0)";

init();

move();

}

//設置最高分爲web存儲

var h=localStorage.getItem('max');

if(h==null || h<score){

localStorage.setItem('max',score);    //localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。

h=score;

}

ohScore.innerHTML="歷史最高分 ： "+h+" 分";

}

 

/*遊戲初始化，將蛇身數組初始化

*並將以前的蛋復原，從新產蛋

*還有方向等一些設置

*/

function init(){

for (var i=0;i<snakeArr.length;i++){

snakeArr[i].className=' ';    //將以前蛇的類名所有清空

}

allArr[eggY][eggX].className=' ' ;    //把蛋去掉

x=4;

y=0;

//建立蛇身，將蛇身上色（從新載入對象）

snakeArr=[];

for (var i=0;i<5;i++){

snakeArr.push(allArr[0][i]);

snakeArr[i].className='snake';

}

createEgg();

direction='right';

score=0;

oScore.innerHTML='得分 : 0  分';

}

 

/*設置對象可用鼠標拖動

*注意：使用以前須將wrap設置爲絕對定位，且top和left值需爲具體的px數值，且margin不能設置

*@param obj object 可用鼠標拖動的區域

*@param wrap object 整個移動的框

 */

function drag(obj,wrap){

var isDown=false;    //標記方塊的拖拽狀態，鼠標按下時爲true

var wrapLeft,wrapTop,mLeft,mTop;   //wrap的位置值及鼠標按下時的值

 

obj.onmousedown=function(event){

/*當鼠標按下時，將鼠標的位置值和初始wrap的位置值記錄下來

*/

isDown=true;

mLeft=event.clientX;

mTop=event.clientY;

wrapLeft=wrap.offsetLeft;

wrapTop=wrap.offsetTop;

}

obj.onmouseup=function(){

isDown=false;    //鼠標鬆開

}

document.onmousemove=function(event){

if(isDown){

wrap.style.left=event.clientX-mLeft+wrapLeft+"px";

wrap.style.top=event.clientY-mTop+wrapTop+"px";

}

}

}