JS搞怪贪吃蛇2.0 附源码

hello-world

贪吃蛇2.0 已上线   大家可以试玩一下
不喜勿喷 谢谢
上线链接 http://www.grbk.site/tcs/
可暂停继续  代码有详细注释

测试图

链接：https://pan.baidu.com/s/1eve6IXveintJrBk5NMZSyg
提取码：uh6t

var sw=20;//一个方块宽度
    sh=20;//一个方块高度
    tr=30; //行数
    td=30;//列数

var  snake=null;
     food=null;
     game=null;//游戏实例

function Square(x,y,classname) {
    //0,0   0,0
    //20,0  1,0
    //40,0  2,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([2,0]);//把蛇头位置存起来
    //创建蛇身体
    var snakeBody1=new Square(1,0,'snakeBody');
    snakeBody1.create();
    this.pos.push([1,0]);

    var snakeBody2=new Square(0,0,'snakeBody');
    snakeBody2.create();
    this.tail=snakeBody2;
    this.pos.push([0,0]);

    //形成链表关系
    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[0]==nextPos[0] && value[1]==nextPos[1]){
            //如果数组中的两个数据都相等就说明下一个点可以在蛇身体里找到代表撞到自己
            selfCollied=true;
        }
    });
    if(selfCollied){
        console.log('撞到自己了');

        this.strategies.die.call(this);

        return;
    }
    //下个点是围墙  结束游戏
    if (nextPos[0]<0 || nextPos[1]<0 || nextPos[0]>td-1 || nextPos[1]>tr-1){
        console.log('撞墙上了');

        this.strategies.die.call(this);

        return;
    }
    //下个点是食物  身体长大
    if(food && food.pos[0]==nextPos[0] && food.pos[1]==nextPos[1]){
        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.x/sw+this.direction.x,this.head.y/sh+this.direction.y]);
        this.head=newHead;//把this.head蛇头 的信息更新一下

        if(!format){//如果format的值是false 表示需要删除 （除了吃之外的操作）
            this.tail.remove();
            this.tail=this.tail.last;

            //pop push  shift
            // unshift
            this.pos.pop();
        }

    },
    eat:function () {
        this.strategies.move.call(this,true);

        createFood();
        game.score++;

        //把分数显示在页面
        var  fen=document.getElementById('fen');
        fen.innerHTML='你的得分是:&nbsp;&nbsp;'+game.score*5+'&nbsp;'+'分';

    },
    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[0] && y!=value[1]){

                include=false;
            }
        });
    }

    //生成食物
    food=new Square(x,y,'food');
    food.pos=[x,y];//存储一下生成食物的坐标

    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);

    //
    var  snakeWrap=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';
}

hello-world

30900 发表于 2019-11-16 19:10
虽然不玩这种低画质的游戏，还是要支持一下楼主，感谢分享！

大佬 好玩的 分享一个 谢谢

hello-world

wy535564 发表于 2019-11-16 19:33
按键盘的时候，滚动条也跟着动
支持开源

谢谢 提醒  我知道了

yzzq-qaz

哈哈哈 谢谢分享

30900

虽然不玩这种低画质的游戏，还是要支持一下楼主，感谢分享！

烟花3月

学习楼主分享开源精神    感谢

城北之徐公

谢谢分享，搞起

wy535564

按键盘的时候，滚动条也跟着动
支持开源

行云丶尘伤

没有屏蔽 上下貌似 游戏体验不太好···

行云丶尘伤

楼主可以帮我个忙没

hello-world

行云丶尘伤 发表于 2019-11-16 20:24
楼主可以帮我个忙没

怎么了 什么事情