🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
@HTMLGameCoding
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
About
Blog
Apps
Platform
Join
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
5 subscribers
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
🚀 CODE2GAME HTML RUNNER IS LIVE! 🎮

đŸ’ģ Apna HTML/CSS/JS code paste karo

â–ļī¸ RUN CODE dabao

🕹ī¸ Aur apna game instantly test karo!
đŸ”Ĩ Try it now:

👇
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

CODE â€ĸ RUN â€ĸ PLAY â€ĸ CREATE ⚡
đŸ”Ĩ1
7 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
đŸĒ¨đŸ“„✂ī¸ DAY 2 — ROCK PAPER SCISSORS! đŸ”Ĩ
Ready for today's challenge? 🎮
🤖 Computer ke against khelo!
🏆 Dekho kaun zyada rounds jeetta hai!
đŸ’ģ HTML + CSS + JavaScript
📱 Mobile Friendly
⚡ Easy to Run
👇 FULL SOURCE CODE NEXT POST MEIN
đŸ”Ĩ Try it â€ĸ Play it â€ĸ Share it
CodeForge Gaming Community 🚀
#Day2 #RockPaperScissors #HTML #JavaScript #GameCoding
👍1đŸ”Ĩ1
6 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>

<style>
body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#090909;
color:white;
font-family:Arial;
}

.game{
text-align:center;
padding:30px;
width:350px;
border-radius:25px;
background:#151515;
box-shadow:0 0 30px #ff007755;
}

h1{
color:#ff2d8d;
}

button{
font-size:35px;
margin:8px;
padding:15px;
border:0;
border-radius:15px;
cursor:pointer;
background:#222;
}

button:hover{
transform:scale(1.1);
}

#result{
margin-top:25px;
font-size:20px;
}

.score{
font-size:18px;
}
</style>
</head>

<body>

<div class="game">

<h1>đŸĒ¨ Rock Paper Scissors</h1>

<p>Choose your move</p>

<button onclick="play('Rock')">đŸĒ¨</button>
<button onclick="play('Paper')">📄</button>
<button onclick="play('Scissors')">✂ī¸</button>

<div id="result"></div>

<p class="score">
You: <span id="you">0</span>
  
AI: <span id="ai">0</span>
</p>

</div>

<script>

let you=0;
let ai=0;

function play(player){

const choices=["Rock","Paper","Scissors"];

const computer=
choices[Math.floor(Math.random()*3)];

let result="";

if(player===computer){

result="🤝 Draw!";

}else if(
(player==="Rock" && computer==="Scissors") ||
(player==="Paper" && computer==="Rock") ||
(player==="Scissors" && computer==="Paper")
){

you++;
result="🎉 You Win!";

}else{

ai++;
result="🤖 AI Wins!";

}

document.getElementById("result").innerHTML=
result+"<br>You: "+player+
"<br>AI: "+computer;

document.getElementById("you").textContent=you;
document.getElementById("ai").textContent=ai;
}

</script>

</body>
</html>
đŸ”Ĩ1đŸĨ°1
7 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
🎮đŸ”Ĩ DAY 2 — ROCK PAPER SCISSORS đŸĒ¨đŸ“„✂ī¸
Code paste kar diya? Ab game ko LIVE PLAY karo! 🚀
🤖 Computer ko challenge karo
🏆 Apna score dekho
đŸ”Ĩ Try to beat the computer!

đŸ’ģ PLAY / RUN THE GAME:
https://anadverma956989936-lab.github.io/Code2Game-Runner/

📱 How to run:
1ī¸âƒŖ HTML → HTML code
2ī¸âƒŖ CSS → CSS code
3ī¸âƒŖ JS → JavaScript code
4ī¸âƒŖ Preview mein game play karo 🎮
❤ī¸ Like | 🔄 Share | đŸ“ĸ Forward
CodeForge Gaming Community ⚡
#Day2 #RockPaperScissors #HTML #CSS #JavaScript #GameCoding
đŸĨ°1👏1đŸ’¯1
7 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
đŸ”Ĩ2❤1
7 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
⚡đŸ”Ĩ DAY 3 — SPEED CLICK CHALLENGE! đŸ”Ĩ⚡

