Build a game using the DOM – Part 2

February 5th, 2012

In part two of building our game, we’re going to give our blue block or ship the ability to shoot lasers. But first we have to make a couple of changes in our code from part one in order to make the game easier to build and control the game’s elements. Right now, the play area and the ship are two separate elements in the body tag, but we’re going to change this so that the ship div is inside the playArea div. So, here’s our old block of code setting up the game:

1
2
3
4
5
6
7
8
9
10

document.body.appendChild(playArea);
playArea.classList.add('playArea');
document.body.appendChild(ship);
ship.classList.add('ship');
shipPos.x = (playArea.offsetWidth / 2 + playArea.offsetLeft) - (ship.offsetWidth / 2);
shipPos.y = (playArea.offsetHeight + playArea.offsetTop) - (ship.offsetHeight * 2);
playArea.leftBoundary = playArea.offsetLeft + 10;
playArea.rightBoundary = (playArea.offsetLeft + playArea.offsetWidth - 10) - ship.offsetWidth;
playArea.topBoundary = playArea.offsetTop + 10;
playArea.bottomBoundary = (playArea.offsetTop + playArea.offsetHeight - 10) - ship.offsetHeight;

Change it to this:

1
2
3
4
5
6
7
8
9
10

document.body.appendChild(playArea);
playArea.classList.add('playArea');
playArea.appendChild(ship);
ship.classList.add('ship');
shipPos.x = (playArea.offsetWidth / 2) - (ship.offsetWidth / 2);
shipPos.y = playArea.offsetHeight - (ship.offsetHeight * 2);
playArea.leftBoundary = 0;
playArea.rightBoundary = playArea.offsetWidth - ship.offsetWidth - 20;
playArea.topBoundary = 0;
playArea.bottomBoundary = playArea.offsetHeight - ship.offsetHeight - 20;

The main changes are, instead of document.body.appendChild(ship), we have playArea.appendChild(ship) which puts the ship div inside the playArea div. Next, we change how we set the boundaries of the play area because now that the ship div is inside, we don’t need to get the offsetLeft and offsetTop any more. But for this to work the way we want, we still need to update the CSS:

1
2
3
4
5
6
7
8
9
10

.playArea {
width:800px;
height:500px;
background:#000;
border:10px solid #333;
margin:30px auto 0;
box-shadow:5px 5px 10px #444;
position:relative;
overflow:hidden;
}

Setting the position to relative allows us to absolutely position elements inside the playArea div and setting overflow to hidden allows us to have elements move past the borders and not be seen anymore. Now, let’s add those lasers. First, we need some CSS:

1
2
3
4
5
6

.laser {
width:4px;
height:20px;
background:red;
position:absolute;
}

Pretty much the same as our ship class, except laser shaped. Next we need to add some variables to our JavaScript, add these to the end of the list of variables at the top of the code:

1
2
3

lasers = [],
laserSpeed = 4,
max_lasers = 5

First, we have an array to store our lasers in, so we can loop through it to update our lasers’ positions. Next, laserSpeed is self-explanatory, we set it up here so that it’s easier to change than if we had set it further down in the code. Also, this way we could alter it in game if we want to.

We set it so when the player presses the x key, the ship will fire a laser. Why x? Because the spacebar can be loud and annoying and x is always cool. Add this code to the bottom of the keyDown function:

1
2
3
4
5
6
7
8
9
10

if (e.keyCode === 88) {
if (lasers.length < max_lasers) {
var laser = Laser();
lasers.push([laser, shipPos.y]);
playArea.appendChild(lasers[lasers.length - 1][0]);
lasers[lasers.length - 1][0].classList.add('laser');
lasers[lasers.length - 1][0].style.top = lasers[lasers.length - 1][1] + 'px';
lasers[lasers.length - 1][0].style.left = shipPos.x + 25 + 'px';
}
}

So, if x, which has the keyCode of 88, is pressed and if the total amount of lasers in the lasers array is less than max_lasers, then we call a function called Laser, which we’ll write next. Then we push the variable laser into our lasers array along with the ship’s y position. Next, the laser is added to the playArea div using appendChild. Then we add the class of laser to that div and set it’s top and left position.

