DEV Community

Cover image for Creating a Platform Game with TCJSGame v3: Step-by-Step Tutorial
Kehinde Owolabi
Kehinde Owolabi

Posted on

Creating a Platform Game with TCJSGame v3: Step-by-Step Tutorial

#webdev #programming #javascript #beginners

Creating a Platform Game with TCJSGame v3: Step-by-Step Tutorial

In this tutorial, we'll create a simple platform game using TCJSGame v3, a lightweight JavaScript game engine. We'll cover everything from setting up the environment to adding player movement, platforms, and collision detection.

Prerequisites

  • Basic knowledge of HTML and JavaScript
  • A text editor (VS Code, Sublime Text, etc.)
  • A modern web browser

Step 1: Setting Up the HTML File

Create a new HTML file and include the TCJSGame v3 library:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platform Game with TCJSGame v3</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #2c3e50;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 3px solid #ecf0f1;
            border-radius: 5px;
            background: #34495e;
        }
    </style>
</head>
<body>
    <script src="http://tcjsgame.vercel.app/mat/tcjsgame-v3.js"></script>
    <script>
        // Our game code will go here
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Initialize the Game Display

Inside the <script> tag, let's set up our game display:

// Create display instance
const display = new Display();

// Start the game with a 800x450 canvas
display.start(800, 450);

// Set background gradient
display.lgradient("bottom", "#3498db", "#2c3e50");
Enter fullscreen mode Exit fullscreen mode

Step 3: Create the Player Character

Now let's create our player character:

// Create player
const player = new Component(30, 50, "#e74c3c", 100, 100, "rect");

// Enable physics for the player
player.physics = true;
player.gravity = 0.5;
player.bounce = 0.2;

// Add player to the display
display.add(player);

// Set camera to follow player with smooth movement
display.camera.follow(player, true);
Enter fullscreen mode Exit fullscreen mode

Step 4: Create Platforms

Let's create some platforms for our player to jump on:

// Create platforms
const ground = new Component(800, 30, "#27ae60", 0, 420, "rect");
ground.physics = true;

const platform1 = new Component(200, 20, "#2980b9", 150, 350, "rect");
platform1.physics = true;

const platform2 = new Component(200, 20, "#2980b9", 450, 280, "rect");
platform2.physics = true;

const platform3 = new Component(200, 20, "#2980b9", 200, 200, "rect");
platform3.physics = true;

// Add platforms to display
display.add(ground);
display.add(platform1);
display.add(platform2);
display.add(platform3);
Enter fullscreen mode Exit fullscreen mode

Step 5: Implement Player Controls

Now let's add keyboard controls for our player:

// Player movement variables
const playerSpeed = 5;
const jumpStrength = 12;
let canJump = false;

