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.
34 lines
958 B
34 lines
958 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);
|
||
|
|
};
|