You might be wondering why it says lasers[lasers.length - 1]. Remember that a JavaScript array starts at zero, so the first element of an array is lasers[0]. So, if we want to get the newest element in the array, it will be the last one, but if our array has one element and we put lasers.length, that will equal one and give us lasers[1]. But that would give us the second element which doesn’t exist in this example, we want lasers[0], so lasers[lasers.length - 1] will always give us the one we want in this situation.

Now we need to write that Laser function:

1
2
3

function Laser() {
return document.createElement('div');
}

Yes, it’s that simple and we could just put:

1	var laser = document.createElement('div');

But let’s say later on we need something else to happen when a div is fired, this will be the place to do it. Also, it helps to keep the code organized. Now, if you run the game, the lasers will be added but they’ll just sit there and that doesn’t make a very good offensive weapon. Now we need a function to move the lasers:

1
2
3
4
5
6

function moveLasers() {
for (var i = 0; i < lasers.length; i++) {
lasers[i][1] -= laserSpeed;
lasers[i][0].style.top = lasers[i][1] + 'px';
}
}

This function just runs a for loop that cycles through all the elements in the lasers array and moves them up the playArea at whatever laserSpeed is set to. Of course, to make this work, we need to call it in the loop function:

1
2
3
4
5

function loop() {
moveShip();
moveLasers();
setTimeout(loop, 1000/60);
}

This works but we have one problem, when a laser goes past the top of the playArea, it keeps going forever and once five lasers are fired, the player can’t fire any more. We need to add something to our moveLasers function to check if a laser has left the viewable area.

1
2
3
4
5
6
7
8
9
10

All we need is an if statement that checks if the laser has passed the top of the playArea and if it has, it removes it from both the DOM and from the lasers array which allows the player to shoot another laser.

That’s it. Now we have a ship that looks like a blue square, for now, that shoots lasers that look like red rectangles, for now. You can check out the demo here. In part 3, we’ll add some enemies to shoot at or else this will be one of the most boring games of all time.

Tags: dom-game, game, javascript
Posted in javascript | No Comments »

Get the style property’s value of an element using JavaScript

February 2nd, 2012

Here’s a quick one. Let’s say you need to get a style property value using JavaScript, it’s actually not that complicated. But, of course, in true JavaScript fashion, the names of the methods are a bit clunky. First we have a div:

1	<div class="box"></div>

Then we have our CSS:

1
2
3
4
5

.box {
width: 400px;
height: 300px;
border: 10px solid black;
}

Now, let’s say that we want to get the width of the border that’s on our div with the class of box, we only need two lines to get it:

1 2	var box = document.querySelector('.box'); var borderWidth = window.getComputedStyle(box, null).getPropertyValue('border-width');

What’s going on here? First off, we’re finding our div in the DOM and assigning it to the variable box. Next, we’re declaring a new variable called borderWidth. Next we use a method called getComputedStyle and passing it our box variable, which gets all the style information of that element. Next we use the getPropertyValue method to get the value of the border width. Console.log that our and you’ll get ‘10px’. We could even turn this into a function that could be used any time we need it:

1
2
3
4

function getStyle(el, prop) {
return window.getComputedStyle(el, null).getPropertyValue(prop);
}
var borderWidth = getStyle(box, 'border-width');

This was actually a bit tricky to figure out because I knew about the getPropertyValue method but I didn’t know about getComputedStyle, which you need for this to work.

Tags: javascript
Posted in javascript | No Comments »

Build a game using the DOM – Part 1

January 29th, 2012

When I first became interested in building games using the browser and not Flash, I saw the examples people had made using HTML5’s canvas element so I started learning to build things with that. But every once in a while I’d see someone saying, “Canvas is cool but I prefer using the DOM to build my game.” Use the DOM? The DOM is for displaying pictures and text, not for guys to jump on monsters or space ships to shoot lasers at giant octopus aliens. But then I noticed something, jQuery animations look pretty smooth, especially in Chrome and Firefox, so why couldn’t the browser render a ship flying around in space? So, let’s give it a shot. I’m going to use pretty much the same code as I used in my canvas game tutorial but adapt it for the DOM.

