Ever wanted to create your own video game but thought it was too hard? The good news is you don’t need a game engine—just JavaScript, HTML, and CSS!
- 📌 What You’ll Learn:
- 1️⃣ Setting Up Your Project 📂
- 2️⃣ Create the Game Screen (HTML) 🏗️
- 3️⃣ Style the Game Screen (CSS) 🎨
- 4️⃣ Draw the Game Objects (JavaScript) 🎮
- 5️⃣ Move the Player with Keyboard Controls ⌨️
- 6️⃣ Add Collision Detection (Game Over!) 🚨
- 7️⃣ Winning Condition (Survive for 30 Seconds!) ⏳
- 🔥 Bonus: Add Sound Effects & Background Music 🎵
- 🚀 Final Step: Host Your Game Online! 🌍
- 🎯 Final Thoughts: You’re a Game Developer Now! 🎮
In this beginner-friendly guide, we’ll show you how to make a simple 2D game using JavaScript in just a few steps. By the end, you’ll have a working game you can play in your browser! 🎉
📌 What You’ll Learn:
✅ HTML & CSS – To create the game screen 🎨
✅ JavaScript – To control game logic & movement 🎮
✅ Collision Detection – To track when objects hit each other 🔄
✅ Game Loop – To keep the game running smoothly ⏳
Let’s get started! 🚀
1️⃣ Setting Up Your Project 📂
Create a new project folder, e.g., my-game/, and inside it, create these three files:
perl
-----
my-game/
├── index.html (Game structure)
├── style.css (Game design)
├── script.js (Game logic)
Now open your code editor (VS Code, Sublime, etc.) and let’s begin! 🛠️
2️⃣ Create the Game Screen (HTML) 🏗️
Inside index.html, add this:
html
-----
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple JS Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Simple JavaScript Game 🎮</h1>
<canvas id="gameCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>
✔️ canvas is where the game will be drawn.
✔️ script.js will handle game logic.
3️⃣ Style the Game Screen (CSS) 🎨
Inside style.css, add:
css
-----
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #222;
color: white;
}
canvas {
background: black;
display: block;
margin: 0 auto;
border: 2px solid white;
}
✔️ Dark background to make the game look cool.
✔️ White canvas border for a retro style.
🔹 Now, open index.html in your browser—you should see an empty canvas!
4️⃣ Draw the Game Objects (JavaScript) 🎮
Inside script.js, start by selecting the canvas and setting up the game loop:
js
-----
// Select the canvas
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Set canvas size
canvas.width = 500;
canvas.height = 300;
// Player (rectangle)
const player = {
x: 50,
y: 130,
width: 30,
height: 30,
color: "red",
speed: 5
};
// Enemy (moving object)
const enemy = {
x: 450,
y: 130,
width: 30,
height: 30,
color: "blue",
speed: 3
};
// Draw game objects
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
// Draw player
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
// Draw enemy
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}
// Update enemy position
function update() {
enemy.x -= enemy.speed; // Move enemy to the left
// Reset enemy when off-screen
if (enemy.x < -30) {
enemy.x = 500;
}
}
// Game loop
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop); // Keeps the game running
}
// Start the game
gameLoop();
✔️ Red player box stays still.
✔️ Blue enemy box moves left and resets when off-screen.
Now refresh your browser—you should see the enemy moving! 🎉
5️⃣ Move the Player with Keyboard Controls ⌨️
Modify script.js to move the player with arrow keys:
js
-----
// Listen for key presses
document.addEventListener("keydown", movePlayer);
function movePlayer(event) {
if (event.key === "ArrowUp" && player.y > 0) {
player.y -= player.speed; // Move up
}
if (event.key === "ArrowDown" && player.y < canvas.height - player.height) {
player.y += player.speed; // Move down
}
}
✔️ Arrow Up ⬆️ moves the player up.
✔️ Arrow Down ⬇️ moves the player down.
🔹 Test it! Press up/down arrows and see your red box move! 🚀
6️⃣ Add Collision Detection (Game Over!) 🚨
Now, let’s detect when the player collides with the enemy and stop the game:
js
-----
// Check for collision
function checkCollision() {
if (
player.x < enemy.x + enemy.width &&
player.x + player.width > enemy.x &&
player.y < enemy.y + enemy.height &&
player.y + player.height > enemy.y
) {
alert("Game Over! 😵");
document.location.reload(); // Reload the game
}
}
// Modify game loop to check for collisions
function gameLoop() {
update();
draw();
checkCollision(); // Check if player hits enemy
requestAnimationFrame(gameLoop);
}
✔️ If the player touches the enemy, the game ends with a “Game Over” alert.
7️⃣ Winning Condition (Survive for 30 Seconds!) ⏳
Let’s add a win condition:
js
-----
let timeSurvived = 0;
// Timer function
setInterval(() => {
timeSurvived++;
if (timeSurvived === 30) {
alert("You Win! 🎉");
document.location.reload();
}
}, 1000);
✔️ Survive for 30 seconds, and you win!
🔥 Bonus: Add Sound Effects & Background Music 🎵
🔹 Add a Jump Sound
1️⃣ Download a jump sound (jump.mp3) and save it in your folder.
2️⃣ Modify script.js:
js
-----
const jumpSound = new Audio("jump.mp3");
// Play sound when jumping
function movePlayer(event) {
if (event.key === "ArrowUp") {
jumpSound.play();
player.y -= player.speed;
}
}
✔️ Now the game plays a sound when jumping! 🎵
🚀 Final Step: Host Your Game Online! 🌍
To share your game with friends, deploy it using GitHub Pages (Free & Easy!).
🔹 Steps to Host on GitHub Pages
1️⃣ Upload your project to GitHub.
2️⃣ Go to Settings → Pages → Select “main” branch → Save.
3️⃣ Your game is live at:
perl
-----
https://yourusername.github.io/my-game/
🎉 Now anyone can play your game online!
🎯 Final Thoughts: You’re a Game Developer Now! 🎮
You just built a working JavaScript game from scratch! 🚀
💡 What You Learned:
✔️ Canvas API – To draw objects on the screen.
✔️ Game Loop – To keep the game running smoothly.
✔️ Keyboard Controls – To move the player.
✔️ Collision Detection – To detect hits & game over.
✔️ Hosting Your Game Online!
Now, try adding your own features: more enemies, different levels, or power-ups!
