๐ŸŽฎ 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>
<head>
<title>Number Guessing Game</title>
<style>
body{
margin:0;
font-family:Arial;
background:#08111f;
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.box{
width:320px;
padding:30px;
text-align:center;
border-radius:20px;
background:#101d32;
box-shadow:0 0 30px #00eaff55;
}
h1{color:#00eaff;}
input{
width:90%;
padding:12px;
border-radius:10px;
border:0;
margin:10px;
font-size:18px;
}
button{
padding:12px 25px;
border:0;
border-radius:20px;
background:#00eaff;
font-weight:bold;
cursor:pointer;
}
#msg{
margin-top:20px;
font-size:18px;
}
</style>
</head>

<body>

<div class="box">
<h1>๐ŸŽฏ Guess The Number</h1>
<p>Guess a number between 1 and 100</p>

<input id="guess" type="number" placeholder="Enter number">

<button onclick="check()">GUESS</button>

<p id="msg"></p>
<p>Attempts: <span id="attempts">0</span></p>
</div>

<script>

let number=Math.floor(Math.random()*100)+1;
let attempts=0;

function check(){

let guess=Number(document.getElementById("guess").value);

if(!guess){
document.getElementById("msg").textContent="โš ๏ธ Enter a number!";
return;
}

attempts++;

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

if(guess===number){

document.getElementById("msg").textContent=
"๐ŸŽ‰ Correct! You won!";

}else if(guess<number){

document.getElementById("msg").textContent=
"โฌ†๏ธ Try a higher number";

}else{

document.getElementById("msg").textContent=
"โฌ‡๏ธ Try a lower number";
}
}

</script>

</body>
</html>
9 views
๐ŸŽฎ HTML GAME CODING HUB ๐Ÿ’ป๐Ÿ”ฅ
โค๏ธ Like | ๐Ÿ”„ Share | ๐Ÿ“ข Forward
๐Ÿ”ฅ Next game tomorrow!
8 views
๐ŸŽฎ 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