LESSON 7 - April 10, 2013

HTML5 GAME DEVELOPMENT

Operation C.A.N.T (Canvas Ain't No Thang) LESSON # 7

Ben W. Savage

So one week of HTML5 has passed! How does it feel so far? You've learned a lot in six days and probably need a chance to work a bit with what you have before we move on to the new stuff. Therefore, today I'll be doing three little mini-exercises using elements from what we've already learned.

Now we're not talking Legend of Zelda here, just a simple drawing or animation exercise aimed at letting you get a little practice with all those commands!

Let's dive into it right away and make what will become THIS:

<!doctype html>
<title>DAY SEVEN EXPERIMENT </title>
<style>

canvas
{
background-color: #00cc00;
}

</style>
<canvas id = "canvas" width="410" height="400"></canvas>
<script>

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

context.fillStyle = "990000";
context.font = "20px Verdana";
context.fillText("Don't eat candy - it'll rot your teeth!", 10,50);

context.shadowColor = "#000000";
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;

context.strokeStyle = "#0000ff";
context.fillStyle = "#ffffff";
context.moveTo(200,100);
context.lineTo(250,150);
context.lineTo(200,200);
context.lineTo(200,300);
context.quadraticCurveTo(175,125,150,300);
context.lineTo(150,200);
context.lineTo(100,150);
context.lineTo(150,100);
context.quadraticCurveTo(175,125,200,100);
context.fill();

</script>

Now this may be the longest bit of code you've written so far, but you should by no means get freaked out about it: everything you see here is a tool you've worked with before. Let's take a minute to see what we're dealing with:

In fact, I'll make a little checklist:

Lines? Check.
Quadratic Curves? Check.
Text? Check.
Drop Shadows? Check.
Fonts? Check.

And that's basically it.

A couple important things to you should note here:

  1. I changed the canvas width (remember me on the top of the screen?) to 410 because our standard width of 550 made the composition of my masterpiece a bit lopsided. I like to base my compositions and subject matter on the paintings of Poussin as you can see.
  2. I've added the text BEFORE assigning the drop shadow in the code. Adding it afterwards would cause the text to be drop-shadowed as well and we don't want that!
  3. I've given the canvas background a nice green color.

Now why don't you try to improve upon this little drawing I made? Why don't you change the text or make the tooth bigger? Change the background color or the canvas color! Add a second tooth, or HECK, a whole mouth full of teeth! Sky's the limit! It all really depends on your artistic prowess and, most of all....PATIENCE! By the way, has anyone ever heard of a website which offers a bunch of pre-plotted points? To be honest, I've never looked, but it's a cool idea, right??

Here, let me check now...

Nope couldn't find anything. Anyone know if these things exist?

Anyway, a great exercise that I've always found useful is to take the complete source code of someone's game/work/whatever and go in and mess around with it. Go ahead and tweak some stuff! I mean, you're not going to be selling them, I hope!

So again, dig into my multi-billion dollar, top secret source code listed above and get tweakin'! When you're ready we'll try another example... this time with a bit of animation.

And here's code example #2!


<!doctype html>
<title>DAY SEVEN EXPERIMENT </title>
<style>

canvas
{
background-color: #000000;
}

</style>
<canvas id = "canvas" width="550" height="400"></canvas>
<script>

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

var increment = 10;
setInterval(drawMe,50);

function drawMe()
{

var myImage = new Image();
myImage.src = "BenShoe.jpg";
context.drawImage(myImage,0,0);

context.fillStyle = "ffffff";
context.fillRect(50,0,10,increment);
context.fillRect(100,0,10,increment);
context.fillRect(170,0,10,increment);
context.fillRect(320,0,10,increment);

context.fillRect(0,10,increment,10);
context.fillRect(0,100,increment,10);
context.fillRect(0,200,increment,10);
context.fillRect(0,240,increment,10);
context.fillRect(0,330,increment,10);
context.fillRect(0,390,increment,10);

context.fillStyle = "0000ff";
context.fillRect(0,350,550,50);

context.fillStyle = "000000";
context.font = "18px Arial";
context.fillText ("PRISON: It's where you go if you don't study Ben's tutorials!!",20,390);

increment += 10;
}
</script>

This one is a fun gag to play on your pals! Ok, so maybe not, but it's SORTA funny.....right? Notice that when you run this it won't work UNLESS you happen to have a .jpg called BenShoe in the SAME directory as your html file (which frankly would be a little creepy!).

Anyway, to add your buddy's picture, all you need to do is get an image, scale it down to 550 width and 400 height (the dimensions of your canvas), save it in the same directory as your html file, and when your buddy comes over ask him/her to refresh the page. A MILLION LAUGHS! HAHAHAHAHAHHAHA!

YOUR FRIEND GOT SENT TO PRISON FOR NOT STUDYING MY TUTORIALS! Boy, did you show your friend!

So catch your breath after laughing so hard and let's examine the code:

We have a bunch of rectangles zooming across the stage. In some we're increasing the width and in some we're increasing the height. All stop at the margins of the canvas and work their way inward. We've set up a setInterval timer to run the drawMe function every 50 milliseconds and we've created a global variable (outside the function, that is) which establishes our increment. We've also added a += to our value of increment so every time you run the drawMe function, increment is increased by 10. We then plug the increment into the width values of some rectangles and the height values of other rectangles. This makes them appear to stretch across the screen.

Pretty straightforward, no?

We then established a new fillStyle and added a blue rectangle with a width of 550 (all across the canvas) and a height of 50. We put this blue rectangle at the bottom of the screen to serve as a backdrop for our text. We didn't NEED to do this, but we'd be risking the text becoming illegible if the image being used is too dark for our dark text! Of course, you can customize this stuff yourselves.

Then the text was added. We decided a color, size and a font-family. We then plugged in the silly text in quotation marks in our fillText method. We then proceeded to assign an X value of 20 and a Y value of 390.

And that's IT!

I mean, it's a silly little example, but it uses some fundamental tricks we've learned in the past six lessons.

Now let's move on to our last example:

<!doctype html>
<title> DEATH STAR</title>
<canvas id = "canvas" width = "550" height = "400"></canvas>
<style>
canvas
{
background-color: #ffffff;
}
</style>

<script>

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

var startValue = 0;


setInterval(repeatMe,100);



function repeatMe()
{
context.lineWidth = 3;
context.arc(250,200,180,startValue,4.28, false);
context.stroke();
startValue+= 5;
}


</script>

I'm not a big Star Wars fan, but I was messin' around with the canvas the other day and out popped this cool animation that looked like the Death Star! "Hey", I said to myself, "that looks like the Death Star!"

Here again we have our standard animation technique: we're creating an increment, applying it to the value of something, then repeating the living hell out of it until we get the desired effect.

In this mini-tutorial we repeat the living hell out of the startRadius value of our arc. As you recall, the 4th and 5th values of our arc() method were the start and end points (in radians). What's happening here is we're adding 5 to our start value, making the value, on each iteration:

0
5
10
15
20
25

Now we ain't talkin' degrees here, but RADIANS! Remember that 3.14 is half a trip around a circle and 6.28 is a complete circle. So what's happening here? Well, you tell me! Try giving the startValue a += 2 instead of a +=5 in the last line of our function.

Oooh, that's sort of creepy!

Now try giving it a value of += 10;

Ugh, it's like a giant eyeball!!

Try giving it a value of += .2 and you'll begin to see how this process works.

Then try .02 just for fun! Oooh, that would make a cool loading graphic for a game!

Now keep it at .02 and change the lineWidth to .2. Nice!

So today was sorta fun, huh? We've reinforced a lot of stuff just by trying three mini-tutorials. I haven't decided yet what tomorrow's topic is going to be: it's a toss up between event listeners and transformations. Any suggestions? I'm all ears! Tweet me @benwhi with any ideas you may have!

So stay tuned! As always, thanks for following along! Code didn't work for you? Hate me? Are you my illegitimate child? Send input anytime!

Until tomorrow!

-Ben
@benwhi
Onward to Lesson Eight!
Back to Lesson Six
Back to Index