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.οnkeydοwn=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事件会在用户按下一个键盘按键发生

语法：οnkeydοwn="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].οnclick=function(){

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

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

}

this.style.background=' ';    //此难度被选中

}

}

btn.οnclick=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").οnclick=function(){

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

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

}

//设置再来一次按钮的点击事件

document.getElementById("again").οnclick=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.οnmοusedοwn=function(event){

/*当鼠标按下时，将鼠标的位置值和初始wrap的位置值记录下来

*/

isDown=true;

mLeft=event.clientX;

mTop=event.clientY;

wrapLeft=wrap.offsetLeft;

wrapTop=wrap.offsetTop;

}

obj.οnmοuseup=function(){

isDown=false;    //鼠标松开

}

document.οnmοusemοve=function(event){

if(isDown){

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

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

}

}

}

转载于:https://www.cnblogs.com/min-ym/p/6113195.html