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>