Question

Как проверить, движется ли «клетка» «змеи» вверх / вниз или влево / вправо, чтобы я мог поставить правильный значок? Я перепробовал все, что знаю, но он все еще не работает.

<!DOCTYPE html>
<html>
    <head>
        <title>Snake Game</title>
        <style>
            html {
                background-color: #beb5b5;
            }
            canvas{
                display: block;
                margin: 0 auto;
                margin-top: 10%;
            }
        </style>
    </head>

        <canvas id="snake" width="600" height="600"></canvas>
          
           <script>
const cvs = document.getElementById("snake");
const ctx = cvs.getContext("2d");


// Varje ruta i bilden är 32 px
const box = 30;


// Bilderna
const aplleImg = new Image();
aplleImg.src = "img/apple.png";
        
const snakeImg = new Image();
snakeImg.src = "img/snakeFront.png";
        
const snakeTailImg = new Image();
snakeTailImg.src = "img/snakeTailImg.png";


// Låtarna
let dead = new Audio();
let eat = new Audio();
let up = new Audio();
let right = new Audio();
let left = new Audio();
let down = new Audio();

dead.src = "audio/dead.mp3";
eat.src = "audio/eat.mp3";
up.src = "audio/up.mp3";
right.src = "audio/right.mp3";
left.src = "audio/left.mp3";
down.src = "audio/down.mp3";



// Deklarera snake som en array
let snake = [];

snake[0] = {    // Bestämmer "huvudets" koordinater
    x : 9 * box,
    y : 10 * box
};



// Deklarera apple som ett objekt
let apple = {
    x : Math.floor(Math.random() * 20 + 1) * box,
    y : Math.floor(Math.random() * 16 + 3) * box
}


// Räknar hur många äpplen man har ätit
let score = 0;



//För att kunna kontrollera hur "snake" kommer att röra sig
let d;
document.addEventListener("keydown", direction);



// Här ritas allt i canvas

function draw(){
    
        let x, y; 
        for (var row = 0; row < 600/30; row++) { 
  
            for (var col = 0; col < 600/30; col++) { 

                x = row * 30; 
                y = col * 30; 
                ctx.fillStyle = "#000";
                ctx.fillRect(0, 0, 600, 90);
                if ((row % 2 == 0) == (col % 2 == 0)) {
                    ctx.fillStyle = "#1cd037";
                } else {
                    ctx.fillStyle = "#387441";                    

                }
                ctx.fillRect(x, y, 30, 30); 
            } 
        } 
    
    
        for( let i = 0; i < snake.length; i++) { // För att rita alla "celler"
            if(i == 0) {
               ctx.drawImage(snakeImg, snake[i].x, snake[i].y);
               } else {
                   ctx.drawImage(snakeTailImg, snake[i].x, snake[i].y);
               }
               
        }
          
        
    
    
    ctx.drawImage(aplleImg, apple.x, apple.y);
    
    // Allra första koordianten till första cellen/"huvudet"
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;
    
    // Var ?
    if( d == "LEFT") {
         snakeX -= box;
         snakeImg.src = "img/snakeLeft.png";
    }
    if( d == "UP") {
         snakeY -= box;
        snakeImg.src = "img/snakeUp.png";
    }
    if( d == "RIGHT") {
        snakeX += box;
        snakeImg.src = "img/snakeRight.png";
    }
    if( d == "DOWN") {
        snakeY += box;
        snakeImg.src = "img/snakeDown.png";
    }
    // När "snake" äter äpplet
    if(snakeX == apple.x && snakeY == apple.y){
        score++;
        eat.play();
        apple = {
            x : Math.floor(Math.random()*17+1) * box,
            y : Math.floor(Math.random()*15+3) * box
        }
        
        
    }else{
    
        snake.pop();
    }
    
    // Nytt "huvud"
    
    let newHead = {
        x : snakeX,
        y : snakeY
    }
    
    
    // Game Over
    
    if(snakeX < 0 || snakeX > 19 * box || snakeY < 3 * box || snakeY > 19 * box || collision(newHead, snake)){
        clearInterval(game);
        dead.play();
        localStorage.setItem("score", score);
        setTimeout(function() {location.href="slut.html";}, 600);
        
    }
    
    snake.unshift(newHead);
    
    ctx.fillStyle = "white";
    ctx.font = "45px Changa one";
    ctx.fillText(score, 2 * box, 1.6 * box);
    ctx.drawImage(aplleImg, 0.8 * box, 0.5 * box);
    
    ctx.font = "50px Changa one";
    ctx.fillText("Snake", 8 * box, 2 * box);
    
    ctx.font = "15px Changa one";
    ctx.fillText("Made by: Mohamad Shafeah", 14 * box, 2.8 * box);
}




