为什么我的贪吃蛇速度会越来越快,不断移动的话会使他的速度变得更快。这是因为钻了计时器的空子吗?求解,快急死孩子了。

//创建坐标数组
var gridData = [];
//设置网络行列排布
var td = 30;
var tf = 30;
//设置蛇身大小
var snakeBody = 20;
//在确定新的蛇头坐标时,我们会拿下面的对象和新的蛇头坐标对比
var directionNum = {
    left:{x:-1,y:0,flag:"left"},
    right:{x:1,y:0,flag:"right"},
    up:{x:0,y:-1,flag:"top"},
    down:{x:0,y:1,flag:"bottom"}
}
//设置蛇的身体排布
var snake = {
    //这个是蛇一开始就移动的方向
    direction:directionNum.right,
    snakePos:[
        {x:0,y:0,domContent:"",flag:"body"},
        {x:1,y:0,domContent:"",flag:"body"},
        {x:2,y:0,domContent:"",flag:"body"},
        {x:3,y:0,domContent:"",flag:"head"},
    ]
}
//设置食物的配置信息
var food = {
    x:0,y:0,domContent:""
}
//分数
var score = 0;
//时间延迟
var time = 100;
//计时器
var Timerstop = null;
//以下便是整体设置
function initGame() {
    //初始化地图    
    for(var i = 0;i < td;i++){
        for(var j = 0;j < tf;j++){
            gridData.push({
                x:i,
                y:j
            })
        }
    }
    //绘制蛇
    drawsnake(snake);
    //绘制食物
    drawfood();     
}  
    //绘制蛇身
    function drawsnake(snake){
    for(var i = 0;i < snake.snakePos.length;i++){
        if(!snake.snakePos[i].domContent){
            //如果进入此条件则代表第一次创建蛇身
            snake.snakePos[i].domContent = document.createElement('div');
            snake.snakePos[i].domContent.style.position = 'absolute';
            snake.snakePos[i].domContent.style.width = snakeBody + 'px';
            snake.snakePos[i].domContent.style.height = snakeBody + 'px';
            snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + 'px';
            snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + "px";
            if(snake.snakePos[i].flag === "head"){
            //说明这是蛇身
              snake.snakePos[i].domContent.style.background = `url("img/right.png") center/contain no-repeat`;
              switch (snake.direction.flag) {
                case 'top':{
                    snake.snakePos[i].domContent.style.transform = `rotate(-90deg)`;
                    break;
                }
                case 'right':{
                    snake.snakePos[i].domContent.style.transform = `rotate(0deg)`;
                    break;
                }
                case 'bottom':{
                    snake.snakePos[i].domContent.style.transform = `rotate(90deg)`;
                    break;
                }
                case 'left':{
                    snake.snakePos[i].domContent.style.transform = `rotate(180deg)`;
                    break;
                }
              }
            } else {
                snake.snakePos[i].domContent.style.background = "#9ddbb1";
                snake.snakePos[i].domContent.style.borderRadius = '50%';
            }
            
        }
        document.querySelector(".container").appendChild(snake.snakePos[i].domContent);
        
    }
}
    //碰撞检测 
    function isCollide(newhead){
        var CollideCheackInfo = {
            isCollide : false,
            isEat : false 
        }
        //如果蛇碰到了墙
        if(newhead.x < 0 || newhead.x >= td || newhead.y < 0 || newhead.y >=tf){
            CollideCheackInfo.isCollide = true;
            return CollideCheackInfo;
        }
        //检测是否碰到了自己
        for(let i = 0;i < snake.snakePos.length;i++){
        if(newhead.x === snake.snakePos[i].x && newhead.y === snake.snakePos[i].y){
            CollideCheackInfo.isCollide = true;
            return CollideCheackInfo;
        }
    }
        //检测是否吃到食物
        if(newhead.x === food.x && newhead.y === food.y){
            CollideCheackInfo.isEat = true;
            score++;
        }
        return CollideCheackInfo;
    }
    //绘制食物
    function drawfood(){
        while(true){
            //设置一个可以跳出循环的条件
            var isrepect = false;
            //首先食物的位置坐标肯定是随机的,但是不能在界外生成
            food.x = Math.floor(Math.random()*td);
            food.y = Math.floor(Math.random()*tf);
            //其次食物还不能生成在蛇的身上
            for(let i = 0;i < snake.snakePos.length;i++){
                if(snake.snakePos[i].x === food.x && snake.snakePos[i].y === food.y){
                    var isrepect = true;
                    break;
                    //这里就是跳出循环,则可以重新遍历食物的坐标
                }
            }
            if(!isrepect){
                //如果进入了这个循环则代表食物的坐标没有任何的问题,则可以跳出整个死循环
                break;
            }
        }
        //下面进行食物的样式配置
        if(!food.domContent){
            food.domContent = document.createElement("div");
            food.domContent.style.width = snakeBody + "px";
            food.domContent.style.height = snakeBody + "px";
            food.domContent.style.background = "green";
            food.domContent.style.borderRadius = "50%";
            food.domContent.style.position = "absolute";
            document.querySelector(".container").append(food.domContent);
        }
        food.domContent.style.left = food.x * snakeBody + "px";
        food.domContent.style.top = food.y * snakeBody + "px";
    }
    //蛇的移动方法
    function snakemove(){
        //根据计算算出旧蛇头的坐标
        var oldhead = snake.snakePos[snake.snakePos.length - 1];
        //在这里就是将新的位置改为新头
        var newhead = {
            domContent : "",
            x : oldhead.x + snake.direction.x,
            y : oldhead.y + snake.direction.y,
            flag : "head"
        }
        //进行碰撞试验
        var Collideresult = isCollide(newhead);
        if(Collideresult.isCollide){
           if(window.confirm(`游戏结束,您的成绩为${score}分,是否重新开始游戏`)){
            document.querySelector('.container').innerHTML = '';
            snake = {
                //这个是蛇一开始就移动的方向
                direction:directionNum.right,
                snakePos:[
                    {x:0,y:0,domContent:"",flag:"body"},
                    {x:1,y:0,domContent:"",flag:"body"},
                    {x:2,y:0,domContent:"",flag:"body"},
                    {x:3,y:0,domContent:"",flag:"head"},
                ]
            }
            food = {
                x:0,y:0,domContent:""
            }
            score = 0;
            initGame();
           } else {
            document.onkeydown = null;
            clearInterval(timerstop);
           }
           return;
        }
        //在这里则就是将旧的头部改为身体
        oldhead.flag = "body";
        oldhead.domContent.style.background = "#9ddbb1";
        oldhead.domContent.style.borderRadius = "50%";
        snake.snakePos.push(newhead);
        //这里查看是否吃到了食物
        if(Collideresult.isEat){
            //吃到了食物就得重新生成食物
            drawfood();
        } else {
            //没有吃到食物就得移除最后一个元素
            document.querySelector('.container').removeChild(snake.snakePos[0].domContent);
            snake.snakePos.shift();
        }
        //接下来就是重新绘制蛇身
        drawsnake(snake);
    }
    //计时器函数
    function startTime(){
        Timerstop = setInterval(function(){
            snakemove();
        },time)
    }
    function bindEvent(){
        //首先是键盘事件,控制台可获得字符
        document.onkeydown = function(e){
            if((e.key === "ArrowRight" || e.key === "d") && snake.direction.flag !== 'left'){
                //此时蛇向右
                snake.direction = directionNum.right;
            }
            if((e.key === "ArrowLeft" || e.key === "a") && snake.direction.flag !== 'right'){
                //此时蛇向左
                snake.direction = directionNum.left;
            }
            if((e.key === "ArrowUp" || e.key === "w") && snake.direction.flag !== 'down'){
                //此时蛇向上
                snake.direction = directionNum.up;
            }
            if((e.key === "ArrowDown" || e.key === "s") && snake.direction.flag !== 'top'){
                //此时蛇向下
                snake.direction = directionNum.down;
            }
            //用计时器进行移动
            startTime();
           
        }
    }
//以下是主方法
function main(){
    //先进行方法的初始化
    initGame();
    //绑定事件
    bindEvent();
}
main();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值