javascript - Css jQuery 蛇尝试

Question

我是 js 的新手，这是我对一个简单的经典贪吃蛇游戏的尝试。 我想让它成为 html/css 友好的，所以 map 像素是 div 框，蛇的运动是带有 css 动画的背景颜色选项。

Snake Classic game on CodePen

我目前遇到的问题 -
*罕见 - 浆果会在蛇身上产卵，即使它不应该产卵。
*极其罕见 - 当蛇变长一点时随机死亡。

可能还有其他我没有注意到的问题。

我将感谢您的帮助和任何关于优化或无用/过于复杂的代码评论的评论

//PAINT MAP
function mapMe(){

var i = 1;
while (i < 101){
    $('.map').append('<div class="box" id="loadID""></div>');
    $("#loadID").attr("id",i);
    i++;
}

console.log("map loaded and starting move engine");
moveEngine();}

//render player
var playerPosition = 1;
$("#"+ playerPosition).css("background-color","black");
var snakeMoves = [1];
var snakeDirection;
var snakeLength = 0;
var keyboardSmoother = true;
var berryPosition;

//Spawn a Berry

function berryMe(){
    var berry = berryPosition;
    berryPosition = Math.floor((Math.random() * 100) + 1);
    if(berry === berryPosition){console.log("samevalue/respawn 
  berry");berryMe()};
        //Generate Berry randomly
    if ($("#"+ berryPosition).css("background-color") === "rgb(0, 0, 
  0)"){
        console.log("collision detected/respawn berry")
        berryMe();
    }
    $("#"+ berryPosition).css("background-color","purple");
};
berryMe()

//playerMoves
$(document).keydown(function(e) {

    if (keyboardSmoother === true){
//left
    if(e.keyCode === 37){
        if (snakeDirection == "right"){return;}
         snakeDirection = "left";
    }
    //right
    else if(e.keyCode === 39){
        if (snakeDirection == "left"){return;}
        snakeDirection = "right";
    }
    //down
    else if(e.keyCode === 40){
        if (snakeDirection == "up"){return;}
        snakeDirection = "down";
    }
    //right
    else if(e.keyCode === 38){
        if (snakeDirection == "down"){return;}
        snakeDirection = "up";
    };
    }
    keyboardSmoother = false;
})
    //check STATE of your snake

function checkState(){
        $("#"+ berryPosition).css("background-color","purple");
        //Then print head
$("#"+ playerPosition).css("background-color","black");
        $("#"+ playerPosition).css("animation","float 1.5s ease-in-out 
   infinite");

    //Clear array cache according to snake length
    if(snakeMoves.length > 3){
        while (snakeMoves.length > snakeLength + 3){
    snakeMoves.shift();}}
    //EATH A BERRY MM TASTY
    if ($("#"+ playerPosition).css("background-color") === "rgb(128, 0, 
    128)"){
    snakeLength++;
        var audio = $("#clickSound")[0];
    audio.currentTime = 0;
    audio.volume = 0.7;
    audio.play();
        $(".scoreBoard").text(snakeLength);
    console.log("berry ate");
    berryMe();
    }
    //render clear path behind snake
    $("#"+ snakeMoves[snakeMoves.length- 
    (snakeLength+2)]).css("background-color","azure");
        $("#"+ snakeMoves[snakeMoves.length- 
      (snakeLength+2)]).css("animation","none");

    //DEATH IF TOUCH YOURSELF
    if ($("#"+ playerPosition).css("background-color") === "rgb(0, 0, 
       0)"){
        console.log("DEATH, HighScore: ", snakeLength);
        playerPosition = 1;
        snakeLength = 0;
        $(".box").css("background-color","white");
        $("#"+ playerPosition).css("background-color","black");
        snakeMoves = [1];
        $(".scoreBoard").text(snakeLength);
        $('.box').css("animation","none");
        berryMe();
    };
    }
var difficultyLevel;
var reload = false;
function moveEngine(){
var timerId = setInterval(function() {
console.log( difficultyLevel );
    if (reload === true){clearInterval(timerId);};
    if (snakeDirection == "right"){
        //console.log('snake go right');
        playerPosition = playerPosition+1;
        if (playerPosition.toString().charAt(1) === "1" || 
 playerPosition === 101){playerPosition = playerPosition - 10;};
    }
    else if (snakeDirection == "left"){
        //console.log('snake go left');
        playerPosition = playerPosition-1;
        if (playerPosition.toString().charAt(1) === "0" || 
 playerPosition === 0){playerPosition = playerPosition + 10;};
    }
    else if (snakeDirection == "up"){
        //console.log('snake go up');
        playerPosition = playerPosition-10;
        if(playerPosition<=0 ){playerPosition = playerPosition+100;};
    }
    else if (snakeDirection == "down"){
        //console.log('snake go down');
        playerPosition = playerPosition+10;
        if(playerPosition>100){playerPosition = playerPosition-100;};
    }
    //Recording and rendering player
    keyboardSmoother = true;
snakeMoves.push(playerPosition);
    checkState();
        },difficultyLevel);}
    function startGame(_value){
        $("h1").hide();
        console.log(_value);

        if(_value === 1){
            difficultyLevel = 300
            console.log("diff set EASY");
        };if(_value === 2){
            difficultyLevel = 150
            console.log("diff set NORMAL");
        }; if(_value === 3){
            difficultyLevel = 50
            console.log("diff set HARD");
        }
        console.log(difficultyLevel);
        $("h2").show();
        reload = false;
        mapMe();
    }
function reloadMe(){
    reload = true;
    $(".box").remove();
    $("h1").show();
    playerPosition = 1;
        snakeLength = 0;
        $(".box").css("background-color","white");
        $("#"+ playerPosition).css("background-color","black");
        snakeMoves = [1];
        $(".scoreBoard").text(snakeLength);
        $('.box').css("animation","none");
    berryMe();
}

我最感兴趣的是为什么我的异常/* if ($("#"+ berryPosition).css("background-color") === "rgb(0, 0, 0)"){ console.log("检测到碰撞/重生浆果") berryMe(); */大部分时间都有效，但不是 100%。 -- 我怀疑是因为 box css - transition: all 0.1s linear;因为我设置的过渡时间越低，我得到的浆果就越少。谢谢——

Answer 1

我的解决方案正在改变:

if ($("#"+ berryPosition).css("background-color") === "rgb(0, 0, 0)"){ 
console.log("collision detected/respawn berry") call function that randomly puts berry...}

到

while($("#"+ berryPosition).css("background-color") === "rgb(0, 0, 0)) . 
 {console.log("collision detected/respawn berry")pick random numbers until it fits empty position for berry...}

.即使没有调用函数并且 moveTimer 已更新，似乎也在重生浆果。 仍然不明白为什么调用函数有时会失败