For the first part, we’re going to get a box that will eventually become a ship to move around a playing area. If you’re following this tutorial, I’m going to guess you’ve had a bit of experience with HTML and you’re thinking that we’ll be starting with some divs and go from there. We’re actually going to create everything using JavaScript and style it with CSS which I think will give us more control over what we’re displaying. First off, our CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

body {
margin:0;
padding:0;
background:#888;
}
.playArea {
width:800px;
height:500px;
background:#000;
border:10px solid #333;
margin:30px auto 0;
box-shadow:5px 5px 10px #444;
}
.ship {
width:50px;
height:50px;
background:blue;
position:absolute;
}

Nothing special here, this just creates am 800 by 600 playing area and our ship will be a 50 by 50 blue box, just like a real space ship. Don’t worry, we’ll change it in a later part, this is to just get things going and prove it can work. Enough with boring CSS, let’s see some JavaScript! Here’s our variables:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function () {
var playArea = document.createElement('div'),
ship = document.createElement('div'),
shipPos = {
x: 0,
y: 0
},
shipSpeed = 4,
key = {
right: false,
left: false,
up: false,
down: false
},
shipWidth = ship.offsetWidth,
shipHeight = ship.offsetHeight;

})();

First off, all our JS is going to be inside an anonymous self calling function because that’s just a good practice. This way our variables won’t affect any other code that might be on the page. Our first variable is playArea which is a div that we’ve created using the createElement method. The same goes for ship. We’ve created these elements but we haven’t added them to the document yet, so if you run just this code, nothing will show up. Next is shipPos, which is an object that we’ll use to keep track of our ship’s x and y position. shipSpeed should be pretty obvious, it’s the speed our ship is set at. The key object is used to check which arrow key is being pressed so we can tell the code to move the ship around. Finally, shipWidth and shipHeight are there to help us keep the ship in the play area boundry and we’ll use it later to see if our ship has been hit by an enemy. offsetWidth and offsetHeight gives us the height of ship that was set in the CSS, so if we want to change it, we just change the CSS and it will update in the JS. Place this next block of code right after the variables:

1
2
3
4
5
6
7
8
9
10

What is going on here? The first line adds our playArea div to the document and the next line gives it the class of ‘playArea’. The next two lines do the same thing for ship. Then the ship’s position is figured out using the position and width of playArea. And the last four lines calculate the sides of playArea so we can check when our ship touches it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

The function keyUp checks to see if one of the arrow keys has been pressed and changes the corresponding key boolean to true. keyUp checks for when that key is released and sets the value back to false. Now we have to move our ship:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

The first part of moveShip checks to see if one of the direction values is true and then moves the ship in that direction at whatever value we’ve set shipSpeed to. The next part of the function checks to see if the ship has reached one of the edges of the playArea div, if it does then the ship is kept inside the div. Finally, the actual updated position of the ship is set on the ship div.

1
2
3
4
5
6
7
8
9

document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);

function loop() {
moveShip();
setTimeout(loop, 1000 / 60);
}

loop();

Finally, we add a couple of event listeners so that our game will register when a key is pressed or released and the right function is called. Next we have a function called loop which calls our moveShip function and then has a setTimeout to call loop 60 times a second. And then to get it all started, we call loop for the first time.

You can check out the demo here.

One thing, this doesn’t work in any version of Internet Explorer because classList isn’t in IE yet. Maybe in a later part, we’ll add some compatibility but for now, I think it’s fine if this just works in the other major browsers.

Tags: dom-game, game, javascript
Posted in javascript | 2 Comments »

I really hope the future of the web is on my TV and not my phone

January 25th, 2012

