Css jQuery Змея Попытка

Question

Я новичок в js, и это моя попытка простой классической игры в змею.Я хотел сделать его удобным для html / css, поэтому пиксели карты - это блоки div, движения змей - варианты цвета фона с анимацией css.

Классическая игра Snake на 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%.- Я подозреваю, что это из-за коробки css - переход: все 0.1s линейные;Потому что чем ниже я устанавливаю время перехода, тем меньше я сажусь на змею.Спасибо -

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. Тем не менее, не понимаю, почему вызов функции не удался только иногда