๐ŸŽฎ 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 ๐Ÿ’ป๐Ÿ”ฅ
<!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
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
// Initial screen
player = {
x: canvas.width / 2 - 18,
y: canvas.height - 60,
width: 36,
height: 28,
speed: 6
};

createStars();
draw();
</script>

</body>
</html>
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿš€๐Ÿ”ฅ DAY 6 โ€” SPACE SHOOTER! ๐Ÿ‘พ

The ultimate space battle is here! ๐ŸŒŒ

๐Ÿš€ Control your spaceship
๐Ÿ”ฅ Shoot enemy ships
๐Ÿ† Increase your score
โค๏ธ 3 Lives
๐Ÿ’พ Best Score Saved
๐Ÿ“ฑ Mobile Controls
โŒจ๏ธ Keyboard Controls

๐ŸŽฎ PLAY THE GAME:
๐Ÿ‘‡
[https://anadverma956989936-lab.github.io/Code2Game-Runner/]

๐Ÿ† CHALLENGE:
How high can you score before losing all 3 lives? ๐Ÿ˜ˆ

๐Ÿ’ฌ Apna highest score batao!

โค๏ธ Like | ๐Ÿ”„ Share | ๐Ÿ“ข Forward

โšก CodeForge Gaming Community

#Day6 #SpaceShooter #HTML #CSS #JavaScript #GameCoding
4 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
โค1
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
๐Ÿšจ๐Ÿ”ฅ BIG UPDATE โ€” CODE RUNNER 2.0 IS LIVE! ๐Ÿ”ฅ๐Ÿšจ

Ab coding karna aur bhi EASY! ๐Ÿ˜Ž๐Ÿ’ป

๐ŸŽฎ Game banao
๐ŸŒ Website banao
โšก HTML + CSS + JS code run karo
โ›ถ Full Screen me chalao
๐Ÿ’พ Project Save karo
๐Ÿ“‚ Project Load karo
โฌ‡๏ธ Apna project Download karo

Sab kuch ek hi jagah! ๐Ÿš€

๐Ÿ‘‡ TRY NOW โ€” FREE CODE RUNNER ๐Ÿ‘‡

๐Ÿ”— https://anadverma956989936-lab.github.io/Code2Game-/

๐Ÿ’ก Code Paste Karo โ†’ RUN Dabao โ†’ Apna Project Live Dekho! ๐Ÿ”ฅ

๐Ÿ‘จโ€๐Ÿ’ป Beginners ke liye bhi Easy!

โค๏ธ Like/React karo
๐Ÿ“ค Apne coding friends ke saath Share karo
๐Ÿ”ฅ Aur aise hi HTML Games & Projects ke liye Channel Join rakho!

#Coding #HTML #CSS #JavaScript #GameDevelopment #WebDevelopment #CodeRunner #HTMLGames #CodingProjects
โค1
3 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
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>Ultimate Mini 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:#050816;
color:white;
}

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

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

.subtitle{
color:#aaa;
margin-top:5px;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:20px 0;
}

.stat{
padding:10px 5px;
border-radius:12px;
background:#192541;
font-size:13px;
}

.stat b{
display:block;
margin-top:5px;
color:#00eaff;
font-size:21px;
}

#arena{
position:relative;
width:100%;
height:360px;
overflow:hidden;
border:2px solid #00eaff;
border-radius:18px;
background:
radial-gradient(circle at 20% 20%,#12315c 0 2px,transparent 3px),
radial-gradient(circle at 80% 70%,#12315c 0 2px,transparent 3px),
#050a18;
}

#target{
position:absolute;
width:65px;
height:65px;
display:none;
justify-content:center;
align-items:center;
border:0;
border-radius:50%;
background:#ff315c;
color:white;
font-size:25px;
cursor:pointer;
box-shadow:0 0 25px #ff315c88;
animation:pulse .7s infinite alternate;
}

@keyframes pulse{
from{transform:scale(.9);}
to{transform:scale(1.08);}
}

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

button.start{
padding:12px 28px;
border:0;
border-radius:25px;
background:#00eaff;
color:#061018;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

button.start:disabled{
opacity:.5;
cursor:not-allowed;
}

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

<body>

<div class="game">

<h1>๐Ÿ† ULTIMATE MINI GAME</h1>

<p class="subtitle">
Hit the target before time runs out!
</p>

<div class="stats">

<div class="stat">
SCORE
<b id="score">0</b>
</div>

<div class="stat">
TIME
<b id="time">30</b>
</div>

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

</div>

<div id="arena">

<button id="target">
๐ŸŽฏ
</button>

</div>

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

<button id="startBtn" class="start">
๐Ÿš€ START GAME
</button>

<p class="small">
Hit ๐ŸŽฏ as many times as possible in 30 seconds!
</p>

</div>

<script>

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

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

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

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

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

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

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


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

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

bestEl.textContent = best;


function moveTarget(){

const maxX =
arena.clientWidth - target.offsetWidth;

const maxY =
arena.clientHeight - target.offsetHeight;

const x =
Math.random() * maxX;

const y =
Math.random() * maxY;

target.style.left = x + "px";
target.style.top = y + "px";
}


function startGame(){

clearInterval(timer);

score = 0;
time = 30;
playing = true;

scoreEl.textContent = score;
timeEl.textContent = time;

target.style.display = "flex";

startBtn.disabled = true;

messageEl.textContent =
"๐Ÿ”ฅ GO! Hit the target!";

moveTarget();


timer = setInterval(() => {

time--;

timeEl.textContent = time;

if(time <= 0){

endGame();

}

},1000);

}


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

if(!playing) return;

score++;

scoreEl.textContent = score;

moveTarget();

});


function endGame(){

clearInterval(timer);
2 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
playing = false;

target.style.display = "none";

startBtn.disabled = false;

startBtn.textContent =
"๐Ÿ”„ PLAY AGAIN";


if(score > best){

best = score;

localStorage.setItem(
"ultimateBest",
best
);

bestEl.textContent = best;

messageEl.textContent =
"๐Ÿ† NEW HIGH SCORE! " +
score +
" hits!";

}else{

messageEl.textContent =
"๐ŸŽฎ TIME UP! Your score: " +
score;

}

}


startBtn.addEventListener(
"click",
startGame
);

</script>

</body>
</html>
2 views