Adding Player Controls to Your Game Skip to main content

I'm Back

 Hi guy!... If You're one of the few people that come to this blog, you know for sure that it's been quite some time since the last post. I had a lot to do in the past couple of years. Almost 2 years already. Time flies by so fast! I got my Bachelor's degree. Currently, i'm pursing a Master's degree in Information System Management. But since i wanted to come back, i wanted to relearn myself all that i had forgotten. This Tutorial i'm about to give to you is how i relearned things step by step after so long. With AI these days, people sometimes think that they can do work more faster, but they don't work at all. They AI is making the work for them. And while trying to relearn things, i was tempted to use AI to go faster. But getting code from AI makes you dumber than you think when you are a beginner and don't have solid foundation. So this blog is dedicated to the creation of games using JavaScript. One of the best tools you could use in JavaScript to m...
Post a Comment

Adding Player Controls to Your Game

In this tutorial, we'll enhance our ball shooter game by adding player controls. We'll allow the player to move a shooter left and right and fire beams to interact with falling balls.

Implementing Player Movement

To control the shooter, we need to handle keyboard inputs. We’ll use the keydown and keyup events to move the shooter left and right.

Updating Our Game Code

1. Add Shooter Object

First, define the shooter object in game.js:

javascript
const shooter = {
    x: canvas.width / 2,
    y: canvas.height - 30,
    width: 60,
    height: 20,
    speed: 5,
};

function drawShooter() {
    ctx.fillStyle = 'blue';
    ctx.fillRect(shooter.x, shooter.y, shooter.width, shooter.height);
}

2. Handle Keyboard Input

Add event listeners to capture keyboard input:

javascript
let keys = {};

window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
});

window.addEventListener('keyup', (e) => {
    keys[e.key] = false;
});

3. Update Shooter Position

Update the shooter’s position based on keyboard input in the draw function:

javascript
function updateShooter() {
    if (keys['ArrowLeft'] && shooter.x > 0) {
        shooter.x -= shooter.speed;
    }
    if (keys['ArrowRight'] && shooter.x < canvas.width - shooter.width) {
        shooter.x += shooter.speed;
    }
}

4. Integrate Shooter Update and Draw Functions

Call updateShooter and drawShooter in the draw function:

javascript

function draw() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Update and draw the shooter
    updateShooter();
    drawShooter();

    // Draw other game elements here

    requestAnimationFrame(draw);
}

draw();

Adding Beam Shooting

Let’s add functionality for shooting beams:

1. Define Beam Object

Add the beam object:

javascript

const beams = [];
const beamSpeed = 7;

function shootBeam() {
    beams.push({
        x: shooter.x + shooter.width / 2,
        y: shooter.y,
        width: 5,
        height: 10,
    });
}

2. Handle Shooting Input

Update the keydown event to shoot beams:

javascript
window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
    if (e.key === ' ') {
        shootBeam();
    }
});

3. Update Beam Position

Update beam positions and draw them:

javascript
function updateBeams() {
    beams.forEach((beam, index) => {
        beam.y -= beamSpeed;
        if (beam.y < 0) {
            beams.splice(index, 1);
        }
    });
}

function drawBeams() {
    ctx.fillStyle = 'red';
    beams.forEach((beam) => {
        ctx.fillRect(beam.x, beam.y, beam.width, beam.height);
    });
}

4. Integrate Beam Update and Draw Functions

Call updateBeams and drawBeams in the draw function:

javascript
function draw() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Update and draw the shooter
    updateShooter();
    drawShooter();

    // Update and draw beams
    updateBeams();
    drawBeams();

    // Draw other game elements here

    requestAnimationFrame(draw);
}

draw();

Conclusion

With player controls and shooting mechanics added, your game is now more interactive! You can continue to enhance the game by adding features like beam collision detection, scoring, and more. Keep experimenting and have fun with game development!

Stay tuned for more tutorials and tips on building engaging and fun games!

Labels:

Comments

Post a Comment

Popular posts from this blog

Mastering Collision Detection in HTML5 Games: A Complete Guide

Introduction: Creating interactive and dynamic gameplay often relies heavily on collision detection. Whether you're creating platformers, puzzle games, or even fast-paced shooters, mastering collision mechanics can significantly enhance the feel and playability of your game. In this post, we’ll dive deep into how to implement collision detection using JavaScript and HTML5’s canvas , discussing key methods, common issues, and optimizations. 1. What is Collision Detection? At its core, collision detection is a way of determining when two objects in your game occupy the same space. When two game elements—like a player and an enemy—collide, we need the game to recognize that event so we can react appropriately, such as reducing health, triggering an animation, or moving an object. 2. Types of Collision Detection There are several types of collision detection methods, but here are the most common for 2D games: Axis-Aligned Bounding Box (AABB): The simplest method, where you check if t...
Post a Comment
Read more

Adding Menus and Shop Systems to Your Ball Shooter Game

 Introduction In this part of the tutorial, we will take the Ball Shooter Game to the next level by adding essential game components like a menu system and a shop . The menu will provide options to start a new game, access the shop, or quit. The shop will allow players to purchase new beam shapes and other in-game features. By the end of this post, you’ll have a functional menu and shop system integrated into your game. So, let’s dive in! 1. Adding a Menu System First, we’ll create a basic menu that will include buttons to start the game, go to the shop, and exit. We’ll be using HTML, CSS, and JavaScript to build this. HTML Let’s start by creating a simple menu in the HTML file. HTML < div id = "menu" class = "menu" > < h1 > Ball Shooter Game </ h1 > < button onclick = "startGame()" > Start New Game </ button > < button onclick = "openShop()" > Shop </ button > < button oncli...
Post a Comment
Read more

Creating Games with HTML5: The Basics of the "canvas" Element

Introduction: In this tutorial, we’ll dive into one of the most powerful features in HTML5 for game development: the <canvas> element. This is what you’ll use to render graphics and create interactive animations in your browser-based games. We’ll start by learning how to set up a canvas, draw simple shapes, and build the foundation for more complex game mechanics. What is the <canvas> Element? The <canvas> element in HTML5 provides a drawable region in your webpage, allowing you to use JavaScript to draw 2D shapes, images, and animations dynamically. It is one of the fundamental building blocks of many modern browser games. Step 1: Setting Up the Canvas First, let’s set up a basic canvas in your HTML file. Create a new HTML file and add the following code: html <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, ini...
Post a Comment
Read more