Make image appear stay a while and then disappear - JS

Asked

Viewed 526 times

1

I’m playing a game of snake (Snake) and I need to make an image appear on the canvas every 3 seconds, but it needs to last 4 seconds before it disappears. I’m trying to use the setInterval() but the picture is blinking endlessly, I believe there is a conflict with the ctx.clearRect(0,0, cvs.width,cvs.height) who is in the function Draw() but I couldn’t think of anything to fix it.

var cvs = document.getElementById("jogo");
var ctx = cvs.getContext("2d");

var score = 1;
var interval = 3000;
var beat = 2000;
var ticks = 0;
var timer;

var snakeX;
var snakeY;

var box = 20;
var snake = [];

document.getElementById("score").innerHTML = "Score: 0";

snake[0] = {

x: 10*box,
y: 10*box

};

var food = {

x: Math.floor(Math.random()*29+1)*box,
y: Math.floor(Math.random()*29+1)*box,


};

var m = {

x: Math.floor(Math.random()*29+1)*box,
y: Math.floor(Math.random()*29+1)*box,

};

var d;
document.addEventListener("keydown",direcao);
window.addEventListener("load",spawn);

function direcao(){

var key = event.keyCode;
if(key == 37 && d != "RIGHT"){
    d = "LEFT";
}
else if(key == 38 && d != "DOWN"){
    d = "UP";
}
else if(key == 39 && d != "LEFT"){
    d = "RIGHT";
}
else if(key == 40 && d != "UP"){
    d = "DOWN";
}

}

function draw(){    

ctx.clearRect(0,0, cvs.width,cvs.height);

//var img = new Image();
//img.src = "imgs/apple.png";
//ctx.drawImage(img,food.x,food.y,20,20);

ctx.fillRect(food.x,food.y,20,20);
ctx.fillStyle = "red";

for(var i=0; i < snake.length; i++){
    
    //var img2 = new Image();
    //img2.src = "imgs/snake_head.png";
    //ctx.drawImage(img2,snake[i].x,snake[i].y,20,20);

    ctx.fillRect(snake[i].x,snake[i].y,20,20);
    ctx.fillStyle = "green";

}

snakeX = snake[0].x;
snakeY = snake[0].y;

if(d == "LEFT"){
    snakeX -= box;
}else
if(d == "UP"){
    snakeY -= box;
}else
if(d == "RIGHT"){
    snakeX += box;
}else
if(d == "DOWN"){
    snakeY += box;
}

if(snakeX == food.x && snakeY == food.y){

    document.getElementById("score").innerHTML = "Score: " + score++;

    food = {

        x: Math.floor(Math.random()*29+1)*box,
        y: Math.floor(Math.random()*29+1)*box,
    
    
    }

}
else if(snakeX === m.x && snakeY === m.y ){
    
    clearInterval(timer);
    spawn();
    ctx.clearRect(m.x,m.y,20,20);
    console.log("pego");
    
        m = {

            x: Math.floor(Math.random()*29+1)*box,
            y: Math.floor(Math.random()*29+1)*box,

        }
    
}else {

    snake.pop();

}

var newHead = {

    x: snakeX,
    y: snakeY

}

if(snakeX < 0 || snakeX > cvs.width-box   || 
   snakeY < 0 || snakeY > cvs.height-box  ||
   collision(newHead, snake)){

        clearInterval(game);

   }

snake.unshift(newHead);

}

function spawn(){

timer = setInterval(function(){

    //var img3 = new Image();
    //img3.src = "imgs/mouse.png";
    //ctx.drawImage(img3,m.x,m.y,20,20);

    ctx.fillRect(m.x,m.y,20,20);
    ctx.fillStyle = "gray";

    console.log("spawn");
    
if (ticks > 0 && ticks % beat === 0) {
    
    console.log("despawn");
    ctx.clearRect(m.x,m.y,20,20);
    ticks = 0;
    
    m = {

            x: Math.floor(Math.random()*29+1)*box,
            y: Math.floor(Math.random()*29+1)*box,

        }
    
}
ticks += interval;
}, interval);
        
}



function collision(head, array){

for(i = 0; i < array.length; i++){

    if(head.x == array[i].x && head.y == array[i].y){
        return true;
    }

}

}  

var game = setInterval(draw,100);
#jogo{
  border: 1px solid #000;
  margin: auto;
  display: block;
}

#score{
  margin: auto;
  margin-bottom: 5px;
  width: 600px;
  height: 100px;
  border: 2px solid #000;
  text-align: center;
  font-family: verdana;
  font-size: 60pt;
}
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>1</title>
  </head>
  <body>
    <div id="score"></div>
    <canvas id="jogo" width="600px" height="600ox"></canvas>
  </body>
</html>

1 answer

0

The drawImage() method must be inside the draw() function and just set a flag for the image to be visible.

function draw() {
    // ...

    if (mouseVisible == true) {
        var img3 = new Image();
        img3.src = "mouse.png";
        ctx.drawImage(img3,m.x,m.y,20,20);
    }
}

function spawn(){

    timer = setInterval(function() {

        mouseVisible = true;
        console.log("spawn");

        if (ticks > 0 && ticks % beat === 0) {

            console.log("despawn");
            mouseVisible = false;
            ticks = 0;

            m = {
                    x: Math.floor(Math.random()*29+1)*box,
                    y: Math.floor(Math.random()*29+1)*box,
                }
        }
        ticks += interval;
    }, interval);

}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.