c语言链表贪吃蛇脚本之家,js贪吃蛇代码分享

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

简易贪吃蛇原型

body,div{margin:0;padding:0;}

.snake{width:600px;height:600px;margin:0 auto;background:#ccc;position:relative;overflow:hidden;}

.snake_item{position:absolute;width:18px;height:18px;border:1px solid #000;line-height:20px;background:#666;color:#fff;text-align:center;}

.snake_food{position:absolute;width:18px;height:18px;border:1px solid #000;background:#f00;}

.gamestart,.gamerestart,.score{position:absolute;top:50%;left:0;margin-top:-20px;width:100%;height:40px;line-height:40px;text-align:center;text-align:center;}

.gamestart a,.gamerestart a{color:#333;font-size:30px;text-decoration:none;}

.gameover{position:absolute;top:50%;left:0;margin-top:-60px;color:#333;font-size:40px;width:100%;height:40px;line-height:40px;text-align:center;}

.score{margin-top:-20px;color:#333;font-size:16px;}

.gamerestart{margin-top:20px;}

$(function(){

var snake=new Snake({wrap:$(".snake")}); //实例化一个贪食蛇

});

//贪食蛇构造函数

function Snake(opts){

this.defaults={

initSpeed:500,//初始速度

initNum:5

};

this.opt=$.extend({},this.defaults,opts);

this.wrap=this.opt.wrap; //包裹对象

this.initNum=0; //初始方块数

this.iSpeed=0; //初始速度

this.foodX=0; //存储随机食物的位置

this.foodY=0;

this.eatLeft=0; //存储吃完食物添加位置

this.eatTop=0;

this.wrapWidth=this.wrap.outerWidth();

this.wrapHeight=this.wrap.outerHeight();

this.items=null; //方块数jq对象

this.len=0; //方块数个数

this.itemSize=0; //方块尺寸

this.arrLeft=[]; //存储每个方块的位置

this.arrTop=[];

this.timer=null;

this.curDirect=null; //当前蛇移动的方向

this.score=0; //得分

this.gameStart();

}

Snake.prototype={

constructor:Snake,//重新指定构造函数

/**

* 游戏开始方法

* @method gameOver

**/

gameStart:function(){

var _this=this;

var gameStartHtml='

开始游戏

';

this.wrap.append(gameStartHtml);

this.wrap.find(".gamestart a").click(function(){

_this.init();

$(this).parent().remove();

});

},/**

* 游戏结束方法

* @method gameOver

**/

gameOver:function(){

var _this=this;

var gameOverHtml='

GAME OVER

';

this.wrap.append(gameOverHtml);

var scoreHtml='

您的得分：'+this.score+'

';

this.wrap.append(scoreHtml);

var gameRestart='

重新开始

';

this.wrap.append(gameRestart);

$(document).off("keydown"); //移除键盘事件

this.wrap.find(".gamerestart a").click(function(){

_this.wrap.empty();

_this.init();

});

},/**

* 初始化方法

* @method init

**/

init:function(){

var _this=this;

this.initNum=this.opt.initNum;

var itemHtml='';

//创建贪食蛇

for(var i=0;i

itemHtml+='

}

this.wrap.append(itemHtml);

//重新开始游戏时重置这些属性

this.items=this.wrap.find(".snake_item");

this.len=this.items.length;

this.itemSize=this.items.eq(0).outerWidth(true);

this.arrLeft=[];

this.arrTop=[];

this.iSpeed=this.opt.initSpeed;

this.curDirect="right";

this.score=0;

//每一小方块初始坐标

for(var i=0;i

this.arrLeft.push(this.itemSize*(this.len-1-i));

this.arrTop.push(0);

this.items.eq(i).css({"left":_this.arrLeft[i],"top":_this.arrTop[i]});

};

this.move("right"); //初始向右运动

this.createFood(); //随机生成一个小方块

//键盘事件

$(document).on("keydown",function(event){

event.preventDefault();

// keyCode ：上--38 下---40 左--37 右--39

if(event.which==38&&_this.curDirect!="bottom"&&_this.curDirect!="top"){

_this.move("top");

}else if(event.which==40&&_this.curDirect!="top"&&_this.curDirect!="bottom"){

_this.move("bottom");

}else if(event.which==37&&_this.curDirect!="right"&&_this.curDirect!="left"){

_this.move("left");

}else if(event.which==39&&_this.curDirect!="left"&&_this.curDirect!="right"){

_this.move("right");

}

});

},/**

* 移动方法

* @method move

* @param {string} direct 传递运动的方向

**/

move:function(direct){

var _this=this;

clearInterval(_this.timer);

var curX=0;

var curY=0;

this.timer=setInterval(function(){

//存放最后一个方块位置

_this.eatLeft=_this.arrLeft[0];

_this.eatTop=_this.arrTop[0];

//数组重置(每走一步就把新的位置存入数组，所以要先清空数组)

_this.arrLeft=[];

_this.arrTop=[];

//四种方向判断(如果当前方向和鼠标响应的方向相反，那么继续当前方向移动)

if(direct=="top"){

curY=parseInt(_this.items.eq(0).css("top"))-_this.itemSize;

curX=parseInt(_this.items.eq(0).css("left"));

_this.curDirect="top";

}else if(direct=="bottom"){

curY=parseInt(_this.items.eq(0).css("top"))+_this.itemSize;

curX=parseInt(_this.items.eq(0).css("left"));

_this.curDirect="bottom";

}else if(direct=="left"){

curX=parseInt(_this.items.eq(0).css("left"))-_this.itemSize;

curY=parseInt(_this.items.eq(0).css("top"));

_this.curDirect="left";

}else if(direct=="right"){

curX=parseInt(_this.items.eq(0).css("left"))+_this.itemSize;

curY=parseInt(_this.items.eq(0).css("top"));

_this.curDirect="right";

}

//根据前面一个方块的位置获取当前方块的位置，并存入数组中

for(var i=_this.len-1;i>0;i--)

{

_this.arrLeft.push(parseInt(_this.items.eq(i-1).css("left")));

_this.arrTop.push(parseInt(_this.items.eq(i-1).css("top")));

_this.items.eq(i).css({"left":_this.arrLeft[_this.len-i-1]});

_this.items.eq(i).css({"top":_this.arrTop[_this.len-i-1]});

}

_this.items.eq(0).css({"left":curX,"top":curY}); //第一个方块位置确定下来，后面的方块都跟着前一个方块走

_this.arrLeft.push(curX);

_this.arrTop.push(curY);

_this.fnEat(); //吃到食物操作

if(_this.knock()==false){ //判断是够撞到墙壁或者撞到自己

clearInterval(_this.timer);

};

},this.iSpeed);

},/**

* 随机一个对象坐标

* @method randomFood

* @return {obj} rdX和rdY,分别为随机对象的x轴所标和y轴坐标

**/

randomFood:function(){

var w=this.wrapWidth;

var h=this.wrapHeight;

var itemSize=this.itemSize;

var rdX=Math.random()*w;

var rdY=Math.random()*h;

//随机出来的坐标需要是方块尺寸的倍数

rdX=rdX%itemSize>itemSize/2?rdX-rdX%itemSize+itemSize:rdX-rdX%itemSize;

rdY=rdY%itemSize>itemSize/2?rdY-rdY%itemSize+itemSize:rdY-rdY%itemSize;

//控制不能超出包裹区域

rdX=rdX>w-itemSize?w-itemSize:rdX;

rdY=rdY>h-itemSize?h-itemSize:rdY;

//返回随机的坐标

return{

rdX:rdX,rdY:rdY

}

},/**

* 创建食物

* @method createFood

**/

createFood:function(){

var _this=this;

var rdObj=this.randomFood();

var rdX=rdObj.rdX;

var rdY=rdObj.rdY;

for(var i=0;i

if(this.arrLeft[i]==rdX&&this.arrTop[i]==rdY){ //如果第一次随机生成的方块位置和蛇的身体重合，那么重新随机一次，直到不重合

rdObj=this.randomFood();

rdX=rdObj.rdX;

rdY=rdObj.rdY;

}

}

var foodHtml='

$(foodHtml).css({"left":rdX,"top":rdY}).appendTo(_this.wrap);

this.foodX=rdX;

this.foodY=rdY;

},/**

* 检测是否吃到食物

* @method isEat

* @return {boolean} true表示吃到食物

**/

isEat:function(){

if(this.arrLeft[this.len-1]==this.foodX&&this.arrTop[this.len-1]==this.foodY){

return true;

}

},/**

* 吃到食物后的操作

* @method fnEat

**/

fnEat:function(){

if(this.isEat()){

var _this=this;

var addHtml='

$(addHtml).css({"top":_this.eatTop,"left":_this.eatLeft}).appendTo(_this.wrap);

this.items=this.wrap.find(".snake_item");//重新获取item

this.len=this.items.length; //重新获取方块个数

this.score++;

this.wrap.find(".snake_food").remove();

this.createFood();

this.iSpeed=this.iSpeed<=100?100:this.iSpeed-50; //加速运动

}

},/**

* 检测是否碰撞

* @method isEat

* @return {boolean} false表示碰撞

**/

knock:function(){

var arrLeft=this.arrLeft;

var arrTop=this.arrTop;

var len=this.len;

//碰到墙壁，游戏结束

if(arrLeft[len-1]<0||arrLeft[len-1]>=this.wrapWidth||arrTop[len-1]<0||arrTop[len-1]>=this.wrapHeight){

this.gameOver();

return false;

}

//舌头碰到蛇身体，游戏结束

for(var i=0;i

if(arrLeft[len-1]==arrLeft[i]&&arrTop[len-1]==arrTop[i]){

this.gameOver();

return false;

}

}

}

}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

以上是编程之家为你收集整理的js贪吃蛇代码分享全部内容，希望文章能够帮你解决js贪吃蛇代码分享所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！