mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-24 15:23:02 +02:00
folder names
This commit is contained in:
34
6-space-game/2-drawing-to-canvas/solution/app.js
Normal file
34
6-space-game/2-drawing-to-canvas/solution/app.js
Normal file
@@ -0,0 +1,34 @@
|
||||
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);
|
||||
};
|
Reference in New Issue
Block a user