🎮 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>Neon Reaction Game</title>

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

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

.game {
width: 92%;
max-width: 500px;
padding: 25px;
border: 1px solid #00eaff;
border-radius: 25px;
background: rgba(10, 20, 40, 0.9);
box-shadow: 0 0 30px #00eaff55;
text-align: center;
}

h1 {
color: #00eaff;
margin-bottom: 10px;
text-shadow: 0 0 15px #00eaff;
}

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

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

.stat {
background: #101b35;
padding: 12px 20px;
border-radius: 12px;
}

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

#arena {
height: 320px;
position: relative;
overflow: hidden;
border-radius: 18px;
border: 1px solid #ffffff22;
background: #070d1d;
}

.target {
width: 55px;
height: 55px;
border-radius: 50%;
background: #ff2678;
box-shadow: 0 0 25px #ff2678;
position: absolute;
cursor: pointer;
display: none;
}

button {
margin-top: 20px;
padding: 13px 30px;
border: none;
border-radius: 30px;
background: #00eaff;
color: #001018;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

button:hover {
transform: scale(1.05);
}
</style>
</head>

<body>

<div class="game">

<h1>⚡ NEON REACTION</h1>
<p class="subtitle">How fast can you react?</p>

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

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

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

<div id="arena">
<div id="target" class="target"></div>
</div>

<button onclick="startGame()">START GAME</button>

</div>

<script>
const arena = document.getElementById("arena");
const target = document.getElementById("target");

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

let best = localStorage.getItem("bestScore") || 0;
document.getElementById("best").textContent = best;

function moveTarget() {

const maxX = arena.clientWidth - 55;
const maxY = arena.clientHeight - 55;

const x = Math.random() * maxX;
const y = Math.random() * maxY;

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

target.style.display = "block";
}

function startGame() {

clearInterval(timer);

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

document.getElementById("score").textContent = score;
document.getElementById("time").textContent = time;

moveTarget();

timer = setInterval(() => {

time--;

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

if (time <= 0) {
endGame();
}

}, 1000);
}

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

if (!playing) return;

score++;

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

moveTarget();
});

function endGame() {

clearInterval(timer);

playing = false;

target.style.display = "none";

if (score > best) {

best = score;

localStorage.setItem("bestScore", best);

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

alert("🔥 NEW BEST SCORE: " + score + "!");
}
else {
alert("🎮 Game Over!\nYour Score: " + score);
}
}
</script>

</body>
</html>

😍1

5 views19:02

<!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 views10:50

🎮 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 views16:50

🎮 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 views15:02

About

Blog

Apps

Platform