You have only ⏱ī¸ 10 SECONDS!

🖱ī¸ Click as fast as you can
🏆 Beat your HIGH SCORE
📱 Mobile Friendly
đŸ’ģ HTML + CSS + JavaScript

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

🏆 CHALLENGE:
Can you beat 50 clicks? 😈

đŸ’Ŧ Apna score batao!

❤ī¸ Like | 🔄 Share | đŸ“ĸ Forward

⚡ CodeForge Gaming Community

#Day3 #SpeedClick #HTML #CSS #JavaScript #GameCoding
❤1đŸ”Ĩ1
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
❤1đŸĨ°1
4 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Speed Click Challenge</title>

<style>

*{
box-sizing:border-box;
}

body{
margin:0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial,sans-serif;
background:#070b18;
color:white;
}

.game{
width:92%;
max-width:450px;
padding:30px 20px;
text-align:center;
border-radius:25px;
background:#111a30;
box-shadow:0 0 35px #00eaff55;
}

h1{
color:#00eaff;
margin-bottom:5px;
}

.subtitle{
color:#aaa;
margin-bottom:25px;
}

.stats{
display:flex;
justify-content:space-around;
margin-bottom:25px;
}

.stat{
padding:12px 18px;
border-radius:12px;
background:#192541;
}

.stat span{
display:block;
margin-top:5px;
color:#00eaff;
font-size:24px;
font-weight:bold;
}

#clickButton{
width:220px;
height:220px;
border:none;
border-radius:50%;
background:#00eaff;
color:#061018;
font-size:24px;
font-weight:bold;
cursor:pointer;
box-shadow:0 0 40px #00eaff66;
transition:0.1s;
}

#clickButton:active{
transform:scale(0.92);
}

#clickButton:disabled{
opacity:0.5;
cursor:not-allowed;
}

#startButton{
margin-top:25px;
padding:13px 28px;
border:none;
border-radius:25px;
background:#ff2d75;
color:white;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

.message{
margin-top:20px;
min-height:24px;
color:#ddd;
}

</style>
</head>

<body>

<div class="game">

<h1>⚡ SPEED CLICK</h1>

<p class="subtitle">
Click as fast as you can in 10 seconds!
</p>

<div class="stats">

<div class="stat">
CLICKS
<span id="score">0</span>
</div>

<div class="stat">
TIME
<span id="time">10</span>
</div>

<div class="stat">
BEST
<span id="best">0</span>
</div>

</div>

<button id="clickButton" disabled>
START FIRST
</button>

<br>

<button id="startButton">
🚀 START GAME
</button>

<div id="message" class="message">
Ready for the challenge?
</div>

</div>


<script>

const clickButton =
document.getElementById("clickButton");

const startButton =
document.getElementById("startButton");

const scoreDisplay =
document.getElementById("score");

const timeDisplay =
document.getElementById("time");

const bestDisplay =
document.getElementById("best");

const message =
document.getElementById("message");


let score = 0;
let time = 10;
let playing = false;
let timer = null;


let best =
Number(localStorage.getItem("speedBest")) || 0;

bestDisplay.textContent = best;


startButton.addEventListener("click", startGame);


clickButton.addEventListener("click", () => {

if(!playing) return;

score++;

scoreDisplay.textContent = score;

});


function startGame(){

clearInterval(timer);

score = 0;
time = 10;
playing = true;

scoreDisplay.textContent = score;
timeDisplay.textContent = time;

clickButton.disabled = false;
clickButton.textContent = "CLICK!";

startButton.disabled = true;

message.textContent =
"đŸ”Ĩ GO! Click as fast as possible!";


timer = setInterval(() => {

time--;

timeDisplay.textContent = time;


if(time <= 0){

endGame();

}

},1000);

}


