HTML5 Game Physics Velocity

HTML5 Game Physics Position And Velocity

This tutorial is the first in a series about HTML5 game physics. The HTML5 canvas element will act as a stage for all game characters. JavaScript will be used for game logic and updating canvas items.

The first tutorial will draw a simple rectangle that will act as a game character. The character will move horizontally across the canvas. The code is based on an article by Hunter Loftis for Skookum Digital Works titled “Physics for Lazy Game Developers”.

This series is intermediate and assumes basic knowledge of physics and 2D graphics. The character position is determined by static velocity multiplied by displacement that is calculated every frame loop. 2D graphics require separate x and y velocities.

This tutorial uses the HTML5 canvas tag and JavaScript.

Text editor.
Folder for web server.
Browser to view output.

HTML5 Game Physics Position & Velocity File

<!--
   HTML5_Game_Physics_Position_And_Velocity.html
   
   Copyright 2013 edward <http://Ojambo.com>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->


<!DOCTYPE html>
<html xml:lang="en" lang="en">

<head>
	<title>Ojambo.com HTML5 Game Physics Position And Velocity</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
		canvas#myCanvas {
			width: 80%;
			height: 80%;
			background: green;
			}
	
	</style>
</head>

<body>
	<p>Canvas Character Position & Velocity</p>
	<canvas id="myCanvas"></canvas>
		<script type="text/JavaScript">
		// Position, Size & Velocity
		var rect = {
			x: 0,
			y: 0,
			w: 20,
			h: 20,
			vx: 1,
			vy: 0
		};
					
		// Find <canvas> element
		myCanvas=document.getElementById("myCanvas");
		// Call getContext() method and pass 2d string
		ctx=myCanvas.getContext("2d");		
		
		// Update Every 20 milliseconds
		setInterval(function(){ draw();},20);	
		
		function draw() {			
			// Clear display
			ctx.save();
			ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
			ctx.restore();
			
			// Apply velocity to position (vx -> x)
			rect.x += rect.vx;
			rect.y += rect.vy;
			
			// Draw onto the canvas
			ctx.save();
			// Fill style red <CSS color, a gradient, or a pattern>
			ctx.fillStyle="#FF0000";
			// Rectangle fillRect(x,y,width,height)
			ctx.fillRect(rect.x,rect.y,rect.w,rect.h);
			ctx.restore();
		}
	</script>
</body>

</html>

The canvas element is styled with CSS in order to determine observe the character position. The canvas object is found by its unique identifier in JavaScript. The character parameters for x and y position, width and height, and x and y velocity are stored in a JSON object called “rect”.

2D drawing for the canvas is enabled using the “getContext” method. The “setInterval” method updates the canvas every 20 seconds. The draw function clears the canvas, updates the character position via the velocity x value, and redraws the character.

How to Use:

Observe the canvas.
Observe the character moving across the canvas.

Demonstration:

Ojambo.com HTML5 Game Physics Velocity Tutorial

Image Missing — Ojambo.com HTML5 Game Physics Position & Velocity

Conclusion:

HTML5 game development requires the use of the canvas element. JavaScript is used to create canvas characters and program the game logic.

A unique identifier can be used in order to target the specific canvas element. Character movement can be based on game physics created using JavaScript.

Style the canvas using CSS.
Hold all character parameters in a JSON object.
Use a unique identifiers to target the canvas element.