SpawnHero

After correcting the FixtheGame syntax as a warm up exercise, you can build game levels for the SpawnHero game. The Docs for level creation is below.

Fix the Game

Find 12 Syntax Errors

Download and print the worksheet below. See if you can find the 12 syntax errors in the code.

FixtheGame_Worksheet.pdf

Fix the Actual Code

Download the files for the broken game. Fix the same 12 syntax errors in the gg-launcher.js file. When you are done fixing all the errors, load the index.html file in your browser.

FixtheGame.zip

1 Functional Problem

Now that the code works, something is wrong with the controls. Fix this functional problem in the gg-launcher.js file.

3 Design Problems

There are a few things wrong with the game level. Fix the following Design Problems:

  1. Something is wrong with the rotation of the game hero. Fix this design problem in the gg-launcher.js file.
  2. Something is wrong with the tile size of game assets. Fix this design problem in the gg-setter-upper.js file.
  3. Something is wrong with the level design. The game.js file places 2 blocks on the screen, although only 1 block shows up. Fix this design problem in the game.js file.

Level Template Files

Download the Template Files to create a Game Level:

SpawnHero_Template.zip Levels 1 - 5

SpawnHero Docs

The only file that needs to be edited is the game.js file. This is what a game.js skeleton file looks like:

// Main Game File
function Game(){};

// Global Game Settings

// Game Title
Game.title = "Title Goes Here";

// Game Skins


// Game Initializer
Game.init = function(Game){
  // type code in here!

}

// Game Loop (runs 60 times per second)
Game.loop = function(Game,frame){


}

Code Sections

Global Game Settings: is where you set global variables for your game.

Game Initializer: is where you write most of your code to design your level. The commands in this will only run once.

Game Loop: is where you can write commands that will run every frame during gameplay. Be careful when writing code in here since mistakes in this block may cause your game (or even computer) to crash.

Global Game Settings:

Replace "file path" with the actual path to your assets.

// Global Game Settings

// Game Title
Game.title = "title";

// Game Skins
Game.game_bg = "file path";
Game.hero_skin = "file path";
Game.hero_attack_skin = "file path";
Game.hero_sword_skin = "file path";
Game.enemy_skin = "file path";
Game.gem_skin = "file path";
Game.wall_skin = "file path";
Game.powerup_skin_freeze = "file path";
Game.powerup_skin_speed = "file path";
Game.powerup_skin_slow = "file path";

Game Initializer (Game.init)

These functions and commands can be called inside the Game Initializer

Game.score

Game.score = 0;   // initialize or reset

Game.hero

Creates a Hero object and places it at x,y position.

Game.hero = spawnHero(0,0);

Game.hero.speed = number;

Sets the hero's speed.

Game.hero.speed = 2;

Game.hero.attack_duration = number;

Sets the hero's attack duration.

Game.hero.attack_duration = 2;

Game.hero.sword_distance = number;

Sets the hero's sword distance.

Game.hero.sword_distance = 2;

Game.hero.attack_delay = number;

Sets the hero's attack delay.

Game.hero.attack_delay = 2;

placeWall( 3, 3 );

Creates a wall and places it at x,y position.

placeWall(3,3);

placeWall( );

Creates a single wall block and places it at random position. To spawn a random block every n-seconds, see Loops (Game.init).

placeWall( );

spawnEnemy( 3, 3, "x", 1 );

Creates an Enemy and places it at x,y position.
direction must be "x" or "y"
speed must be a number

spawnEnemy(3,3);

spawnEnemy( );

Creates a single enemy and places it at a random position. To spawn a random enemy every n-seconds, see Loops (Game.init).

spawnEnemy( );

placeGem( 3, 3 );

Creates a gem (collectible) and places it at x,y position.

placeGem(3,3);

placeGem( );

Creates a single gem (collectible) and places it in a random position. To spawn a random gem every n-seconds, see Loops (Game.init).

placeGem( );

placePowerUp( "type", 3, 3 );

Creates a PowerUp of kind "type", and places it at x,y position.
PowerUp types are "speed", "freeze" or "slow".

placePowerUp("speed",3,3);

placePowerUp( "type" );

Creates a PowerUp of kind "type", and places it at a random position. To spawn a random powerup of a certain "type" every n-seconds, see Loops (Game.init).
PowerUp types are "speed", "freeze" or "slow".

placePowerUp("speed");

Loops (Game.init)

If you want to run a command every n-milliseconds, then use the every command inside the Game Initializer (NOT the Game Loop! )

Game.init = function(Game){

  // place loops in here!!

  // do this every 12 seconds
  every(12000, function(){
    spawnEnemy();
  });



}

every( 12000, function( ){ });

Runs a block of code every 12000 milliseconds. Replace 12000 with any number (milliseconds).

// every 12 seconds, place a random enemy
every(12000, function(){



});

spawnEnemy( );

Creates an Enemy and places it at a random position. Place this inside an every function.

// every 12 seconds, place a random enemy
every(12000, function(){

  spawnEnemy();

});

placeGem( );

Creates a gem (collectible) and places it at a random position. Place this inside an every function.

// every 12 seconds, place a random gem
every(12000, function(){

  placeGem();

});

placeWall( );

Creates a wall and places it at a random position. Place this inside an every function.

// every 12 seconds, place a random wall
every(12000, function(){

  placeWall();

});

placePowerUp( "type" );

Creates a PowerUp of kind "type", and places it at a random position. Place this inside an every function.
PowerUp types are "speed", "freeze" or "slow".

// every 12 seconds, place a random "freeze" powerup
every(12000, function(){

  placePowerUp("freeze");

});

Game Loop (Game.loop)

If you want to run commands every game frame (that's about 60 times per second!), then put your commands inside of the Game Loop block. example:

Game.loop = function(Game,frame){

  // check if player has 10 points
  if( Game.score >= 10 ){
    Game.win("You Win!");
  }

}

If you want to run commands every nth game frame, then put your Game Loop commands inside of an if/modulus conditional. for example, to run a command every 300 frames (about 5 seconds):

Game.loop = function(Game,frame){

  // place a random wall every 300 frames
  if( Game.frame % 300 == 0){
    placeWall();
  }

}