mobeamer

Saturday, May 12

Bouncing Box:

Some of my students asked me to show them some "game programming" code.

I started off by showing them a simple canvas program, that uses HTML5 and the canvas tag to create a bouncing box.

Take a look at the following code.

<html> <body> <canvas id="mapCanvas" width="300" height="300" style="position:absolute; top:110px; left:0px; width:300px; height:300px; border:5px solid black;"></canvas> <script> var x = 0; var y = 0; var xVel = 3; var yVel = 0; function animate() { var canvas = document.getElementById("mapCanvas"); var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "blue"; context.fillRect(x, 10, 25, 25); x = x + xVel; if(x > 300) { xVel = -3; } if(x < 0) { xVel = 3; } requestAnimFrame(function(){ animate(); }); } window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); animate(); </script> </body> </html>

mobeamer

Saturday, May 12

0 comments:

Post a Comment

Followers

The Lab - Free Code

Favorite Posts

Posts by Category

Past Posts

Game Dev Blogs

Blogs I roll With

Must Read/Visit

Future Reading