HTML’s Canvas is pretty neat, and I’m learning more and more about it. One of the things I made real quickly was a little game where a circle randomly switches spots every second and you have to click on it as many times as you can.
Here’s what your making.
The first thing we need to do is is make sure we start out with a good doctype and xhtml markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
Next we assign our public variables
var framerate = 1000; //how fast the circle moves (in milliseconds)
var difficulty = 50; //millisecond subtraction from framerate
var canvas = null; //canvas element
var context = null; //the acutal thing we're writing too
var score = null; //score variable to track the.....score
var mouseX; //the mouse's X location
var mouseY; //the mouse's Y location
var oldCX = null; //old value of circle's X value
var oldCY = null; //old value of circle's Y value
var cX = null; //The circles X location
var cY = null; //The circles Y location
Next comes our initialization function that’s going to run when the page loads. Here we’re going to write to the canvas and context elements, and throughout the script we’re going to write to the context of the canvas element, and not the canvas element itself.
function init()
{
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
runner();
}
init() also calls our next function, runner(). This will be the main function that will (Clear the Canvas, Draw the Objects, and finally run itself).
function runner()
{
clearCanvas();
drawObjects();
setTimeout("runner()",framerate);
}
Next we want to draw the object of the circle to the screen
function drawObjects()
{
cX = Math.floor(Math.random()*canvas.width); //Random number between the width of the canvas
cY = Math.floor(Math.random()*canvas.height);
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath(); //tell it we're starting a path
context.arc(cX,cY,50,0,Math.PI*2,false); //arc(X,Y,radius,starting angle, ending angle, something else)
context.closePath(); //finish the path call
context.stroke(); //write the path to the context (ie canvas)
context.fill(); //do our fill
}
And finally in our script we have our Score function, clearing of the canvas function, and our mouse handler functions (for movement, clicking, etc).
function updateScore()
{
score += 1;
document.getElementById("score").innerText = score;
document.getElementById("speed").innerText = framerate;
}
function clearCanvas()
{
context.clearRect(0,0,canvas.width,canvas.height);
context.beginPath();
}
function handleMouseMove(event)
{
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
}
function handleMouseOut(event)
{
mouseX = null;
mouseY = null;
}
function handleMouseClick(event)
{
if (Math.abs(cX-mouseX) <= 50 &amp;amp;amp;&amp;amp;amp; Math.abs(cY-mouseY) <= 50
&amp;amp;amp;&amp;amp;amp; cX != oldCX &amp;amp;amp;&amp;amp;amp; cY != oldCY)
{
oldCX = cX;
oldCY = cY;
updateScore();
framerate-=difficulty;
}
}
</script>
And our html, make sure you specify the width and height of canvas!
</head>
<body>
<body onload="init()">
<div id="score">0</div>
<div id="speed">Current Speed: 0</div>
<canvas id="myCanvas" width="400" height="400" <!-- You MUST specify the width and height -->
onmousemove="handleMouseMove(event)"
onmouseout="handleMouseOut(event)"
onclick="handleMouseClick(event)"
/>
</body>
</html>
And here it is all together:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script>
var framerate = 1000; //how fast the circle moves (in milliseconds)
var difficulty = 50; //millisecond subtraction from framerate
var canvas = null; //canvas element
var context = null; //the acutal thing we're writing too
var score = null; //score variable to track the.....score
var mouseX; //the mouse's X location
var mouseY; //the mouse's Y location
var oldCX = null; //old value of circle's X value
var oldCY = null; //old value of circle's Y value
var cX = null; //The circles X location
var cY = null; //The circles Y location
function init()
{
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
runner();
}
function runner()
{
clearCanvas();
drawObjects();
setTimeout("runner()",framerate);
}
function drawObjects()
{
cX = Math.floor(Math.random()*canvas.width); //Random number between the width of the canvas
cY = Math.floor(Math.random()*canvas.height);
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath(); //tell it we're starting a path
context.arc(cX,cY,50,0,Math.PI*2,false); //arc(X,Y,radius,starting angle, ending angle, something else)
context.closePath(); //finish the path call
context.stroke(); //write the path to the context (ie canvas)
context.fill(); //do our fill
}
function updateScore()
{
score += 1;
document.getElementById("score").innerText = score;
document.getElementById("speed").innerText = framerate;
}
function clearCanvas()
{
context.clearRect(0,0,canvas.width,canvas.height);
context.beginPath();
}
function handleMouseMove(event)
{
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
}
function handleMouseOut(event)
{
mouseX = null;
mouseY = null;
}
function handleMouseClick(event)
{
if (Math.abs(cX-mouseX) <= 50 && Math.abs(cY-mouseY) <= 50
&& cX != oldCX && cY != oldCY)
{
oldCX = cX;
oldCY = cY;
updateScore();
framerate-=difficulty;
}
}
</script>
</head>
<body>
<body onload="init()">
<div id="score">0</div>
<div id="speed">Current Speed: 0</div>
<canvas id="myCanvas" width="400" height="400" <!-- You MUST specify the width and height -->
onmousemove="handleMouseMove(event)"
onmouseout="handleMouseOut(event)"
onclick="handleMouseClick(event)"
/>
</body>
</html>