// Update function for game logic
function update() {
    // Left and right movement
    if (display.keys[65] || display.keys[37]) { // A key or Left arrow
        player.speedX = -playerSpeed;
    } else if (display.keys[68] || display.keys[39]) { // D key or Right arrow
        player.speedX = playerSpeed;
    } else {
        player.speedX = 0;
    }

    // Jumping
    if ((display.keys[87] || display.keys[32] || display.keys[38]) && canJump) { // W, Space, or Up arrow
        player.gravitySpeed = -jumpStrength;
        canJump = false;
    }

    // Check if player is on a platform
    canJump = player.y >= display.canvas.height - player.height - 1 || 
              player.crashWith(ground) || 
              player.crashWith(platform1) || 
              player.crashWith(platform2) || 
              player.crashWith(platform3);

    // Keep player within screen bounds
    if (player.x < 0) player.x = 0;
    if (player.x > display.canvas.width - player.width) {
        player.x = display.canvas.width - player.width;
    }

    // Reset if player falls off the screen
    if (player.y > display.canvas.height) {
        player.x = 100;
        player.y = 100;
        player.speedX = 0;
        player.speedY = 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Add Collectible Items

Let's add some collectible coins to our game:

// Create coins
const coins = [];
const coinPositions = [
    [200, 320], [300, 320], [500, 250], [550, 250],
    [250, 170], [300, 170], [600, 370]
];

coinPositions.forEach((pos, index) => {
    const coin = new Component(15, 15, "#f1c40f", pos[0], pos[1], "rect");
    coin.index = index;
    display.add(coin);
    coins.push(coin);
});

let score = 0;
Enter fullscreen mode Exit fullscreen mode

Step 7: Add Score Display

Let's create a text component to display the score:

// Create score display
const scoreText = new Component("16px", "Arial", "#ecf0f1", 20, 30, "text");
scoreText.text = "Score: 0";
display.add(scoreText);
Enter fullscreen mode Exit fullscreen mode

Step 8: Enhance the Update Function

Now let's update our update function to handle coin collection and score:

// Enhanced update function
function update() {
    // ... (previous movement code)

    // Check for coin collection
    coins.forEach((coin, index) => {
        if (coin && player.crashWith(coin)) {
            // Remove the coin
            coin.hide();
            coins[index] = null;

            // Increase score
            score += 10;
            scoreText.text = `Score: ${score}`;
        }
    });

    // ... (previous bounds checking code)
}
Enter fullscreen mode Exit fullscreen mode

Step 9: Add Enemies

Let's add some moving enemies to make the game more challenging:

// Create enemies
const enemy1 = new Component(30, 30, "#e74c3c", 300, 390, "rect");
enemy1.physics = true;
enemy1.speedX = 2;

const enemy2 = new Component(30, 30, "#e74c3c", 600, 240, "rect");
enemy2.physics = true;
enemy2.speedX = -2;

display.add(enemy1);
display.add(enemy2);
Enter fullscreen mode Exit fullscreen mode

Step 10: Final Game Logic

Let's complete our game logic with enemy movement and game over conditions:

// Enhanced update function with enemy logic
function update() {
    // ... (previous movement and coin collection code)

    // Enemy movement and behavior
    if (enemy1.x <= 250 || enemy1.x >= 500) {
        enemy1.speedX *= -1;
    }

    if (enemy2.x <= 450 || enemy2.x >= 650) {
        enemy2.speedX *= -1;
    }

    // Check for collision with enemies
    if (player.crashWith(enemy1) || player.crashWith(enemy2)) {
        // Reset game
        player.x = 100;
        player.y = 100;
        player.speedX = 0;
        player.speedY = 0;

        // Reset enemies
        enemy1.x = 300;
        enemy2.x = 600;

        // Reset coins
        coins.forEach((coin, index) => {
            if (coin) {
                coin.show();
                coin.x = coinPositions[index][0];
                coin.y = coinPositions[index][1];
            } else {
                const newCoin = new Component(15, 15, "#f1c40f", 
                    coinPositions[index][0], coinPositions[index][1], "rect");
                display.add(newCoin);
                coins[index] = newCoin;
            }
        });

        // Reset score
        score = 0;
        scoreText.text = `Score: ${score}`;
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 11: Add Visual Enhancements

Let's add some visual improvements to make our game more appealing:

// Add decorative elements
const decoration = new Component(40, 40, "#8e44ad", 700, 100, "rect");
decoration.changeAngle = true;
display.add(decoration);

// Animate the decoration
setInterval(() => {
    decoration.angle += 0.1;
}, 100);
Enter fullscreen mode Exit fullscreen mode

Complete Game Code

Here's the complete code for our platform game:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platform Game with TCJSGame v3</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #2c3e50;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 3px solid #ecf0f1;
            border-radius: 5px;
            background: #34495e;
        }
    </style>
</head>
<body>
    <script src="http://tcjsgame.vercel.app/mat/tcjsgame-v3.js"></script>
    <script>
        // Create display instance
        const display = new Display();

        // Start the game with a 800x450 canvas
        display.start(800, 450);

        // Set background gradient
        display.lgradient("bottom", "#3498db", "#2c3e50");

        // Create player
        const player = new Component(30, 50, "#e74c3c", 100, 100, "rect");
        player.physics = true;
        player.gravity = 0.5;
        player.bounce = 0.2;
        display.add(player);

        // Set camera to follow player
        display.camera.follow(player, true);

        // Create platforms
        const ground = new Component(800, 30, "#27ae60", 0, 420, "rect");
        ground.physics = true;

        const platform1 = new Component(200, 20, "#2980b9", 150, 350, "rect");
        platform1.physics = true;

        const platform2 = new Component(200, 20, "#2980b9", 450, 280, "rect");
        platform2.physics = true;

        const platform3 = new Component(200, 20, "#2980b9", 200, 200, "rect");
        platform3.physics = true;

        display.add(ground);
        display.add(platform1);
        display.add(platform2);
        display.add(platform3);

        // Create coins
        const coins = [];
        const coinPositions = [
            [200, 320], [300, 320], [500, 250], [550, 250],
            [250, 170], [300, 170], [600, 370]
        ];

        coinPositions.forEach((pos, index) => {
            const coin = new Component(15, 15, "#f1c40f", pos[0], pos[1], "rect");
            coin.index = index;
            display.add(coin);
            coins.push(coin);
        });

        let score = 0;

        // Create score display
        const scoreText = new Component("16px", "Arial", "#ecf0f1", 20, 30, "text");
        scoreText.text = "Score: 0";
        display.add(scoreText);

        // Create enemies
        const enemy1 = new Component(30, 30, "#e74c3c", 300, 390, "rect");
        enemy1.physics = true;
        enemy1.speedX = 2;

        const enemy2 = new Component(30, 30, "#e74c3c", 600, 240, "rect");
        enemy2.physics = true;
        enemy2.speedX = -2;

        display.add(enemy1);
        display.add(enemy2);

        // Add decorative elements
        const decoration = new Component(40, 40, "#8e44ad", 700, 100, "rect");
        decoration.changeAngle = true;
        display.add(decoration);

        // Animate the decoration
        setInterval(() => {
            decoration.angle += 0.1;
        }, 100);

        // Player movement variables
        const playerSpeed = 5;
        const jumpStrength = 12;
        let canJump = false;

        // Update function for game logic
        function update() {
            // Left and right movement
            if (display.keys[65] || display.keys[37]) { // A key or Left arrow
                player.speedX = -playerSpeed;
            } else if (display.keys[68] || display.keys[39]) { // D key or Right arrow
                player.speedX = playerSpeed;
            } else {
                player.speedX = 0;
            }

            // Jumping
            if ((display.keys[87] || display.keys[32] || display.keys[38]) && canJump) {
                player.gravitySpeed = -jumpStrength;
                canJump = false;
            }

            // Check if player is on a platform
            canJump = player.y >= display.canvas.height - player.height - 1 || 
                      player.crashWith(ground) || 
                      player.crashWith(platform1) || 
                      player.crashWith(platform2) || 
                      player.crashWith(platform3);

            // Check for coin collection
            coins.forEach((coin, index) => {
                if (coin && player.crashWith(coin)) {
                    coin.hide();
                    coins[index] = null;
                    score += 10;
                    scoreText.text = `Score: ${score}`;
                }
            });

            // Enemy movement and behavior
            if (enemy1.x <= 250 || enemy1.x >= 500) {
                enemy1.speedX *= -1;
            }

            if (enemy2.x <= 450 || enemy2.x >= 650) {
                enemy2.speedX *= -1;
            }

            // Keep player within screen bounds
            if (player.x < 0) player.x = 0;
            if (player.x > display.canvas.width - player.width) {
                player.x = display.canvas.width - player.width;
            }

            // Check for collision with enemies
            if (player.crashWith(enemy1) || player.crashWith(enemy2)) {
                // Reset game
                player.x = 100;
                player.y = 100;
                player.speedX = 0;
                player.speedY = 0;

                enemy1.x = 300;
                enemy2.x = 600;

                coins.forEach((coin, index) => {
                    if (coin) {
                        coin.show();
                        coin.x = coinPositions[index][0];
                        coin.y = coinPositions[index][1];
                    } else {
                        const newCoin = new Component(15, 15, "#f1c40f", 
                            coinPositions[index][0], coinPositions[index][1], "rect");
                        display.add(newCoin);
                        coins[index] = newCoin;
                    }
                });

                score = 0;
                scoreText.text = `Score: ${score}`;
            }

            // Reset if player falls off the screen
            if (player.y > display.canvas.height) {
                player.x = 100;
                player.y = 100;
                player.speedX = 0;
                player.speedY = 0;
            }
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Game Features

Our platform game includes:

  1. Player character with physics-based movement
  2. Multiple platforms to jump on
  3. Collectible coins that increase score
  4. Moving enemies that reset the game on contact
  5. Score display
  6. Camera that follows the player
  7. Visual decorations

Next Steps

To expand this game, you could:

  1. Add multiple levels with increasing difficulty
  2. Implement different enemy types with unique behaviors
  3. Add power-ups (e.g., double jump, speed boost)
  4. Create a tilemap for more complex level design
  5. Add sound effects and background music
  6. Implement a game menu and pause functionality

TCJSGame v3 provides a simple yet powerful framework for creating 2D games in JavaScript. With its component-based architecture and built-in physics, you can quickly prototype and build engaging browser-based games.

Top comments (0)