How to Add Drag Effects to Your HTML5 Game - dummies

How to Add Drag Effects to Your HTML5 Game

By Andy Harris

The vector addition principle can be useful to your HTML5 game in many ways. For one, it can add drag effect and thus, lead to more accurate land-vehicle behavior. Imagine your car is stuck in a bad neighborhood in the middle of the night (again). You can’t simply change the position of the car directly. You can’t even change its motion.

What you have to do instead is add a force. When you add force, you slowly add to the motion vector. Eventually, the car starts moving. If you stop applying force, it will eventually stop as wind resistance and rolling resistance slow the car down.

Gaming drag races

The drag.html example shows a realistic car that accelerates slowly and slows to a stop as the accelerator (in this case, the up arrow) is released.


You’ll really need to see the program in action to appreciate its behavior.

<html lang="en-US">
 <meta charset="UTF-8">
 <script type = "text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
 var game;
 var boat;
 function Car(){
  tCar = new Sprite(game, "car.png", 100, 50);
  tCar.checkKeys = function(){
   if (keysDown[K_LEFT]){
   if (keysDown[K_RIGHT]){
   if (keysDown[K_UP]){
    this.addVector(this.imgAngle, 2);
  //move in the current direction
   this.addVector(this.imgAngle, 2);
  } // end checkKeys
  tCar.checkDrag = function(){
   speed = this.getSpeed();
   speed *= .95;
  } // end checkDrag
  return tCar;
 } // end car def
 function init(){
  game = new Scene();
  car = new Car();
 } // end init
 function update(){
 } // end update
<body onload = "init()">

How to implement drag in your game

This version uses a more realistic force-based motion. When the user presses the up arrow, the car builds up speed. If the user leaves the up arrow pressed, the car reaches a top speed naturally. When the user releases the up arrow, the car gradually slows and eventually stops. Force vectors are the key.

Here’s how it works:

  1. Build a basic vehicle.

    Create a custom sprite with a checkKeys() method, and check for all the normal arrow keys. The code for checking left and right arrows is exactly what you expect.

  2. Move forward with a force vector.

    The code for moving forward is slightly different. Rather than simply modifying the speed directly, apply a force in the car’s current direction. Use the sprite’s getImgAngle() method to determine which direction the car is pointing, and add a small force in that direction.

  3. Create a checkDrag() method.

    Cars don’t just keep going without power. Wind and ground resistance will slow them down, and eventually they will stop. Simulate the various drag forces by adding a checkDrag() method to your object.

  4. Multiply the speed by a drag factor.

    For this example, the various drag forces will rob the car of 5 percent of its speed every frame. Remember that the game is running at 20 frames per second, so the drag force is quite substantial. You can achieve the drag effect in many ways, but the easiest way is to multiply the car’s speed by some value smaller than 1.

  5. No brakes!

    What self-respecting arcade car has brakes? Seriously, you might want to add a down-arrow input, but it shouldn’t be necessary because the car will slow down on its own.

  6. Season to taste.

    This example provides a rough outline, but you can modify a number of values to get exactly the car performance you want. You can simulate a more powerful engine (or a smaller mass) by increasing the force vector when you press the accelerator.

    You can simulate a more responsive suspension by altering the turning rate if the user presses the right or left arrows. You can also simulate a more or less efficient car by modifying the drag ratio. Right now, the car turns at any speed, but you can prevent left- and right-arrow inputs if the car is below a certain speed.