This week we added a progress counter to the game to add more obstacles and make the game more difficult as the player advances.
settings.js: progress variables
var progress = 0;
var progressTotal = 300;
The progress
variable tracks the players progress. The progressTotal
is the default number for when a new level occurs. When the progress gets to 300, or progressTotal
, we make the game a little harder.
var level = 0;
var levelCount = 2;
In class we also added the level
variable to track how many levels and then the levelCount
to reset the levels. This is sort of like a secondary progress tracker.
game.js
We need to add some logic in game.js to change settings when the player reaches a new level.
This is added to the bottom of the file, right before drawSprites();
.
progress += 1;
For every frame, add 1 to progress
.
if (progress == progressTotal) {
console.log('next level');
progress = 0;
}
When the progress
reaches the progressTotal
we are at the “next level”. We can reset the progress
back to 0
and start counting again.
We also add some code to make the game harder. Everything else is inside this if statement.
platformYChange += 20;
One way of making the game harder is to increase the amount of vertical distance between newly added platforms. This is still set randomly, but this increases the range to add more variance.
platformSpeed += 0.2;
for (var i = 0; i < platforms.length; i++) {
platforms[i].velocity.x = -platformSpeed;
}
Another way the game gets harder is the platforms move faster. We increase the platformsSpeed
variable but we also need to loop over current platforms and update their speed.
level += 1;
if (level == levelCount) {
// add an arrow
level = 0;
}
This recreates the same logic as the progress, but for another level. This means it happens every 2 times the progress
reaches the progressTotal
or whatever the levelCount
variable is set to.
// add an arrow
var x = random(width, width * 3);
var y = random(arrowYMin, arrowYMax);
var arrow = createSprite(x, y);
arrow.setCollider("rectangle", 0, 0, 20, 10);
arrow.addAnimation("default", arrow_animation);
arrow.velocity.x = -arrowSpeed - random(0, 1);
arrows.add(arrow);
This is the same code to add an arrow as used in the build()
function when the game starts. This adds another arrow to make the game more difficult.
scenes.js: reset
died()
progress = 0;
platformYChange = 20;
platformSpeed = speed;
Finally, we have to reset the progress when the player dies. In the died()
function we set progress back to 0
, set the platformYChange
back to its original value of 20
, (yes this should be a settings.js variable) and set the platformSpeed
back to the original speed
variable.