I’m going to be honest with you, I hate browsing the web on my phone. I check Twitter on it, I check my email, the weather and Wikipedia but i never actually surf the web on it. And it’s not because I’m an old man and I can’t see what’s happening on the screen. It’s because there’s really only two kinds of designs you can make for small screens, ones that mimic an app or ones that are as simple a layout as you can make. Throw in the fact that some designers believe that the only devices out there are iPhones and iPads and screw the rest. Also, I think that Android phones have about a thousand different screen resolutions is going tho throw a monkey wrench in some plans.

So whenever I’m in the living room, looking something up on my phone and I realize there’s a giant screen sitting there in the room and half the time I’m barely paying attention to what it’s showing. I would love to build websites and apps for a 40” screen. I’m not talking about using a tv like it’s a giant monitor, I’m talking about something that’s a combination of the cable or satellite service we’re used to and the internet as we know it. Watch a show in fullscreen mode, see an actor you recognize but can’t remember their name, so you pop up the IMDb app and and it links to that episodes page. Or a commercial comes on, so you split the screen in half and check your RSS feed in Google Reader until your show comes back on.

I don’t know if any of this is even possible, I’ve done zero research on it. I just know what I would like and this is it. I’d love it if I could use a tablet to control the tv, a tablet that displays the controls I need to operate whatever I’m doing at the time. I’m not talking about using Apple TV and an iPad, I really think the world would be a better place if you could use any brand tv and any brand tablet. How about your coffee table has Microsoft’s Surface on it? Then you could be like the MI6 agents in Quantum of Solace!

Is the future of the web mobile? I don’t know. People have been saying to me that the desktop is dead for about 6 years now and I still see them for sale. And for about the last year or so, I’ve seen people say the laptop was dead too, killed by netbooks. Wait, that didn’t happen? Oh, right it was tablets. It’s one of those weird things, in some ways technology only moves as fast as the majority. I consider myself to be some what an early adopter and I know we aren’t the people companies make money off of. For major change to happen, the tech has to be good and affordable, I really believe Blu-ray took off because you could get a player inside your PS3, that’s the reason I have a Blu-ray player. And look at 3D tvs, they’re not taking off because everyone just bought hi-def flatscreens a couple of years ago.

So, what’s going to happen with the web? Will it be tablets? Maybe if the good ones don’t cost $800. But I’ll tell you this, if they make a tv that’s got a computer in it and I only need one cable to get both tv and the internet, that will be the future I want to live. Also, it would be nice if I could jetpack to work.

Tags: future stuff, web
Posted in general | No Comments »

Even with a name only an engineer could come up with, querySelectorAll() is pretty awesome

January 8th, 2012

One of the reasons I put up tutorials and code on this site is because if something is wrong, someone will let me know, usually within an hour or two of me posting it. I’m actually really happy with how little it happens and most of the time it’s someone pointing out something I missed or a different way of doing it. Recently, I put up a post about the JavaScript method getElementsByClassName where I talked about how it how it might now work the way you would think it should. This lead the a comment saying I should have used querySelectorAll(). So why didn’t I?

Well, the main reason was I didn’t know it could do what I wanted. In every example I’ve seen of querySelectorAll looked like this:

1	var myArray = document.querySelectorAll(‘div’);

I didn’t realize I could pass in a class name and it would select everything with that class:

1	var blueDivs = document.querySelectorAll(‘.blue’);

If you take a look at the Mozilla Developer Network page, the example it has is:

1	var matches = document.querySelectorAll("div.note, div.alert");

But up until recently, that was a huge red error message!