// Beroende på knappen rör "snake" sig i olika håll
function direction (event) {
    let key = event.keyCode;
    if( key == 37 || key == 65 && d != "RIGHT"){   // Vänster och "A"
        left.play();
        d = "LEFT";
    }else if(key == 38 || key == 87 && d != "DOWN"){  // Uppe och "W"
        d = "UP";
        up.play();
    }else if(key == 39 || key == 68 && d != "LEFT"){  // Höger och "D"
        d = "RIGHT";
        right.play();
    }else if(key == 40 || key == 83 && d != "UP"){  //Nere och "S"
        d = "DOWN";
        down.play();
    }
}



// Kollar ifall det blir en kollision
function collision (head, array) {
    for(let i = 0; i < array.length; i++){
        if(head.x == array[i].x && head.y == array[i].y) {   // Ifall det blir så måste huvudet vara på samma koordinater som "cellen"    
            return true;
        }
    }
    return false;
}



// Anropa funktionen draw every 100 ms

let game = setInterval(draw, 100);
    </script>


</html>

Michael Hobbs · Answer 1 · 01 мая 2020

Две проблемы, которые я обнаружил:

В «направлении функции» вы логическое логическое c не правильно. У вас есть key == 37 || key == 65 && d != "RIGHT" например. Это говорит о том, что если ключ равен 37 или ключ равен 65 и d не прав, тогда сделайте X. Например, это должно быть (key == 37 || key == 65) && d != "RIGHT". Это сделает ключ X или Key Y и проверьте, не d ли какое-либо значение.
Я предполагаю, что также может быть проблема с областью действия d. Без доступа к ресурсам, чтобы сделать этот код работоспособным, трудно сказать. Однако у вас должен быть какой-то объект для управления вашей переменной. Например, const world = {}, затем добавьте к нему d, например, world.d = 'SomeValue'. Это решит проблему с областью действия, которая, как я полагаю, происходит в setInterval(draw, 100)
Я также действительно изменил бы имя вашей потери html на что-то еще в setTimeout(function() {location.href="slut.html";}, 600) Perhapse lose.html

<!DOCTYPE html>
<html>
    <head>
        <title>Snake Game</title>
        <style>
            html {
                background-color: #beb5b5;
            }
            canvas{
                display: block;
                margin: 0 auto;
                margin-top: 10%;
            }
        </style>
    </head>

        <canvas id="snake" width="600" height="600"></canvas>
          
           <script>
const world = {}
const cvs = document.getElementById("snake");
const ctx = cvs.getContext("2d");


// Varje ruta i bilden är 32 px
const box = 30;


// Bilderna
const aplleImg = new Image();
aplleImg.src = "img/apple.png";
        
const snakeImg = new Image();
snakeImg.src = "img/snakeFront.png";
        
const snakeTailImg = new Image();
snakeTailImg.src = "img/snakeTailImg.png";


// Låtarna
let dead = new Audio();
let eat = new Audio();
let up = new Audio();
let right = new Audio();
let left = new Audio();
let down = new Audio();

dead.src = "audio/dead.mp3";
eat.src = "audio/eat.mp3";
up.src = "audio/up.mp3";
right.src = "audio/right.mp3";
left.src = "audio/left.mp3";
down.src = "audio/down.mp3";



// Deklarera snake som en array
let snake = [];

snake[0] = {    // Bestämmer "huvudets" koordinater
    x : 9 * box,
    y : 10 * box
};



// Deklarera apple som ett objekt
let apple = {
    x : Math.floor(Math.random() * 20 + 1) * box,
    y : Math.floor(Math.random() * 16 + 3) * box
}


// Räknar hur många äpplen man har ätit
let score = 0;



//För att kunna kontrollera hur "snake" kommer att röra sig
world.d = null;
document.addEventListener("keydown", direction);



// Här ritas allt i canvas

