How to Make Your Own Simple Video Game in JavaScript 🎮🚀

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!

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!