function endGame(){

clearInterval(timer);

playing = false;

clickButton.disabled = true;

clickButton.textContent = "TIME UP!";

startButton.disabled = false;

if(score > best){

best = score;

localStorage.setItem(
"speedBest",
best
);

bestDisplay.textContent = best;

message.textContent =
"🏆 NEW HIGH SCORE! " + score + " CLICKS!";

}
else{
❤1đŸ”Ĩ1
9 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
message.textContent =
"🎮 Game Over! Your score: " +
score +
" clicks.";

}

}


</script>

</body>
</html>
👍1đŸ”Ĩ1
7 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
https://www.youtube.com/@pookiejanta_party-s4m

Follow my YouTube channel @pookiejanta_party👍❤ī¸

Like👍, Share 🔄 and Subscribe 😉
❤1đŸ”Ĩ1
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
🧠đŸ”Ĩ DAY 4 — MEMORY MATCH GAME! 🎮

Can you match all 8 pairs? 👀

🧠 Test Your Memory
🏆 Complete it in minimum moves
📱 Mobile Friendly
⚡ Fast & Fun

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

🏆 CHALLENGE:
Can you complete it in under 20 moves? 😈

đŸ’Ŧ ā¤…ā¤Ēā¤¨ā¤ž score ā¤Ŧā¤¤ā¤žā¤“!

❤ī¸ Like | 🔄 Share | đŸ“ĸ Forward

⚡ CodeForge Gaming Community

#Day4 #MemoryGame #HTML #CSS #JavaScript #GameCoding
👍1
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Match Game</title>

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: #070b18;
color: white;
}

.game {
width: 94%;
max-width: 430px;
padding: 25px;
text-align: center;
border-radius: 25px;
background: #111a30;
box-shadow: 0 0 35px #00eaff55;
}

h1 {
color: #00eaff;
margin-bottom: 5px;
}

.subtitle {
color: #aaa;
}

.stats {
display: flex;
justify-content: space-around;
margin: 20px 0;
padding: 12px;
border-radius: 12px;
background: #192541;
}

.board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.card {
height: 75px;
border: none;
border-radius: 14px;
background: #263655;
color: transparent;
font-size: 30px;
cursor: pointer;
transition: 0.2s;
}

.card:hover {
transform: scale(1.05);
}

.card.flipped,
.card.matched {
background: #00a9c7;
color: white;
}

.card.matched {
background: #18b878;
}

.restart {
margin-top: 20px;
padding: 12px 25px;
border: none;
border-radius: 25px;
background: #00eaff;
color: #061018;
font-weight: bold;
font-size: 16px;
cursor: pointer;
}

@media (max-width: 360px) {
.card {
height: 65px;
}
}
</style>
</head>

<body>

<div class="game">

<h1>🧠 MEMORY MATCH</h1>

<p class="subtitle">
Match all 8 pairs!
</p>

<div class="stats">
<span>
Moves: <b id="moves">0</b>
</span>

<span>
Pairs: <b id="pairs">0</b>/8
</span>
</div>

<div id="board" class="board"></div>

<button class="restart" onclick="restartGame()">
🔄 Restart Game
</button>

</div>

<script>

const symbols = [
"🍎","🍎",
"🚀","🚀",
"🎮","🎮",
"⚡","⚡",
"đŸ”Ĩ","đŸ”Ĩ",
"💎","💎",
"🐱","🐱",
"👾","👾"
];

let firstCard = null;
let secondCard = null;
let lockBoard = false;
let moves = 0;
let pairs = 0;

function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}

function createBoard() {

const board = document.getElementById("board");

board.innerHTML = "";

shuffle([...symbols]).forEach(symbol => {

const card = document.createElement("button");

card.className = "card";
card.dataset.symbol = symbol;
card.textContent = "?";

card.onclick = () => flipCard(card);

board.appendChild(card);
});
}

