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:
- Something is wrong with the rotation of the game hero. Fix this design problem in the gg-launcher.js file.
- Something is wrong with the tile size of game assets. Fix this design problem in the gg-setter-upper.js file.
- 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();
}
}