Game Design with Crafty.js – Part 3

Pre-Questions:

  • Playable characters, enemies, power-ups are all types of what?
  • What do you change on a character to make it move across the screen?
  • What do I add to a character to make it move?
  • What color is a frog in HTML color codes?

Making ‘Frogger’

With what we’ve learned thus far, we can remake many of the classic games! Let’s remake Frogger (play here).

We’ll use this pen to get started.

Position the Character, the Frog   We’ll need to have our character start at the bottom, center of the screen.

Create the Traffic  We’ll need to create a row of traffic for our frog to move across. (Similar to how we animated the coins we’ll animate the traffic.)

Knowing the Width and Height of the game

The following line creates the game screen with its height and width:

Crafty.init(500,350,document.getElementById('game'));

This line indicates that the width is 500 pixels and the height is 350 pixels.

Create the Winning Condition

You win the game when you reach the top of the screen.

Add the following to your character like so:

Crafty.e('2D, DOM, Color, Fourway, Collision')
.attr({x: 0, y: 0, w: 20, h: 30})
.fourway(2)
.collision()
.color('#0f0')
.bind('EnterFrame', function() {
//If you make it to the top of the screen
if (this.y < 0) {
console.log('You Win!');
//Stop the game
Crafty.stop()
}
})

Creating Power-ups

Mini Coin  Changes your size so you can move in and out of traffic easier.

Crafty.e('2D, DOM, Color, Fourway, Collision')
.attr({x: 0, y: 0, w: 20, h: 30})
.fourway(2)
.collision()
.color('#0f0')
.onHit("coin", function(e) {
console.log('powered up!')
//Destroy the coin
e[0].obj.destroy();
//Change my size
this.h = this.h / 4;
this.w = this.w / 4;

})
})

Speed Coin  Allows you to move faster.

Crafty.e('2D, DOM, Color, Fourway, Collision')
.attr({x: 0, y: 0, w: 20, h: 30})
.fourway(2)
.collision()
.color('#0f0')
.onHit("coin", function(e) {
console.log('powered up!')
//Destroy the coin
e[0].obj.destroy();
//Change my speed
this.fourway(4);
})

Challenge: Create your own power up! Maybe a coin teleports you to another part of the screen! Maybe a coin makes you invincible!

Questions:

  • What is the position of your character when at the bottom-center of the screen?
  • What extra things to did you do to make the game more like ‘Frogger’?