Space Invaders : Escape the Planet

About the Game

The game is a single player story mode that consists of 10 levels. You need to escape from all the levels to evade the alien race that is chasing you down for stealing their technology. Each time you pass a level the more hard the aliens try to stop you from escaping by creating more vicious levels with dangerous traps. Will you be able to escape their planet, or will they catch you?

You only have one option... RUN!

How we built it

We used several APIs including wixMembers, wixData, wixAnimations... The core of the gameplay, which is the levels design, we used animations to create the moving obstacles and give a "life" to the game.

The main elements are boxes and images, which are used as follows:

• The black path which is the path the user is supposed to follow.
• We have transparent boxes around all edges of the path, which is our trigger letting us know that the user is outside the path.
• And finally we have the obstacles which are images that again act as a trigger to stop the game.

All obstacles are animated using wixAnimations to create the movement we want to choreograph the obstacles.

For the animations we created a custom function to create an animation like this : We call the create_custom function and we provide an elementID along with the movements it needs to make.

create_custom("obs5",["360,x,-=433,4000","0,x,+=433,4000","360,x,+=433,4000","0,x,-=433,4000"])

The movements is an array of strings. Each string has rotate,xy,xyvalue,duration. the rotate is how much we want the obstacle to rotate the xy is either x or y according to which direcction we want to move the xy value is the value to the either x or y telling it how much we need it moved and then we just loop it by having the onComplete to start the animation again.

The create_custom function

function create_custom(elementID, movements) {
    let temp = wixAnimations.timeline();
    let element = $w("#" + elementID);
    for (let i = 0; i < movements.length; i++) {
        let currentMovement = movements[i]; //rotate,xy,xyvalue,duration 
        currentMovement = currentMovement.split(",")
        let animationObject = {
            "easing": "easeInOutCubic",
            "duration": Number(currentMovement[3]),
            "rotate": Number(currentMovement[0])
        }
        animationObject[currentMovement[1]] = currentMovement[2]
        temp.add(element, animationObject)
        temp.play()
        temp.onComplete(() => {
            temp.replay()
        });
        $w("#" + elementID).onMouseIn((event) => {
            console.log("mouse in on obstacle: ", elementID)
            stopGame();
        });
    }
}

Challenges i ran into

If i was to use the Wix Animations API as-is, i would end up with hundreds of lines of repeating code, which didn't seem sustainable. So i created a custom way to use Wix Animations, by providing an array of movements and rotations you want the object to make which reduced those lines of repeating code to just one line that calls a function to dynamically create the result by providing the data we need on just one line by calling the function.

Another issue that i came up with was the Audio of the game. Sometimes the audioplayer wouldn't start/stop to start the next sound effect to play, some times the audio wouldn't start when the page first loaded.

Built With

• database
• nativeelements
• wixanimations
• wixdata
• wixmembers