Game Design with Crafty.js – Part 6

We’ve come a long way! We’ve learned about:

  • Entities and using XY coordinates
  • Collisions
  • Creating Power-ups which change a characters attributes like speed and size
  • Using Ifs, If/Elses and While loops
  • Creating Sprites and adding them to our entities.

Today we’re going to recap and review past topics by using them together!

Also, get ready because you won’t be able to Copy and Paste as much as in previous lessons. 🙂

Get started using this pen.

Sprites and Power-ups

We’re going to change the character of the sprite when we collide with a Power-up entity.

Create a Power-up entity

An Entity named SpeedFrog. We will collide with this entity to receive special abilities.

An Entity named SpeedFrog. We will collide with this entity to receive special abilities.

The above code places the Speed Frog power-up at 200 on the X-axis.

The above code places the Speed Frog power-up at 250 on the Y-axis.

The above code makes the Speed Frog 20 wide and 20 high.

Create a Sprite for the power-up

This Sprite is called SpeedFrog

This Sprite is called SpeedFrog

The Sprite is at 63, 48 on the sprite sheet.

The Sprite has a width of 20 and a height of 20.

Add the Sprite to the entity

The name of the Sprite and the name of the Entity must match. The sprite is added to the entity because they are both named ‘SpeedFrog’.

Add the Collision with the power-up

Screen Shot 2014-09-11 at 1.08.08 PM

Most of this is given to you already. Only add what is missing.

Note: You do not have to type words in //gray.

Changing an Entity’s Sprite

Screen Shot 2014-09-11 at 12.59.13 PM

The following changes the Sprite’s coordinates:

this.sprite(63,48);

The following change’s the Entity’s Speed:

this.fourway(5);

If everything works correctly your player should change sprites when you collide with the frog power-up.

Post Questions

  • What is the name of our frog entity?
  • What color is the Frog entity? Or does it have a Sprite applied to it?
  • When one entity bumps another entity this is called a ________ ?
  • The YellowCar entity is moving along the ___-axis? In the Positive or Negative direction?
  • What special ability did you gain by colliding with the power-up?
  • A graphic I can assign to one of my entities is called a ________ .
  • Several sprites contained on a single file is called a Sprite _______ .