JS搞怪贪吃蛇2.0 附源码
贪吃蛇2.0 已上线 大家可以试玩一下不喜勿喷 谢谢
上线链接 http://www.grbk.site/tcs/
可暂停继续代码有详细注释
链接：https://pan.baidu.com/s/1eve6IXveintJrBk5NMZSyg
提取码：uh6t
var sw=20;//一个方块宽度
sh=20;//一个方块高度
tr=30; //行数
td=30;//列数
varsnake=null;
food=null;
game=null;//游戏实例
function Square(x,y,classname) {
//0,0 0,0
//20,01,0
//40,02,0
this.x=x*sw;
this.y=y*sh;
this.class=classname;
this.viewContent=document.createElement('div');//方块对应的DOM元素
this.viewContent.className=this.class;
this.parent=document.getElementById('snakeWrap');//方块的父级
}
Square.prototype.create=function () {//创建方块DOM
this.viewContent.style.position='absolute';
this.viewContent.style.width=sw+'px';
this.viewContent.style.height=sh+'px';
this.viewContent.style.left=this.x+'px';
this.viewContent.style.top=this.y+'px';
this.parent.appendChild(this.viewContent);
};
Square.prototype.remove=function () {
this.parent.removeChild(this.viewContent);
};
function Snake() {
this.head=null;//蛇头
this.tail=null;//蛇尾
this.pos=[];//蛇身体上每个方块的位置
this.directionNum={
//蛇走的方向
left:{
x:-1,
y:0,
rotate:180
},
right:{
x:1,
y:0,
rotate: 0
},
up:{
x:0,
y:-1,
rotate:-90
},
down:{
x:0,
y:1,
rotate:90
}
}
}
//init 初始化
Snake.prototype.init=function () {
//创建蛇头
var snakeHead=new Square(2,0,'snakeHead');
snakeHead.create();
this.head=snakeHead;//存储蛇头信息
this.pos.push();//把蛇头位置存起来
//创建蛇身体
var snakeBody1=new Square(1,0,'snakeBody');
snakeBody1.create();
this.pos.push();
var snakeBody2=new Square(0,0,'snakeBody');
snakeBody2.create();
this.tail=snakeBody2;
this.pos.push();
//形成链表关系
snakeHead.last=null;
snakeHead.next=snakeBody1;
snakeBody1.last=snakeHead;
snakeBody1.next=snakeBody2;
snakeBody2.last=snakeBody1;
snakeBody2.next=null;
//初始化时 给蛇添加一条属性
this.direction=this.directionNum.right;
}
//获取蛇头下一个位置 根据下一个位置做不同的事情
Snake.prototype.getNextPos=function(){
var nextPos=[//蛇头下一个点
this.head.x/sw+this.direction.x,
this.head.y/sh+this.direction.y
]
//下个点如果是自己 结束游戏
var selfCollied=false;
this.pos.forEach(function (value) {
if(value==nextPos && value==nextPos){
//如果数组中的两个数据都相等就说明下一个点可以在蛇身体里找到代表撞到自己
selfCollied=true;
}
});
if(selfCollied){
console.log('撞到自己了');
this.strategies.die.call(this);
return;
}
//下个点是围墙结束游戏
if (nextPos<0 || nextPos<0 || nextPos>td-1 || nextPos>tr-1){
console.log('撞墙上了');
this.strategies.die.call(this);
return;
}
//下个点是食物身体长大
if(food && food.pos==nextPos && food.pos==nextPos){
console.log('撞到食物了');
this.strategies.eat.call(this);
return;
}
//下个点什么也不是继续走下去
this.strategies.move.call(this);
}
//处理碰撞后要做的事情
Snake.prototype.strategies={
move:function (format) {//format决定要不要删除蛇尾
//创建新的身体在旧蛇头位置
var newBody=new Square(this.head.x/sw,this.head.y/sh,'snakeBody');
//更新链表关系
newBody.next=this.head.next;
newBody.next.last=newBody;
newBody.last=null;
this.head.remove();//把旧蛇头从原来的位置删除
newBody.create();
//创建新蛇头
var newHead=new Square(this.head.x/sw+this.direction.x,this.head.y/sh+this.direction.y,'snakeHead');
newHead.next=newBody;
newHead.last=null;
newBody.last=newHead;
newHead.viewContent.style.transform='rotate('+this.direction.rotate+'deg)';
newHead.create();
//蛇身体进行更新 splice()第0位替换0个添加的
this.pos.splice(0,0,);
this.head=newHead;//把this.head蛇头 的信息更新一下
if(!format){//如果format的值是false 表示需要删除 （除了吃之外的操作）
this.tail.remove();
this.tail=this.tail.last;
//pop pushshift
// unshift
this.pos.pop();
}
},
eat:function () {
this.strategies.move.call(this,true);
createFood();
game.score++;
//把分数显示在页面
varfen=document.getElementById('fen');
fen.innerHTML='你的得分是: '+game.score*5+' '+'分';
},
die:function () {
game.over();
console.log('die');
}
}
snake=new Snake();
//创建食物
function createFood() {
var x=null;
var y=null;
var include=true; //循环跳出的条件 true 表示食物的坐标在蛇身体上 false 表示食物不在蛇身体上
while (include){
x=Math.round(Math.random()*(td-1));
y=Math.round(Math.random()*(tr-1));
snake.pos.forEach(function(value) {
if(x!=value && y!=value){
include=false;
}
});
}
//生成食物
food=new Square(x,y,'food');
food.pos=;//存储一下生成食物的坐标
var footDom=document.querySelector('.food');
if(footDom){
footDom.style.left=x*sw+'px';
footDom.style.top=y*sh+'px';
}else{
food.create();//生成下一个食物
}
}
//创建游戏
function Game() {
this.timer=null;//定时器
this.score=0;//得分
}
Game.prototype.init=function () {
snake.init();
// snake.getNextPos();
createFood();
//键盘事件 37左38上39右40下
document.onkeydown=function (ev) {
if(ev.which==37 && snake.direction!=snake.directionNum.right){//用户按下左键是 蛇不能正在往右走
snake.direction=snake.directionNum.left;
}else if (ev.which==38 && snake.direction!=snake.directionNum.down) {
snake.direction=snake.directionNum.up;
}else if (ev.which==39 && snake.direction!=snake.directionNum.left) {
snake.direction=snake.directionNum.right;
}else if (ev.which==40 && snake.direction!=snake.directionNum.up) {
snake.direction=snake.directionNum.down;
}
}
this.start();
}
Game.prototype.start=function(){
this.timer=setInterval(function(){
snake.getNextPos();
},400);
}
Game.prototype.pause=function(){
clearInterval(this.timer);
}
Game.prototype.over=function(){
clearInterval(this.timer);
alert('你的得分为:'+this.score);
//
varsnakeWrap=document.getElementById('snakeWrap');
snakeWrap.innerHTML='';
snake=new Snake();
game=new Game();
var startBtnWrap=document.querySelector('.startBtn');
startBtnWrap.style.display='block';
}
//开启游戏
game=new Game();
var startBtn=document.querySelector('.startBtn button');
startBtn.onclick=function(){
startBtn.parentNode.style.display='none';
game.init();
};
//暂停游戏
var snakeWrap=document.getElementById('snakeWrap');
var pauseBtn=document.querySelector('.pauseBtn button');
snakeWrap.onclick=function () {
game.pause();
pauseBtn.parentNode.style.display='block';
}
pauseBtn.onclick=function () {
game.start();
pauseBtn.parentNode.style.display='none';
}
30900 发表于 2019-11-16 19:10
虽然不玩这种低画质的游戏，还是要支持一下楼主，感谢分享！
大佬 好玩的 分享一个 谢谢:handshake wy535564 发表于 2019-11-16 19:33
按键盘的时候，滚动条也跟着动
支持开源
谢谢 提醒我知道了 哈哈哈 谢谢分享 虽然不玩这种低画质的游戏，还是要支持一下楼主，感谢分享！ 学习楼主分享开源精神 感谢 谢谢分享，搞起:wwqwq 按键盘的时候，滚动条也跟着动
支持开源 没有屏蔽 上下貌似 游戏体验不太好··· 楼主可以帮我个忙没 行云丶尘伤 发表于 2019-11-16 20:24
楼主可以帮我个忙没
怎么了 什么事情 {:1_904:}
页:
[1]
2