function flipCard(card) {

if (
lockBoard ||
card === firstCard ||
card.classList.contains("matched")
) {
return;
}

card.classList.add("flipped");
card.textContent = card.dataset.symbol;

if (!firstCard) {
firstCard = card;
return;
}

secondCard = card;

moves++;
document.getElementById("moves").textContent = moves;

checkMatch();
}

function checkMatch() {

const match =
firstCard.dataset.symbol ===
secondCard.dataset.symbol;

if (match) {

firstCard.classList.add("matched");
secondCard.classList.add("matched");

pairs++;

document.getElementById("pairs").textContent = pairs;

resetTurn();

if (pairs === 8) {

setTimeout(() => {
alert(
"🏆 YOU WON!\n\n" +
"Total Moves: " + moves
);
}, 300);
}

} else {

lockBoard = true;

setTimeout(() => {

firstCard.classList.remove("flipped");
secondCard.classList.remove("flipped");

firstCard.textContent = "?";
secondCard.textContent = "?";

resetTurn();

}, 800);
}
}

function resetTurn() {
❤1👍1
6 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
firstCard = null;
secondCard = null;
lockBoard = false;
}

function restartGame() {

moves = 0;
pairs = 0;

document.getElementById("moves").textContent = "0";
document.getElementById("pairs").textContent = "0";

resetTurn();
createBoard();
}

createBoard();

</script>

</body>
</html>
7 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
❤2
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
🐍đŸ”Ĩ DAY 5 — SNAKE GAME! 🎮

The classic game is back! 🚀

🐍 Eat the 🍎
🏆 Increase your score
đŸ’Ĩ Don't hit the wall or yourself!
📱 Mobile Controls Available
⌨ī¸ Keyboard Controls Available
đŸ’ģ HTML + CSS + JavaScript

🎮 PLAY THE GAME:
👇
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

🏆 CHALLENGE:
How high can you score? 😈

đŸ’Ŧ Apna highest score batao!

❤ī¸ Like | 🔄 Share | đŸ“ĸ Forward

⚡ CodeForge Gaming Community

#Day5 #SnakeGame #HTML #CSS #JavaScript #GameCoding
❤1
4 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: #070b18;
color: white;
}

.game {
width: 94%;
max-width: 430px;
padding: 22px;
text-align: center;
border-radius: 25px;
background: #111a30;
box-shadow: 0 0 35px #00eaff55;
}

h1 {
color: #00eaff;
margin: 0 0 15px;
}

.stats {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
padding: 12px;
border-radius: 12px;
background: #192541;
}

.stats b {
color: #00eaff;
}

canvas {
display: block;
width: 100%;
max-width: 360px;
height: auto;
margin: auto;
border-radius: 15px;
background: #050912;
border: 2px solid #00eaff;
touch-action: none;
}

.message {
min-height: 25px;
margin: 15px 0 8px;
color: #ddd;
}

button {
border: none;
border-radius: 20px;
padding: 11px 20px;
margin: 5px;
background: #00eaff;
color: #061018;
font-weight: bold;
cursor: pointer;
}

.controls {
display: grid;
grid-template-columns: repeat(3, 55px);
justify-content: center;
gap: 7px;
margin-top: 12px;
}

.controls button {
width: 55px;
height: 45px;
padding: 0;
font-size: 20px;
}

.empty {
visibility: hidden;
}
</style>
</head>

<body>

<div class="game">

<h1>🐍 SNAKE GAME</h1>

<div class="stats">
<span>Score: <b id="score">0</b></span>
<span>Best: <b id="best">0</b></span>
</div>

<canvas id="gameCanvas" width="360" height="360"></canvas>

<div id="message" class="message">
Press Start to play!
</div>

<button id="startBtn">🚀 Start Game</button>

<div class="controls">
<button class="empty">â€ĸ</button>
<button onclick="changeDirection('up')">âŦ†ī¸</button>
<button class="empty">â€ĸ</button>

<button onclick="changeDirection('left')">âŦ…ī¸</button>
<button onclick="changeDirection('down')">âŦ‡ī¸</button>
<button onclick="changeDirection('right')">➡ī¸</button>
</div>

