DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Performance Optimization Strategies in Highly Scalable Systems
  • Spring Boot and React in Harmony
  • Common Problems in Redux With React Native
  • Tracking Bugs Made Easy With React.js Bug Tracking Tools

Trending

  • Time Series Analysis: VAR-Model-As-A-Service Using Flask and MinIO
  • Lost in Communication and Collaboration
  • How To Create a Resource Chart in JavaScript
  • 6 Proven Kubernetes Deployment Best Practices for Your Projects
  1. DZone
  2. Coding
  3. JavaScript
  4. Creating a Car Game in React (Part 1): Drawing and Moving

Creating a Car Game in React (Part 1): Drawing and Moving

In this post, we go over the React-based JavaScript necessary to create movement within our game.

Paul Michaels user avatar by
Paul Michaels
·
Updated Jun. 05, 19 · Tutorial
Like (2)
Save
Tweet
Share
14.00K Views

Join the DZone community and get the full member experience.

Join For Free

Since I started looking at React, I've wondered whether it would be possible to create a multi-user game. The game would look a little like a Spectrum game that I used to play called Trans-Am. I'm guessing most people reading this are not going to be old enough to remember this. Essentially, it marks the peak of car game development, and everything has been down hill ever since.

If you have no idea what I'm talking about then there's a demo of the game here.

I'm not going to try and emulate this exactly, I thought I'd use it as a basis to make a multi-player car game.

Create a React Application

We'll start by creating a new React Application (see here for details):

Create a React app

Now we have the application, we'll need some game assets. If you want to use the same assets as me then feel free to pull my repository. However, at this stage, all you'll need is a square box and a green screen.

The next stage is to design the game layout; because this is React, we'll start with App.js. We'll delegate all of our game logic to a component called Game:

import React from 'react';
import './App.css';
import Game from './Components/Game';
function App() {
    return (
        <div className="App">
            <Game />
        </div>
        );
}
export default App;

If you want to see, comprehensively, what Game.Jsx looks like, then have a look at the latest version on GitHub. However, some of the highlights are the render method:

render() { 
    return <div onKeyDown={this.onKeyDown} tabIndex="0">
        <Background backgroundImage={backgroundImg}
        windowWidth={this.state.windowWidth} windowHeight={this.state.windowHeight} /> 
    <Car carImage={carImg} centreX={this.state.playerX} 
        centreY={this.state.playerY} width={this.playerWidth}
        height={this.playerHeight} /> 
    </div>
}

This will probably change as to game progresses, but at the moment, it just renders to two constituent components. We're also responding to KeyDown here, so let's have a look at onKeyDown:

onKeyDown(e) {
    switch (e.which) {
        case 37: // Left
            this.playerMove(this.state.playerX - this.SPEED, this.state.playerY); 
            break;
        case 38: // Up
            this.playerMove(this.state.playerX, this.state.playerY - this.SPEED);
            break;
        case 39: // Right
            this.playerMove(this.state.playerX + this.SPEED, this.state.playerY); 
            break;
        case 40: // Down
            this.playerMove(this.state.playerX, this.state.playerY + this.SPEED);
            break;
        default:
            break;
    }
} 

playerMove(x, y) {
    this.setState({
        playerX: x,
        playerY: y
    }); 
}

We're storing the players position in state; as I detailed here, this enables us to update the state and have React update the screen as it detects a change in the Virtual DOM.

Game Components

In an effort to stay as close as possible to React's preferred architecture, the components of the game (the background and the cars for now) will be, well, components. The background is easy:

import React from 'react';
function Background(props) {
    const bgStyle = { 
        width: `calc(${props.windowWidth}px)`, 
        height: `calc(${props.windowHeight}px)`, 
        top: 0,
        left: 0,
        position: 'absolute'
    };
    return (
        <img src={props.backgroundImage} style={bgStyle} />
    );
}
export default Background;

We're basically just displaying an image here. One thing that's worth noting is that the windowWidth and windowHeight are properties, not state. They do exist as state in the Game component and, when they change, are updated there, and so updated here. The React guys call this Lifting State.

The car component is exactly the same idea:

import React from 'react';
function Car(props) {
    const left = Math.round(props.centreX - (props.width / 2));
    const top = Math.round(props.centreY - (props.height / 2));
    const carStyle = { 
        width: `calc(${props.width}px)`, 
        height: `calc(${props.height}px)`, 
        top: `calc(${top}px)`,
        left: `calc(${left}px)`, 
        position: 'absolute',
        zIndex: 1 
    };
    return (
        <img src={props.carImage} style={carStyle} />
    );
}
export default Car;

There are a number of advantages to this idea of maintaining the state in a higher component; for example, this way, you can share a single state between components; however, the biggest advantage for us is that, while the components are, effectively, intelligent sprites, you can easily create an "EnemyCar" version of the Car component.

It's worth bearing in mind that, because the position of the car doesn't exist in this component as state, we wouldn't be able to change it here, even if we wanted to. The strategy to get around this is to have an update function passed in as a property (effectively a function pointer that you can call from within the child component).

In the next post, I'm going to update the movement so it's a little more car-like, and introduce some obstacles.

References

  • https://reactjs.org/docs/components-and-props.html
  • https://stackoverflow.com/questions/43503964/onkeydown-event-not-working-on-divs-in-react
  • https://stackoverflow.com/questions/37440408/how-to-detect-esc-key-press-in-react-and-how-to-handle-it/46123962
  • https://reactjs.org/docs/lifting-state-up.html
  • https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
React (JavaScript library)

Published at DZone with permission of Paul Michaels, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Performance Optimization Strategies in Highly Scalable Systems
  • Spring Boot and React in Harmony
  • Common Problems in Redux With React Native
  • Tracking Bugs Made Easy With React.js Bug Tracking Tools

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: