Raptor: Call of the Shadows is a legendary top-down shooter from the 90s that brings back fond memories for many retro gamers. Developed by Apogee Software in 1994, it became one of the most iconic vertical-scrolling shooters of its time. The game puts players in control of a high-tech fighter jet, battling waves of enemies and collecting money to upgrade their arsenal. Fast forward to today, and thanks to modern web technologies, Raptor can now be enjoyed on mobile devices with touchscreen controls!

As a huge fan of the game, I wanted to take on the challenge of making it touch-friendly using JavaScript, incorporating controls that mimic the traditional keyboard experience. This project allowed me to experiment with web technologies and bring a piece of gaming history to modern devices like smartphones and tablets.

Joystick Implementation for Touch Controls

One of the biggest challenges in this project was implementing a virtual joystick to simulate the arrow keys used for movement in the original game. I developed a simple JavaScript joystick that detects touch input and translates it into directional commands. The joystick controls were designed to recognize movement within a circular boundary, ensuring accurate directional inputs without exceeding limits.

Here's the code I used to achieve this joystick functionality:

// JOYSTICK
const joystick = document.getElementById('joystick');
const stick = document.getElementById('stick');

let centerX = joystick.offsetWidth / 2;
let centerY = joystick.offsetHeight / 2;
const maxDistance = joystick.offsetWidth / 2 - stick.offsetWidth / 2;

const handleMove = (x, y) => {
    const distance = Math.sqrt(x * x + y * y);

    if (distance > maxDistance) {
        const angle = Math.atan2(y, x);
        x = Math.cos(angle) * maxDistance;
        y = Math.sin(angle) * maxDistance;
    }

    stick.style.transform = `translate(${x}px, ${y}px)`;

    const directionX = x / maxDistance;
    const directionY = y / maxDistance;

    if (directionY < -0.5) simulateKeyDown('ArrowUp');
    else simulateKeyUp('ArrowUp');

    if (directionY > 0.5) simulateKeyDown('ArrowDown');
    else simulateKeyUp('ArrowDown');

    if (directionX < -0.5) simulateKeyDown('ArrowLeft');
    else simulateKeyUp('ArrowLeft');

    if (directionX > 0.5) simulateKeyDown('ArrowRight');
    else simulateKeyUp('ArrowRight');
}; 

Although it works, I feel there's room for improvement. If you're experienced with touch input handling and joystick simulation, I'd love to hear your suggestions or contributions to optimize it further!

Handling In-Game Name Input

Another tricky part of the adaptation was the name entry screen, where players are required to type their names to proceed. Since touch keyboards may not always be practical during gameplay, I decided to automate the process by simulating keystrokes to enter the player's name. The following code snippet simulates typing "LEMON" and pressing Enter twice:

// Simulate typing "LEMON" followed by ENTER, twice
simulateTyping('LEMON', () => {
    simulateEnter();
    setTimeout(() => {
      simulateTyping('LEMON', simulateEnter);
    }, 200 * 2);
}); 

This method ensures the game progresses smoothly without requiring manual keyboard input, which can be cumbersome on touchscreen devices.

Testing and Results

After implementing the joystick and automated name entry, I tested the game extensively on my Samsung S23 Ultra, and I'm happy to report that it works quite well! The controls feel responsive, and the touchscreen experience does a good job of capturing the original gameplay's intensity.

Watch the Gameplay

If you're curious to see how Raptor plays with these touch controls, check out my gameplay video uploaded to YouTube. Watch the action unfold and let me know what you think in the comments!

Conclusion

Bringing a DOS classic like Raptor: Call of the Shadows to touchscreen devices was a fun and challenging experience. Developing the joystick controls and handling input automation introduced me to new aspects of web development, and there's always room for improvement. Whether you're a longtime fan or a new player, you can now enjoy this classic on modern devices with ease.

I'd love to hear feedback, suggestions, or contributions from fellow developers and gamers—let's keep the retro spirit alive!