Enhancing Your Arcade Game: Backgrounds, Space Ships, and Asteroids

🚀 Welcome back to our series on Making Arcade Games with AI! In this second installment, we'll be focusing on enhancing our game by adding a background image, a spaceship, and asteroid images. We'll also make touch movements work and fix the asteroid collision implementation.

Step 1: Adding a Background Image 🎨

To make our game visually appealing, let's start by generating a background image using ChatGPT. You can prompt ChatGPT with something like:

Generate a space-themed background image for an arcade game.

Once you have your image, save it in the images directory of your project, naming it background_image_level_1.webp.

Update your CSS in the #game-container style to include this background:

#game-container {
    position: relative;
    width: 800px;
    height: 600px;
    border: 2px solid white;
    background: url('./images/background_image_level_1.webp') no-repeat center center/cover;
    overflow: hidden;
}

Step 2: Adding the Space Ship and Asteroids 🚀🌑

Visit Flaticon to download a spaceship and an asteroid icon. For instance, use the following URLs for our game:

• Spaceship: https://cdn-icons-png.flaticon.com/128/1985/1985789.png
• Asteroid: https://cdn-icons-png.flaticon.com/128/13404/13404254.png

Update your CSS for the spaceship and the asteroid:

#spaceship {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 40px;
    height: 40px;
    background: url('https://cdn-icons-png.flaticon.com/128/1985/1985789.png') no-repeat center center/contain;
    transform: translateX(-50%);
}

.asteroid {
    position: absolute;
    border-radius: 50%;
    background: url('https://cdn-icons-png.flaticon.com/128/13404/13404254.png') no-repeat center center/contain;
}

Step 3: Implementing Touch Controls 📱

To make the game more interactive on touch devices, we need to add event listeners for touch events. Here's how you can handle them:

function handleTouchstart(event) {
    const touch = event.touches[0];
    const touchX = touch.clientX;
    const touchY = touch.clientY;

    if (touchX < spaceshipPosition.x) movingLeft = true;
    if (touchX > spaceshipPosition.x) movingRight = true;
    if (touchY < spaceshipPosition.y) movingDown = true;
    if (touchY > spaceshipPosition.y) movingUp = true;

    shootProjectile();
}

function handleTouchmove(event) {
    const touch = event.touches[0];
    const touchX = touch.clientX;
    const touchY = touch.clientY;

    movingLeft = touchX < spaceshipPosition.x;
    movingRight = touchX > spaceshipPosition.x;
    movingDown = touchY < spaceshipPosition.y;
    movingUp = touchY > spaceshipPosition.y;
}

function handleTouchend(event) {
    movingLeft = false;
    movingRight = false;
    movingUp = false;
    movingDown = false;
}

Step 4: Fixing Asteroid Collisions 💥

To ensure that your projectiles properly collide with asteroids, define a checkCollisions function:

function checkCollisions(projectile, asteroid) {
    const pRect = projectile.getBoundingClientRect();
    const aRect = asteroid.getBoundingClientRect();

    if (pRect.left < aRect.right &&
        pRect.right > aRect.left &&
        pRect.top < aRect.bottom &&
        pRect.bottom > aRect.top) {
        asteroidsContainer.removeChild(asteroid);
        asteroids = asteroids.filter(a => a !== asteroid);

        projectilesContainer.removeChild(projectile);
        projectiles = projectiles.filter(p => p !== projectile);
    }
}

Conclusion 🎉

By completing these steps, you've successfully integrated background, spaceship, and asteroid imagery into your arcade game. You've also enhanced gameplay with touch controls and improved the collision detection logic. Stay tuned for our next installment, where we will introduce new features and refine the game further!

References 📚

• Flaticon
• Source code

Note: Reference links might be outdated as technology evolves quickly.