</div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const scoreDisplay = document.getElementById("score");
const bestDisplay = document.getElementById("best");
const message = document.getElementById("message");
const startBtn = document.getElementById("startBtn");

const grid = 18;
const cell = canvas.width / grid;

let snake;
let food;
let direction;
let nextDirection;
let score = 0;
let gameRunning = false;
let gameTimer;

let best = Number(localStorage.getItem("snakeBest")) || 0;
bestDisplay.textContent = best;

function startGame() {

clearInterval(gameTimer);

snake = [
{ x: 9, y: 9 },
{ x: 8, y: 9 },
{ x: 7, y: 9 }
];

direction = "right";
nextDirection = "right";

score = 0;
scoreDisplay.textContent = score;

food = createFood();

gameRunning = true;

message.textContent = "đŸ”Ĩ Eat the food and grow!";
startBtn.textContent = "🔄 Restart";

draw();

gameTimer = setInterval(update, 120);
}

function createFood() {

let newFood;

do {
newFood = {
x: Math.floor(Math.random() * grid),
y: Math.floor(Math.random() * grid)
};
} while (
snake &&
snake.some(part =>
part.x === newFood.x &&
part.y === newFood.y
)
);

return newFood;
}

function update() {

if (!gameRunning) return;

direction = nextDirection;

const head = {
x: snake[0].x,
y: snake[0].y
};

if (direction === "up") head.y--;
if (direction === "down") head.y++;
if (direction === "left") head.x--;
if (direction === "right") head.x++;
❤1
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
// Wall collision
if (
head.x < 0 ||
head.x >= grid ||
head.y < 0 ||
head.y >= grid
) {
gameOver();
return;
}

// Self collision
if (
snake.some(part =>
part.x === head.x &&
part.y === head.y
)
) {
gameOver();
return;
}

snake.unshift(head);

// Food
if (
head.x === food.x &&
head.y === food.y
) {

score++;

scoreDisplay.textContent = score;

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

food = createFood();

} else {

snake.pop();

}

draw();
}

function draw() {

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

// Grid
ctx.strokeStyle = "#14213d";
ctx.lineWidth = 1;

for (let i = 0; i <= grid; i++) {

ctx.beginPath();
ctx.moveTo(i * cell, 0);
ctx.lineTo(i * cell, canvas.height);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(0, i * cell);
ctx.lineTo(canvas.width, i * cell);
ctx.stroke();
}

// Food
ctx.font = ${cell * 0.8}px Arial;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(
"🍎",
food.x * cell + cell / 2,
food.y * cell + cell / 2
);

// Snake
snake.forEach((part, index) => {

ctx.fillStyle =
index === 0 ? "#00eaff" : "#18b878";

ctx.beginPath();

ctx.roundRect(
part.x * cell + 2,
part.y * cell + 2,
cell - 4,
cell - 4,
5
);

ctx.fill();
});
}

function gameOver() {

clearInterval(gameTimer);

gameRunning = false;

message.textContent =
"đŸ’Ĩ Game Over! Score: " + score;

startBtn.textContent = "🚀 Play Again";

draw();
}

function changeDirection(newDirection) {

if (!gameRunning) return;

if (
newDirection === "up" &&
direction !== "down"
) {
nextDirection = "up";
}

if (
newDirection === "down" &&
direction !== "up"
) {
nextDirection = "down";
}

if (
newDirection === "left" &&
direction !== "right"
) {
nextDirection = "left";
}

if (
newDirection === "right" &&
direction !== "left"
) {
nextDirection = "right";
}
}

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

if (event.key === "ArrowUp")
changeDirection("up");

if (event.key === "ArrowDown")
changeDirection("down");

if (event.key === "ArrowLeft")
changeDirection("left");

if (event.key === "ArrowRight")
changeDirection("right");
});

startBtn.addEventListener("click", startGame);

