Necesito establecer un borde en background.png para que player.png no pueda pasarlo o salir de él. Usé JS y HTML. Todo lo demás funciona bien, por favor responda lo antes posible. :)
Aquí está mi código:
JavaScript:
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var background = new Image(); background.src = "images/background.png"; background.onload = function() { ctx.drawImage(background, 0, 0, canvas.width, canvas.height); start(); } var image = new Image(); var imageX = 0; var imageY = 0; function start(){ image.src = "images/player.png"; image.onload = function(){ imageX = 35; imageY = 35; ctx.drawImage(image, imageX, imageY); }; } document.addEventListener("keydown", keyDownHandler); function keyDownHandler(event){ event.preventDefault(); event.stopPropagation(); if (event.keyCode == 65) { imageX -= 13; } else if (event.keyCode == 87) { imageY -= 13; } else if (event.keyCode == 68) { imageX += 13; } else if (event.keyCode == 83) { imageY += 13; } redraw(); } function redraw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(background, 0, 0, canvas.width, canvas.height); ctx.drawImage(image, imageX, imageY); }HTML:
<!DOCTYPE html> <html> <head> <title>blow shoot</title> </head> <body> <canvas id= "myCanvas" width= "500" height= "250"> <script src="main.js"></script> </canvas> </body> </html>Imágenes:
Puede agregar una función strokeRect :
ctx.strokeRect(x,y,w,h) donde x,y es la coordenada de la esquina superior izquierda de la imagen y w,h es la dimensión de la imagen. Si desea que permanezca fuera, -1 on x,y +2 on w,h para tener un desplazamiento de 1px en cada lado.