function draw(){
    
        let x, y; 
        for (var row = 0; row < 600/30; row++) { 
  
            for (var col = 0; col < 600/30; col++) { 

                x = row * 30; 
                y = col * 30; 
                ctx.fillStyle = "#000";
                ctx.fillRect(0, 0, 600, 90);
                if ((row % 2 == 0) == (col % 2 == 0)) {
                    ctx.fillStyle = "#1cd037";
                } else {
                    ctx.fillStyle = "#387441";                    

                }
                ctx.fillRect(x, y, 30, 30); 
            } 
        } 
    
    
        for( let i = 0; i < snake.length; i++) { // För att rita alla "celler"
            if(i == 0) {
               ctx.drawImage(snakeImg, snake[i].x, snake[i].y);
               } else {
                   ctx.drawImage(snakeTailImg, snake[i].x, snake[i].y);
               }
               
        }
          
        
    
    
    ctx.drawImage(aplleImg, apple.x, apple.y);
    
    // Allra första koordianten till första cellen/"huvudet"
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;
    
    // Var ?
    if( world.d == "LEFT") {
         snakeX -= box;
         console.log('snakeImg.src = "img/snakeLeft.png";')
         snakeImg.src = "img/snakeLeft.png";
    }
    if( world.d == "UP") {
         snakeY -= box;
		console.log('snakeImg.src = "img/snakeUp.png";')
        snakeImg.src = "img/snakeUp.png";
		
    }
    if( world.d == "RIGHT") {
        snakeX += box;
		console.log('snakeImg.src = "img/snakeRight.png";')
        snakeImg.src = "img/snakeRight.png";
    }
    if( world.d == "DOWN") {
        snakeY += box;
		console.log('snakeImg.src = "img/snakeDown.png";')
        snakeImg.src = "img/snakeDown.png";
    }
    // När "snake" äter äpplet
    if(snakeX == apple.x && snakeY == apple.y){
        score++;
        eat.play();
        apple = {
            x : Math.floor(Math.random()*17+1) * box,
            y : Math.floor(Math.random()*15+3) * box
        }
        
        
    }else{
    
        snake.pop();
    }
    
    // Nytt "huvud"
    
    let newHead = {
        x : snakeX,
        y : snakeY
    }
    
    
    // Game Over
    
    if(snakeX < 0 || snakeX > 19 * box || snakeY < 3 * box || snakeY > 19 * box || collision(newHead, snake)){
        clearInterval(game);
        dead.play();
        localStorage.setItem("score", score);
        setTimeout(function() {location.href="slut.html";}, 600);
        
    }
    
    snake.unshift(newHead);
    
    ctx.fillStyle = "white";
    ctx.font = "45px Changa one";
    ctx.fillText(score, 2 * box, 1.6 * box);
    ctx.drawImage(aplleImg, 0.8 * box, 0.5 * box);
    
    ctx.font = "50px Changa one";
    ctx.fillText("Snake", 8 * box, 2 * box);
    
    ctx.font = "15px Changa one";
    ctx.fillText("Made by: Mohamad Shafeah", 14 * box, 2.8 * box);
}




// Beroende på knappen rör "snake" sig i olika håll
function direction (event) {
    let key = event.keyCode;
    if( (key == 37 || key == 65) && world.d != "RIGHT"){   // Vänster och "A"
        left.play();
        world.d = "LEFT";
    }else if( (key == 38 || key == 87) && world.d != "DOWN"){  // Uppe och "W"
        world.d = "UP";
        up.play();
    }else if( (key == 39 || key == 68) && world.d != "LEFT"){  // Höger och "D"
        world.d = "RIGHT";
        right.play();
    }else if( (key == 40 || key == 83) && world.d != "UP"){  //Nere och "S"
        world.d = "DOWN";
        down.play();
    }
}



// Kollar ifall det blir en kollision
function collision (head, array) {
    for(let i = 0; i < array.length; i++){
        if(head.x == array[i].x && head.y == array[i].y) {   // Ifall det blir så måste huvudet vara på samma koordinater som "cellen"    
            return true;
        }
    }
    return false;
}



// Anropa funktionen draw every 100 ms

let game = setInterval(draw, 100);
    </script>


</html>

Проверьте, перемещается ли «клетка» «змеи» вверх / вниз или влево / вправо, чтобы я мог поставить правильный значок?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Проверьте, перемещается ли «клетка» «змеи» вверх / вниз или влево / вправо, чтобы я мог поставить правильный значок?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов