Published 03 Nov, 2022

Plane Vs Objects

Adrian
Category Javascript
Modified : Feb 01, 2023

This article was written by Adrian. It covers a lot of details targetting javascript, canvas, games and various other things. Adrian is a tech enthusiast and creative writer and has been writing for a long time now. He has written around 26 posts here and has been a regular contributor to forum discussions. You can browse more details and other various blog posts and articles he has written on his personal website https://codeguppy.com.

Post banner

Intro

This fun game puts you in the pilot seat of a cute airplane. Your goal is to destroy all the objects that fly towards you. As soon as you finish destroying all the objects, the game advances to a new level with even more challenges.

While building this game you’ll learn:

  • How to create multi-scene / multi-level games
  • How to manipulate sprite objects
  • How to update and display several moving objects on the screen

What do you need?

To run the code in this article you don’t need to install anything on your local computer.

Just open the online JavaScript playground from codeguppy.com/code.html and copy and paste the following code in the integrated editor.

When ready, press the “Play” button to run the code.

Source code

This program contains multiple scenes. Please copy and paste each scene in a separate code page. Make sure the name of the scene is as indicated below.

Scene: Intro

background("lightblue");

textSize(24);
textAlign(CENTER);
text("Plane and objects", width / 2, 50);

var pIntro = sprite('plane');

textSize(14);
text("Press any key to start the game...", width / 2, height - 9);

function loop()
{
    pIntro.y = height / 2 + 10 * sin(frameCount);
}

function keyPressed()
{
    showScene("Game", 0);
}

Scene: Game

var p = sprite('plane', 150, 300, 0.2);

var maxObjects = 10;
var bullets = [];
var objects = [];

var isHit = false;

function enter()
{
    background('Scene1');
    maxObjects += PublicVars.Arguments;

    p.x = 150;
    p.y = 300;
    p.velocity.y = 0;
    p.rotation = 0;
    p.rotationSpeed = 0;
    p.show('fly');
    isHit = false;

    createObjects();
    bullets = [];
}

function loop()
{
    readKeys();

    clear();
    updateObjects();
    displayObjects();
    updateBullets();
    displayBullets();

    checkStatus();
    displayStats();
}

function readKeys()
{
    if (isHit)
        return;

    if ( keyIsDown( UP_ARROW ) && p.y > 0  )
    {
        p.y -= 5;
    }
    else if ( keyIsDown( DOWN_ARROW) && p.y < height - 30 )
    {
        p.y += 5;
    }

    if ( keyIsDown( RIGHT_ARROW) && p.x < width - 50 )
    {
        p.x += 5;
    }
    else if ( keyIsDown( LEFT_ARROW) && p.x > 0 )
    {
        p.x -= 5;
    }

    if ( keyIsDown (32) )  // SPACE
    {
        p.show('shoot');
        createBullet();
    }
    else
    {
        p.show('fly');
    }
}

function createObjects()
{
    objects = [];

    for(var i = 0; i < maxObjects; i++)
    {
        var obj = { x : random(width, width * 2), 
                    y : random(0, height), 
                    r : random(20, 30),
                    color : random(['LightPink', 'LightSalmon', 'PapayaWhip', 'LemonChiffon', 'LightGreen', 'MediumAquamarine', 'Tan', 'Beige']),
                    hit : false
                };

        objects.push(obj);
    }
}

function checkStatus()
{
    if (isHit && p.y > height)
    {
        showScene("Status", false);
    }
    else if ( objects.length == 0 )
    {
        showScene("Status", true);
    }
}

function updateObjects()
{
    if (isHit)
        return;

    for(var i = objects.length - 1; i >= 0; i--)
    {
        o = objects[i];

        if (o.hit)
        {
            if (o.r >= 0)
            {
                o.r--;
            }
            else
            {
                objects.splice(i, 1);

            }

            continue;
        }

        o.x -= 5;
        if (o.x < 0)
        {
            o.x = width;
            o.y = random(height);
        }

        checkCollision(o);
    }
}

function displayObjects()
{
    stroke(0);

    for(var o of objects)
    {
        fill(o.color);
        circle(o.x, o.y, o.r);
    }
}

function createBullet()
{
    if (frameCount % 5 != 0)
        return;

    var bullet = { x : p.x, y : p.y };
    bullets.push(bullet);
}

function updateBullets()
{
    for(var i = bullets.length - 1; i >= 0; i--)
    {
        var bullet = bullets[i];
        bullet.x += 10;

        if (bullet.x > width)
        {
            bullets.splice(i, 1);
        }
    }
}

function displayBullets()
{
    fill('brown');
    noStroke();

    for(var bullet of bullets)
    {
        circle(bullet.x, bullet.y, 5);
    }
}

function displayStats()
{
    fill(0);

    text(objects.length, 10, height - 10);
}


function checkCollision(o)
{
    if (o.hit)
        return;

    var hit = collisionCircleRect(o.x, o.y, o.r, p.x - 48, p.y - 32, 96, 60);
    if (hit)
    {
        isHit = true;

        p.show('crash');
        p.velocity.y = 9;
        p.rotationSpeed = 9;
    }

    for(var i = bullets.length - 1; i >= 0; i--)
    {
        var bullet = bullets[i];
        hit = collisionCircleCircle(o.x, o.y, o.r, bullet.x, bullet.y, 5);
        if (hit)
        {
            o.hit = true;
            bullets.splice(i, 1);
        }
    }
}

Scene: Status

var win;

function enter()
{
    win = PublicVars.Arguments;

    clear();
    textAlign(CENTER);
    text(win ? "You win!" : "You loose.", width / 2, height / 2);

    text("Press R to restart...", width / 2, height - 10);
}


function keyPressed()
{
    if (key.toUpperCase() === 'R')
    {
        showScene("Game", win ? 10 : 0);
    }
}

Feedback

If you liked the article, please follow @codeguppy on Twitter and / or visit codeguppy.com for more tutorials and projects.

Also, if you want to extend this article with detailed instructions explaing how to build the program step by step, please leave feedback in the comments.

Meet the author

Learn more about the author of the post

Profile Picture
Adrian

I talk about technology day in and out, nature lover, gardener and an artist. In my free time I contribute to various projects on github. Find more about me on my website https://codeguppy.com