So what makes querySelectorAll so great? Well, I made an example that changes the class on a group of divs and then allows you to change it back even though it found the divs in the DOM using the class name. This wouldn’t be possible if I used getElementsByClassName because that live node list would become empty as soon as the class names were changed. Here’s the HTML and CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>querySelectorAll Test #1</title>
<style>
body {
margin:0;
padding:0;
}
.wrapper {
width:550px;
height:160px;
margin:30px auto 0;
}
.wrapper > div {
margin-right:10px;
float:left;
}
.box {
background:blue;
width:100px;
height:100px;
}
.border {
background:red;
width:90px;
height:90px;
border:5px solid black;
}
button {
width:140px;
height:30px;
display:block;
margin:auto;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button id="change">Change the class</button>
</body>
</html>

This just makes five divs that are 100 pixels in width and height with a blue background to start. There a button that when clicked will change the class on the divs. Here’s the JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

So, when the button is pushed, the class is changed on all five divs from box to border. Check out the demo. And because I used querySelectorAll fo find them in the DOM, then even though the class on all the divs has changed to border, they’re still in the boxes array. This allows the class to be changed back to box when the button is clicked again. I included attachEvent because this will work in Internet Explorer 8, which makes this all kinds of useful!

I have to say, I really wish they’d picked a different name, it’s pretty clunky and doesn’t really describe what it does which I think is important for beginners. I’ll be honest with you, I’ve probably seen this function before but because it’s name, it didn’t catch my eye. I’m sure this makes perfect sense to the people that added it to JavaScript, but really, if you asked someone what it did, they would probably have a hard time guessing.

I’d like to see knowledge of this method spread more to front-end developers that only really know jQuery, because I don’t know how many times I’ve seen jQuery used just to select DOM elements. Hopefully, some devs will start using this so they don’t have to load jQuery just to select some divs.

Tags: javascript, jQuery
Posted in javascript | No Comments »

Recreate the 3D slider effect from the Android home page

December 28th, 2011

I think I’ve mentioned on here before that once in a while I’ll see an effect on a web page and I’ll become obsessed with how it was down. The latest thing to catch my attention is the 3D slide effect that’s on the home page of the Android site. It’s a great effect and makes use of CSS3 3D transforms. But it does continue a trend I’ve been seeing from Google lately, it only works in Webkit browsers like Chrome and Safari although it could be set to work in Firefox 10, which is in beta right now. This might be because Google wanted it to work a certain way and Firefox’s implementation doesn’t work quite the same as Webkit’s.

The trick to how the effect works is that it’s powered by CSS but it uses JavaScript to trigger the effect. And the CSS it uses are translateX, transitions and animations. The animations are used to create a fade effect when the slider moves more than one “slide”. I’m not going to go step by step on how to build this, I’ll just go over the key parts and then if you really want to build your own version, you can go through the demo I’ve created. Here’s our basic HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13

First off, anytime you use 3D with CSS, then you need to set the perspective:

1
2
3
4

.box-wrapper {
-webkit-perspective: 600px;
-webkit-perspective-origin: 2000px -200px;
}

A div with the class box-wrapper is the wrapper div for everything. The perspective property is set to 600 pixels, which essentially means the content is 600 pixels away on the z index. Next, the perspective-origin property is set to 2000px on the x axis and -200px on the y axis. This sets up the view that the user has. Next, we need to set up our transform-style:

1
2
3
4

#box-container {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s ease-in-out;
}

Inside box-wrapper is a div with the id of box-container. I’ve set the transform-style to perserve-3d. There’s only two options, perserve-3d or flat, the first says everything should be positioned in 3D space, the other positions everything on the same plane as the container element.

Now it needs some JavaScript to set up the translateZ property of all the divs. The reason I decided to use to set all the z axis positioning on the divs is mainly because it allows you to add or remove divs without worrying about setting anything for them manually.

1
2
3
4
5
6

var startDist = 0;
boxContainer.style[transform] = 'translateZ(' + startDist + 'px)';
for (var i = 0; i < boxes.length; i++) {
boxes[i].style[transform] = 'translateZ(' + startDist + 'px)';
startDist -= 400;
}

First thing this does is set the translateZ property of the box-container div to 0. Next, the boxes array contains all the divs with a class of box and in the loop they are all given a translateZ value that’s 400 less than the previous one.

The basics to how this works is this, there’s four divs, the first one is 0, the next -400, then -800 and finally -1200. To get the moving through 3D space effect, the box-container div’s translateX value is changed to be the same as the one we want to see, so if the 3rd one is selected, it will be set to -800 and that div is the one in the view port. To trigger this effect, the translateX of the box-container will be set depending on what link is clicked:

There’s one other effect that really helps flesh this out and that’s when the user clicks on a div that not the next div, say they click on div 3 when they’re currently on div 1, there’s a nice fading animation to make it look like the user is moving through the other divs. First the animation:

1
2
3
4
5
6
7
8
9
10
11

@-webkit-keyframes half-fade {
0% {
opacity: 0;
}
50% {
opacity: .4;
}
100% {
opacity: 0;
}
}

So this just fades the div in to 40% opacity and then back to zero to add to the transition effect. To add this effect, there’s a class called transition:

1
2
3

.transition {
-webkit-animation: half-fade .6s ease;
}

What happens is that if the user is going from say, div 1 to div 3, then div 2 would have the transition class added to it and you’d get that fade effect. But there’s one problem, once a CSS animation is fired, there’s no way to restart it. This was the part that caused me the most problems but a quick search lead me to CSS-Tricks, where of course Chris Coyier had the answer. The solution is that you have remove the element and then add a new version of it. Luckily, that only takes 5 lines of JS:

1
2
3
4
5

function clone(i) {
var el = boxes[i];
var nel = el.cloneNode(true);
el.parentNode.replaceChild(nel, el);
}

This code gets the element, clones the element and then replaces the element with the new element. This allows use to reset the animations.

Poke around the code in my demo. I didn’t use jQuery because A) Google didn’t on their site and B) because I want to make sure that I don’t rely on jQuery for everything. I made my demo to work in Firefox and also future proofed it to work in the other major browsers for the one day when they include 3D transforms.

One other thing, in at least my version of Chrome, the dev channel on Windows 7, you can’t click on either of the back two divs, in my version or on android.com. The same goes for Firefox. It does let you click on them in Safari, so I’m guessing this is a temporary bug but one that really make using this on real sites impossible, hopefully it gets fixed soon.

Tags: CSS3, javascript
Posted in HTML/CSS | No Comments »

getElementsByClassName might not work the way you think it does

December 4th, 2011

I think a large amount of web designers and developers are like me, they start out using jQuery and then move to coding more with pure JavaScript. I’m not saying one or the other is better, although I’ve come to prefer when I can do something in a couple of lines of JS rather than load in jQuery. But one of the things I’ve come to learn pretty quickly is that just because I think something in JS should work similar to something in jQuery, it usually doesn’t. Remember, jQuery’s main purpose is to make things quicker and work cross browser.

Something that caused me a little bit of grief was getElementsByClassName. Now, if you’re at all familiar with JavaScript, then you’ve had to have used getElementById. For the most part, this in pure JavaScript:

1	var canvas = document.getElementById(‘canvas’);

is the same as this:

1	var canvas = $(‘#canvas’);

In fact, one of my biggest pet peeves has become people that use jQuery just to select an element and don’t use it for anything else when getElementById will do the exact same thing for them.

Alright, so let’s say we have this HTML:

1
2
3
4

And we want to select all those divs with the class name box. With jQuery, it’s the same as selecting the id in the previous example:

1	var boxes = $(‘.box’);

If you console.log boxes then you’ll find an array containing the four divs with the class box. And we can manipulate those divs with code. Now let’s say you wanted to do this with pure JavaScript, you’d look and think that getElementsByClassName should do the same thing.

1	var boxes = document.getElementsByClassName(‘box’);

This will also give us an array containing those four divs but it’s not really the same thing, it’s a live nodeList of those elements. What does that mean? Well, take a look at these two examples, a jQuery one and a JavaScript one. If you click Add otherBox Class and then stretch boxes, you’ll see you get two different results. The reason for this is because when we find those divs using jQuery, it keeps them in the array boxes, so when we change the class of the fourth div to otherBox and then add the stretch class to the divs in the boxes array, the fourth div will still double in height.

But in the JS version, the fourth div doesn’t stretch because when the class is changed from box to otherBox, that div is removed from the boxes array. This is because, as I mentioned before, it’s not normal array, it’s a live nodeList. So, whenever a change is made, it updates itself to only include the elements that currently have that class name.

This can be one of the most frustrating things when you switch from using jQuery to pure JavaScript, things don’t always work the way you’re used to or think they should. This is one of those situations where using Firebug or Webkit’s Developer tools will help you figure out what’s going wrong. And don’t forget to use resources like Mozilla’s Developer Network, you’d be surprised what you can learn when you look at code examples.

Tags: javascript, jQuery
Posted in javascript | 3 Comments »

Working with CSS3 can be fun but it can also be amazingly frustrating

November 27th, 2011

I recently decided to redesign my site and the main CSS3 effect I want to use works great in Webkit browsers but not so much in Firefox, at least not yet. I know you’re thinking, wait, what about Opera or IE? Well, over 80% of my visitors are Chrome or Firefox users, so I figure I’ll make sure it works in there first and I’m pretty sure it will work in IE10 whenever that’s released. And I’ll get around to Opera, I swear!

Imagine this, I’m working along, getting this idea I have to work in Chrome, but the site I saw that inspired my idea only works in Chrome. And then I see that CSS3 3D transforms now work in Firefox 10. So I start messing around and seeing I can get this to work in Firefox. I’m using CSS3 tranforms, but I’m using JavaScript to set the CSS and the first thing I discover is that while the Webkit version makes sense:

1	el.style.webkitTransform = ‘translateZ(-400px)’;

The Firefox version does not. You’d think it would be this:

1	el.style.mozTransform = ‘translateZ(-400px)’;

But it’s not. That won’t work, you have to capitalize the m:

1	el.style.MozTransform = ‘translateZ(-400px)’;

I only found this out be Zachary Johnson did some digging and as far as I can tell, this is the only mention out there about how to properly write it. Problem solved now, right? I mean all the demos using CSS3 for Firefox that have translateZ working fine. But my test still wasn’t working and in fact I wasn’t even sure you could use CSS transition on the translateZ property in Firefox. It turns out you can but not if the CSS property is set as an inline style with JavaScript, which is needed for my idea to work properly. So the transition works right if it’s CSS but not if it’s JavaScript powered in Firefox. And in Chrome, it works both ways.

I’m still going to redesign my site because even though the 3D effect will only work in Chrome, at least right now, I’ll still get a fade in and out effect in the other browsers. The main traffic going to my site is web designers and developers and since over 40% of them use Chrome, a decent amount of visitors will site the site the way I intend them to. I’m sure Firefox will add the missing functionality sooner than later, so I’m not too worried about them missing out.

Cutting edge effects are pretty sweet, but you better have the patience to deal with the differences between browsers. Nothing can be more frustrating than when something isn’t working because the browsers use different syntax.

Tags: CSS3, javascript
Posted in general | No Comments »

Stuff they don’t tell JavaScript noobs: Making your arguments optional

November 16th, 2011

One thing that took me a while to grasp fully when it came to programming was passing arguments to functions. I don’t know why but it was one of those things that I just got one day. But something that took me a while to learn is how to set up arguments to be optional. And once again, as with most of the things in my noobs series, it’s pretty simple when you know what you’re doing.

So first off, what do I mean by passing an argument to a function? It’s when you pass one or more objects to a function, something like this:

1
2
3
4
5
6

function add(a, b) {
return a + b;
}

var answer = add(1, 2);
console.log(answer); // logs 3

I’ve created a function called add that accepts two arguments, a and b. It then adds the two arguments and returns it. So I’ve passed two arguments to the function. Pretty simple stuff but if I only passed one number to it, it would break. We can set up our function to still work, even if only one number is passed.

1
2
3
4
5
6
7
8

function add(a, b) {
this.a = a;
this.b = b || 100;
return this.a + this.b;
}

var answer = add(4);
console.log(answer);

Looks pretty simple to the first one but instead of just adding the two arguments, I’m assigning their values to this.a and this.b in the function. I’m doing this so that I can set up the b argument to be optional, essentially what I’m saying is that this.b = b or if there’s no b, then it equals 100. Now I can pass two numbers or just one and it will add that to 100.

While this shows what I’m talking about, it’s not really a practical example. Here’s one that’s a bit more realistic:

1
2
3
4
5
6
7
8
9
10

function myGreeting(name, greeting) {
this.name = name;
this.greeting = greeting || 'Hello, my name is ';
return this.greeting + this.name;
}

var sayHello = myGreeting('Mike');
var sayHey = myGreeting('Bill', 'They call me ')
console.log(sayHello); // logs ‘Hello, my name is Mike’
console.log(sayHey); // logs ‘They call me Bill’

In this example, I’ve created a function called myGreeting that accepts the arguments name and greeting. It’s exactly the same as the previous example expect that it returns a string instead of a number.

Once you understand this, I think it will make your programs leaner and more efficient because you can create one function that performs the work of two.

Tags: javascript, js, noob_series
Posted in javascript | 3 Comments »

Draw a rectangle using the mouse on the canvas in less than 40 lines of JavaScript

November 14th, 2011

One thing that is a lot easier than people think is using the mouse to interact with the canvas tag. To show how easy, I wrote some code that allows a user to draw a rectangle on the canvas. This will be the start of a more complicated drawing program.

All we need for the HTML is this:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a rectangle!</title>
</head>

<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

Now let’s get on to the fun stuff. The first thing we’ll do is declare our variables:

1
2
3
4

var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false;

If you’ve worked with the canvas tag at all before then the first two variables should look familiar, we are finding the canvas tag in the DOM using it’s id and then setting the drawing context of the canvas to 2D. Next is sq which is an object that we’ll use to store the info for the rectangle we draw. And finally, drag, which is a Boolean that we use to check if the user is drawing the rectangleor not.

Now let’s add our listeners which we’ll use to run our functions:

1
2
3
4
5

function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}

