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...