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.
39 lines
982 B
39 lines
982 B
4 years ago
|
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);
|
||
|
|
};
|