Create Your Own 3D HTML Game: A Beginner's Guide

<!DOCTYPE html>
<html>
<head>
<title>3D HTML Game: A Beginner's Guide</title>
<style>
* { margin: 0; padding: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
<script>
// Setup the canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
<p>// Sprite objects
var player = {
speed: 256, // Movement in pixels per second
x: 0,
y: 0
};</p>
<p>// Handle keyboard controls
var keysDown = {};
addeventListener('keydown', function (e) {
keysDown[e.keyCode] = true;
}, false);</p>
<p>addeventListener('keyup', function (e) {
delete keysDown[e.keyCode];
}, false);</p>
<p>// Reset the game when the player catches a monster
var reset = function () {
player.x = canvas.width / 2;
player.y = canvas.height / 2;
};</p>
<p>// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
player.y -= player.speed * modifier;
}
if (40 in keysDown) { // Player holding down
player.y += player.speed * modifier;
}
if (37 in keysDown) { // Player holding left
player.x -= player.speed * modifier;
}
if (39 in keysDown) { // Player holding right
player.x += player.speed * modifier;
}
};</p>
<p>// Draw everything
var render = function () {
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);</p>
<pre><code>// Render the player
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect(player.x, player.y, 32, 32);
</code></pre>
<p>};</p>
<p>// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;</p>
<pre><code>update(delta / 1000);
render();

then = now;
</code></pre>
<p>};</p>
<p>// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
</script></p>
</head>
<body>
</body>
</html>