// Initial screen
snake = [
{ x: 9, y: 9 },
{ x: 8, y: 9 },
{ x: 7, y: 9 }
];

food = createFood();

draw();
</script>

</body>
</html>
4 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Shooter</title>

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background: #030712;
color: white;
}

.game {
width: 94%;
max-width: 430px;
padding: 20px;
text-align: center;
border-radius: 25px;
background: #0b1224;
box-shadow: 0 0 35px #00eaff55;
}

h1 {
margin: 0 0 12px;
color: #00eaff;
}

.stats {
display: flex;
justify-content: space-around;
margin-bottom: 12px;
padding: 10px;
border-radius: 12px;
background: #151f38;
}

.stats b {
color: #00eaff;
}

canvas {
width: 100%;
max-width: 360px;
height: auto;
display: block;
margin: auto;
background: #02050d;
border: 2px solid #00eaff;
border-radius: 15px;
touch-action: none;
}

.message {
min-height: 24px;
margin: 12px 0;
color: #ddd;
}

button {
border: 0;
border-radius: 20px;
padding: 11px 20px;
margin: 4px;
background: #00eaff;
color: #061018;
font-weight: bold;
cursor: pointer;
}

.controls {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 8px;
}

.controls button {
width: 65px;
height: 45px;
padding: 0;
font-size: 20px;
}

.small {
font-size: 12px;
color: #888;
}
</style>
</head>

<body>

<div class="game">

<h1>🚀 SPACE SHOOTER</h1>

<div class="stats">
<span>Score: <b id="score">0</b></span>
<span>Lives: <b id="lives">3</b></span>
<span>Best: <b id="best">0</b></span>
</div>

<canvas id="gameCanvas" width="360" height="520"></canvas>

<div id="message" class="message">
Defeat the enemy ships!
</div>

<button id="startBtn">🚀 Start Game</button>

<div class="controls">
<button onclick="moveLeft()">âŦ…ī¸</button>
<button onclick="shoot()">đŸ”Ĩ</button>
<button onclick="moveRight()">➡ī¸</button>
</div>

<p class="small">
Keyboard: ← → to move â€ĸ SPACE to shoot
</p>

</div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const scoreEl = document.getElementById("score");
const livesEl = document.getElementById("lives");
const bestEl = document.getElementById("best");
const messageEl = document.getElementById("message");
const startBtn = document.getElementById("startBtn");

let player;
let bullets = [];
let enemies = [];
let stars = [];

let score = 0;
let lives = 3;
let best = Number(localStorage.getItem("spaceBest")) || 0;

let running = false;
let animationId;
let enemyTimer = 0;
let shootCooldown = 0;

bestEl.textContent = best;

function createStars() {
stars = [];

for (let i = 0; i < 60; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
speed: 0.5 + Math.random() * 1.5,
size: 1 + Math.random() * 2
});
}
}

function startGame() {
cancelAnimationFrame(animationId);

score = 0;
lives = 3;

scoreEl.textContent = score;
livesEl.textContent = lives;

player = {
x: canvas.width / 2 - 18,
y: canvas.height - 60,
width: 36,
height: 28,
speed: 6
};

bullets = [];
enemies = [];

enemyTimer = 0;
shootCooldown = 0;

createStars();

running = true;

messageEl.textContent =
"đŸ”Ĩ Destroy the enemy ships!";

startBtn.textContent = "🔄 Restart";

gameLoop();
}

function moveLeft() {
if (!running) return;

player.x -= player.speed;

if (player.x < 0) {
player.x = 0;
}
}

function moveRight() {
if (!running) return;

player.x += player.speed;

if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
}

function shoot() {
if (!running || shootCooldown > 0) return;

bullets.push({
x: player.x + player.width / 2 - 2,
y: player.y,
width: 4,
height: 14,
speed: 8
});

shootCooldown = 10;
}

function createEnemy() {
const size = 30;
5 views
🎮 HTML GAME CODING HUB đŸ’ģđŸ”Ĩ
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();
}
}
);
3 views