We have three event listeners, one for when the mouse button is pressed, one for when it’s released and finally one for when the mouse moves. All three have been added to the canvas, not the window or document, so that a user can click and move the mouse around the page with out triggering our drawing functions. The mouseDown function is called first, so let’s write that one:

1
2
3
4
5

function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}

When the mouse button is pressed down, the function mouseDown will find the position of our mouse using e.pageX and e.pageY and then subtract the offset from the left and top if our canvas isn’t in the left top corner. Finally, we set the drag Boolean to true. Next is the mouseUp function:

1
2
3

function mouseUp() {
drag = false;
}

About as simple a function as we can get. When the user releases the mouse button, drag is set back to false because they can’t be dragging to create a rectangle if the button isn’t pressed. And now the function that will power everything, mouseMove:

1
2
3
4
5
6
7
8

function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
}
}

In mouseMove, we first check to see if drag is true, if it’s false, the just means the user is moving their mouse around the canvas, if it’s true, then it means they want to draw a rectangle. If drag is true, then we need to follow the position of the mouse and calculating the width and height of the rectangle. To do this we need to subtract startX and startY from the current position of the mouse. Next we clear the canvas because if the drag is true and mouse is moving, that means the user is still drawing the canvas. Finally, we call a function called draw to actually draw our rectangle:

1
2
3

function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}

With the draw function, we draw the rectangle using the four points that we figured out using the mouseDown and mouseMove functions. The starting x and y coordinates are rect.startX and rect.startY and the width and height are set with rect.w and rect.h. This will be updating every time the mouse moves, so if the user shrinks or grows the rectangle, it will draw immediately. And of course, don’t forget to call:

init();

At the bottom, so that the event listeners to the canvas. Check out the demo here. View source for the complete code.

That’s it. Pretty easy to get everything up and running.

Tags: canvas, javascript, js
Posted in javascript | 1 Comment »

I'm Mike Thomas and I spend most of my time making things using HTML/CSS/JS. I'm currently obsessed with HTML5, JavaScript and jQuery. Sometimes I say something interesting on Twitter and I post interesting stuff on Google+. And check out my RSS feed so you don't miss anything.

I am currently available for freelance work. Hire me!