CSS is very cool, but Canvas has its place also. There are a few different ways to work with Canvas, and I'll show you one here. The game looks the same, so I grabbed a graphic from Wikipedia when they weren't looking.
So basically instead of pushing around a bitmap, we'll create a canvas in HTML5 and then draw on it using the Canvas Arc method. This is only a few more lines than the CSS version, and runs just as fast. And, again, this runs in all browsers.
Here is the code, in glorious HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Canvas Bounce Draw Circle
</title>
<script>
// Global variables
var canvas;
var ctx;
var boardWidth = 320;
var boardHeight = 460;
var ballHor = boardWidth / 2;
var ballVer = boardHeight /2;
var changeHor = 10;
var changeVer = 10;
// Listen to that page load!
window.addEventListener("load", getLoaded, false);
// Run this when the page loads.
function getLoaded(){
// Make sure we are loaded.
console.log("Page loaded!");
// Load the image and the canvas.
loadMyImage();
// Start the game loop.
gameLoop = setInterval(doMainLoop,16);
}
// This will run every 16 milliseconds.
function doMainLoop(){
// Clear the canvas.
ctx.clearRect(0,0,boardWidth,boardHeight);
ballMove();
}
function ballMove() {
// Changes are calculated but do not
// take effect until next time through loop.
// Calculate new vertical component.
ballVer = ballVer + changeVer;
// If top is hit, change direction.
if (ballVer + changeVer < -10)
changeVer = -changeVer;
// If bottom is hit, reverse direction.
if (ballVer + changeVer > boardHeight - 10)
changeVer = -changeVer;
// Calculate new horizontal component.
ballHor = ballHor + changeHor;
// If left edge hit, reverse direction.
if (ballHor + changeHor < -10)
changeHor = -changeHor;
// If right edge is hit, do something.
if (ballHor + changeHor > boardWidth - 10)
changeHor = -changeHor;
// Draw a ball using canvas arc function.
ctx.beginPath();
ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "Fuchsia";
ctx.fill();
}
// Load the image and the canvas.
function loadMyImage() {
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext) {
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="320" height="460">
</canvas>
</body>
</html>
There are lots of books written about Canvas and you can always get started at the W3 Schools: http://www.w3schools.com/html/html5_canvas.asp
Essentially, this code can be divided into parts:
- HTML5 shell - standard, except Firefox OS likes to know about UTF-8.
- JavaScript that defines some global variables and defines a page load event.
- An initial function that loads the canvas and starts the game loop.
- A game loop function that erases the screen and draws the ball.
- A function that calculates what's next and moves the ball.
- A function that loads the canvas.
- A canvas element in the body that defines the canvas size.
Here's how it works:
Shell and Globals and Page Load
The shell is just your standard HTML5 shell. Nothing special to see here, but be sure to give it a title and specify UTF-8 (unless you are working with other kinds of UTF).
The canvas and its context (ctx) are defined as global so they can be accessed anywhere. Sometimes globals are good. The size of the screen (board), position of the ball, and the amount of change are defined.
An event handler is created that will detect when the page is loaded. I always do this because I want to make sure everything is loaded before I start calling JavaScript. In the CSS ball bounce, I used the onload function in the body but event listeners are cooler.
Initial Function
You call two functions here (and I added a console output in case you want to make doubly sure the page loaded).
First the function is called that defines the canvas. You do this once.
Next you call the game loop, which will run every 16 milliseconds. You can mess with this number, but it seems to work with the way that browsers are programmed. Or maybe it's just a memory of that time when you were sweet 16?
Game Loop
This just does two things:
- Clear the screen.
- Call a function to draw the ball.
Anyway, the loop just goes around and around, each time clearing the screen and drawing the ball in a new place. For fun, don't clear the screen and watch it fill up with ball images.
Drawing the Ball
This is the good part. Canvas has some drawing commands, like line, square, and arc. They don't have a circle command, but you can draw a circle with the arc method (arcs are just parts of a circle, so make it go around all wthe way). You can find out more about arc here. Of course, there's a W3C canvas specification, but it's written for browser manufacturers, not web monkeys like you and me.
So drawing the ball has some similarities to the CSS bouncing ball. Calculate the move, and draw the circle. The difference here is that instead of blasting with a bitmap, you draw a circle.
ctx.beginPath();
ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "Fuchsia";
ctx.fill();
This is a pretty standard canvas procedure. All your methods are attached to the canvas context (ctx, defined in the function below). Follow this for painting with a method:
- Arc is really a way to define a path. So you need to begin the path first.
- The arc method needs the ball x and y position, radius, and three other standard variables.
- Then you close the path. Otherwise the horse will get out of the barn!
- Then define your color with the fillStyle method (isn't Fuschia fun to spell?).
- Finally, use the fill method to make it happen.
Loading the Canvas
Getting a canvas to work is not that hard, it just takes a few steps:
- Define the canvas in the body.
- Load the canvas into the web page.
- Get the context of the canvas.
- Make sure you get the context!
Next, do an if statement to make sure you get the canvas. In that statement, use the canvas.getContext method and assign it a name (ctx is popular). Specify that you want a "2d" canvas. 3D is coming but I'm not sure how well it is supported and I'm only looking at 2D games right now.
You want to make sure you got the context. It's like page load. You'll appreciate it the first time you make a typo or forget to define the canvas tag in the body.
Canvas Element in the Body
Just put the canvas element in the body. Give it a size and id. The position of the canvas is determined by the flow of the page, but wherever it is, once you have its context, you can blast away on it. Think of canvas as its own little world. You can draw on it and every HTML5 browser supports it.
That's it for now. This seems to run as fast as the CSS ball bouncing, but I haven't done any precise tests yet. It runs fast enough to convince me I can do an action game with Canvas or CSS.
So far, the advantage goes to CSS, because I don't care about what's on the screen and I don't erase anything. In CSS I just move the ball, but in Canvas I have to clean up after the ball moves. Well, maybe that's like taking care of a cute little puppy.
Next time: what if you have other stuff on the Canvas screen and don't want to erase everything?
No comments:
Post a Comment