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.
48 lines
1.9 KiB
48 lines
1.9 KiB
async function loadTexture(path) {
|
|
return new Promise(resolve => {
|
|
const img = new Image();
|
|
img.src = path;
|
|
img.onload = () => resolve(img);
|
|
});
|
|
}
|
|
function drawText(ctx, text, x, y, fontSize = 40, color = "#ff007f", align = "center") {
|
|
ctx.save();
|
|
ctx.font = `${fontSize}px Orbitron, monospace`;
|
|
ctx.fillStyle = color;
|
|
ctx.textAlign = align;
|
|
ctx.shadowColor = "#181733";
|
|
ctx.shadowBlur = 12;
|
|
ctx.fillText(text, x, y);
|
|
ctx.restore();
|
|
}
|
|
function createEnemies(ctx, canvas, enemyImg) {
|
|
const MONSTER_TOTAL = 7;
|
|
const MONSTER_ROWS = 5;
|
|
const ENEMY_SIZE = 65;
|
|
const START_X = (canvas.width - (MONSTER_TOTAL * ENEMY_SIZE)) / 2;
|
|
for (let row = 0; row < MONSTER_ROWS; row++) {
|
|
for (let col = 0; col < MONSTER_TOTAL; col++) {
|
|
const x = START_X + col * ENEMY_SIZE;
|
|
const y = 60 + row * ENEMY_SIZE;
|
|
ctx.drawImage(enemyImg, x, y, ENEMY_SIZE, ENEMY_SIZE);
|
|
}
|
|
}
|
|
}
|
|
window.onload = async () => {
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
// Use emoji icons as game characters if images aren't available
|
|
const heroImg = await loadTexture('assets/player.png');
|
|
const enemyImg = await loadTexture('assets/enemyShip.png');
|
|
ctx.fillStyle = '#181733';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
drawText(ctx, "Prepare for Battle!", canvas.width/2, 70, 48, "#fff");
|
|
// Draw hero
|
|
ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height / 4), 90, 90);
|
|
createEnemies(ctx, canvas, enemyImg);
|
|
// Example: Draw power up icon beside hero
|
|
ctx.font = "38px FontAwesome";
|
|
ctx.fillStyle = "#ffd700";
|
|
ctx.fillText("\uf059", canvas.width/2 + 60, canvas.height - (canvas.height / 4) + 42); // Star icon
|
|
};
|