🎮 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 💻🔥
<!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 💻🔥
<!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 💻🔥
<!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