You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/6-space-game/2-drawing-to-canvas/solution/app.js

34 lines
958 B

function loadTexture(path) {
return new Promise((resolve) => {
const img = new Image();
img.src = path;
img.onload = () => {
resolve(img);
}
})
}
function createEnemies(ctx, canvas, enemyImg) {
const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;
for (let x = START_X; x < STOP_X; x += 98) {
for (let y = 0; y < 50 * 5; y += 50) {
ctx.drawImage(enemyImg, x, y);
}
}
}
window.onload = async() => {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
const heroImg = await loadTexture('assets/player.png')
const enemyImg = await loadTexture('assets/enemyShip.png')
ctx.fillStyle = 'black';
ctx.fillRect(0,0, canvas.width, canvas.height);
ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height /4));
createEnemies(ctx, canvas, enemyImg);
};