[Game Development] Save The World : Web-based time-waster game

Game Development>Website
2.1k words

Overview

Save The World is a web-based game designed to be a time-wasting experience for players. Built as part of an Art & Internet project, the game challenges users to dodge meteors and protect the Earth while offering a deliberately simple but engaging gameplay loop.

🔗 Save The World - Playable Game

Image 1
Image 2
Image 3
Image 4

My Contributions

1. Core Game Mechanics

  • Developed the main game loop, allowing the player to move the Earth left and right using arrow keys.
  • Implemented randomized meteor spawns, ensuring varied gameplay experiences.
  • Designed a collision detection system that reduces player health upon impact and triggers a Game Over when lives reach zero.
Collision Detection
1
2
3
4
5
6
7
8
9
10
11
12
13
function collision() {
    terreX = parseInt($('#terre').css('left'));
    meteorX = parseInt($('#meteor').css('left'));
    meteorY = parseInt($('#meteor').css('bottom'));

    if (((meteorX > terreX) && (meteorX < (terreX + 66)) && (meteorY > 10)) 
        || ((terreX > meteorX) && (terreX < (meteorX - 66)) && (meteorY > 10))) {
        collision = parseInt($('#info').text()) + 1;
        affvie = parseInt($('#total').text()) - 1;
        $('#info').text(collision);
        $('#total').text(affvie);
    }
}

2. Procedural Meteor Movement

  • Implemented smooth meteor animations using jQuery.
  • Ensured increasing difficulty by accelerating meteor speeds over time.
Meteor Falling Animation
1
2
3
4
$('#meteor').animate({top: '-=-120%'}, vitesse, 'linear', function() {
    var meteorX = Math.floor(Math.random() * width) + 70;
    $('#meteor').css({ top: '-60px', left: meteorX });
    });

3. UI & Visual Design

  • Created a retro-inspired aesthetic using pixel fonts and neon colors.
  • Designed a dynamic HUD displaying lives, collision count, and score updates.
  • Implemented full-screen mode alerts to enhance the player’s immersion.

4. Game Over & Restart System

  • Built an alert-based Game Over screen that displays the final score.
  • Automatically resets game variables and allows instant replay.
Game Over System
1
2
3
4
5
6
7
if (vie == 0) {
    alert("GAME OVER\n \n" + "Score : " + human + "humans survived\n 
    \nClick OK to replay.");
    human = 0;
    vitesse = 3000;
    vie = 3;
}