首页 > 代码库 > Snake小游戏
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 分‘;
}
Snake小游戏