Opaa! Muito obrigado! Então, eu quis usar objeto e desestruturação para treinar, consegui fazer funcionar olhando seu código e vendo oq eu devia ter errado, da uma olhada:
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
var x = canvas.width/2 //começa no meio do x (player)
var y = canvas.height/2 //começa no meio do y (player)
var vel = 10
//objeto player com propriedades do quadrado
var player = {
color: 'black',
altura: '10',
largura: '10',
position: {
coordx: x,
coordy: y
},
mover: {
cima: () => this.position.coordy = this.position.coordy + vel,
baixo: () => this.position.coordy = this.position.coordy - vel,
direita: () => this.position.coordx = this.position.coordx + vel,
esquerda: () => this.position.coordx = this.position.coordx - vel
},
}
//desestruturação do objeto player
var {color, altura, largura, position, mover} = player
//le a tecla digitada
document.addEventListener('keydown', event => {
switch(event.keyCode){
case 37: //esquerda
mover.esquerda()
break;
case 39: //direita
mover.direita()
break;
case 38: //cima
mover.baixo()
break;
case 40: //baixo
mover.cima()
break;
}
})
//desenha o player na tela
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillRect(position.coordx, position.coordy, largura, altura)
ctx.fillStyle = color
requestAnimationFrame(draw) //looping do programa
}
draw() //inicio do programa
Eu não sei pq, mas quando uso o clearRect()
no fim da função antes de chamar o requestAnimationFrame()
, o player nao aparece na tela, deveria aparecer...
quando uso o clearRect() no fim da função antes de chamar o requestAnimationFrame(), o player nao aparece na tela,
Mas é claro. O clearRect
está limpando o canvas. Veja na documentação que ele "zera" toda a área indicada. E como estamos usando 0, 0, canvas.width, canvas.height
, então ele limpa toda a área do canvas.
Se vc chamar clearRect
no final, ele vai limpar qualquer coisa que vc tiver desenhado antes. Por isso movi ele para o começo (primeiro limpa, depois desenha o que precisa).
Outra coisa, no meu código eu usei ponto-e-vírgula no final das linhas. Pode parecer "frescura", e sei que o JavaScript "aceita" o código sem ponto e vírgula e "funciona" (e tem até "cursinhos famosos" que dizem que não precisa usar), mas eu prefiro colocar, pois isso evita algumas situações bizarras que podem ocorrer se você não usá-los, como essa e essa (veja mais sobre isso aqui).
Quanto à desestruturação, sugiro treinar em um caso no qual faça sentido. Neste caso, da forma como foi feito, eu acho que não faz.