🎮 HTML GAME CODING HUB 💻🔥
5 subscribers
15 photos
5 files
19 links
🎮 HTML GAME CODING HUB 💻🔥

Welcome to the ultimate place for HTML, CSS & JavaScript Game Development! 🚀
Download Telegram
enemies.push({
x: Math.random() * (canvas.width - size),
y: -size,
width: size,
height: size,
speed: 1.5 + Math.random() * 1.5
});
}

function collision(a, b) {
return (
a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y
);
}

function update() {

// Stars
stars.forEach(star => {
star.y += star.speed;

if (star.y > canvas.height) {
star.y = 0;
star.x = Math.random() * canvas.width;
}
});

// Cooldown
if (shootCooldown > 0) {
shootCooldown--;
}

// Bullets
bullets.forEach(bullet => {
bullet.y -= bullet.speed;
});

bullets = bullets.filter(
bullet => bullet.y + bullet.height > 0
);

// Enemies
enemyTimer++;

if (enemyTimer > 45) {
createEnemy();
enemyTimer = 0;
}

enemies.forEach(enemy => {
enemy.y += enemy.speed;
});

// Bullet vs enemy
for (let i = enemies.length - 1; i >= 0; i--) {

let destroyed = false;

for (let j = bullets.length - 1; j >= 0; j--) {

if (collision(enemies[i], bullets[j])) {

enemies.splice(i, 1);
bullets.splice(j, 1);

score += 10;

scoreEl.textContent = score;

if (score > best) {
best = score;
bestEl.textContent = best;
localStorage.setItem(
"spaceBest",
best
);
}

destroyed = true;
break;
}
}

if (destroyed) continue;
}

// Enemy reaches bottom
for (let i = enemies.length - 1; i >= 0; i--) {

if (enemies[i].y > canvas.height) {

enemies.splice(i, 1);

lives--;

livesEl.textContent = lives;

if (lives <= 0) {
gameOver();
return;
}
}
}

// Enemy hits player
for (let i = enemies.length - 1; i >= 0; i--) {

if (collision(enemies[i], player)) {

enemies.splice(i, 1);

lives--;

livesEl.textContent = lives;

if (lives <= 0) {
gameOver();
return;
}
}
}
}

function draw() {

ctx.fillStyle = "#02050d";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Stars
stars.forEach(star => {
ctx.fillStyle = "white";
ctx.fillRect(
star.x,
star.y,
star.size,
star.size
);
});

// Player
ctx.fillStyle = "#00eaff";

ctx.beginPath();
ctx.moveTo(
player.x + player.width / 2,
player.y
);
ctx.lineTo(
player.x,
player.y + player.height
);
ctx.lineTo(
player.x + player.width,
player.y + player.height
);
ctx.closePath();
ctx.fill();

// Bullets
bullets.forEach(bullet => {

ctx.fillStyle = "#ffe600";

ctx.fillRect(
bullet.x,
bullet.y,
bullet.width,
bullet.height
);
});

// Enemies
enemies.forEach(enemy => {

ctx.fillStyle = "#ff315c";

ctx.beginPath();
ctx.moveTo(
enemy.x + enemy.width / 2,
enemy.y + enemy.height
);
ctx.lineTo(
enemy.x,
enemy.y
);
ctx.lineTo(
enemy.x + enemy.width,
enemy.y
);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.fillRect(
enemy.x + 8,
enemy.y + 9,
5,
5
);

ctx.fillRect(
enemy.x + 17,
enemy.y + 9,
5,
5
);
});
}

function gameLoop() {

if (!running) return;

update();
draw();

animationId =
requestAnimationFrame(gameLoop);
}

function gameOver() {

running = false;

cancelAnimationFrame(animationId);

messageEl.textContent =
"💥 GAME OVER! Final Score: " + score;

startBtn.textContent = "🚀 Play Again";

draw();
}

startBtn.addEventListener(
"click",
startGame
);

// Keyboard controls
document.addEventListener(
"keydown",
event => {

if (event.key === "ArrowLeft") {
moveLeft();
}

if (event.key === "ArrowRight") {
moveRight();
}

if (event.code === "Space") {
event.preventDefault();
shoot();
}
}
);