Concept: 

I am making a game inspired by The Hobbits and the tap the circle game example. Basically, you are a hero who wants to protect this town from the dragon. You have a powerful crossbow and numerous giant arrow. All you need to do is to shoot down the dragon before it destroys everything.

​

Development Plan:

1. Dragon move from side to side (DONE!)

2. Dragon rises and drops to spit fire (Mostly DONE!)

3. When the dragon spits fire, set a building on fire (NEED ANIMATION OF FIRE)

4. A red line indicating where the arrow will be launched (EASY TO MAKE)

5. The red line follows the players' mouse (EASY TO MAKE)

6. Press spacebar to shoot arrow (EASY TO MAKE)

7. When the arrow shoot the dragon, make the arrow disappear and make the dragon lose HP 

8. The dragon turns red for a short time when hit (EASY TO MAKE)

9. Game over when all 5 buildings are on fire (EASY TO MAKE)

10. Win when the dragon is defeated (EASY TO MAKE)

​

Image:

Dragon: Final Fantasy Dimensions (https://www.spriters-resource.com/fullview/148749/)

Town Buildings and Props: https://www.pinterest.se/pin/658651514223112836/

Town Background made with Tileset from https://cardinalzebra.itch.io/grass-road-tiles

Sky background from https://www.deviantart.com/antuniey/art/Pixeled-Sky-217039967

*/

​

//Variables

var dragonX; //X position of dragon

var dragonY = 100; // Y position

var dragonSpeed = 3; //Speed of dragon

var dragonDestroy; //Time interval for dragon destruction

var dragonTimer = 0; //If this timer = dragonDestroy, dragon will destroy a part of town. When all 5 parts of town is destroyed, game over.

var aniCountF = 0; //DragonAnimationStuff

var aniCountS = 2;

var dragonState = 0; // 0: fly, 1: rise to top, 2: drop to ground, 3: stand & fire, 4: rise to fly

var groundY = 150;

var buildingDestroyed = 0;//Number of buildings destroyed by dragon

var recharge = 30;

var fire = false; //Dragon breathe fire

var fireA1 = 20;//Red flash effect

​

//Dragon Sprite

//Flying dragon

var dragonSF1;

var dragonSF2;

var dragonSF3;

//Standing dragon

var dragonSS1;

var dragonSS2;

var dragonSS3;

//Town

var town;

​

//DragonAnimationArray

var dragonSpF = [dragonSF1, dragonSF2, dragonSF3];

var dragonSpS = [dragonSS1, dragonSS2, dragonSS3];

​

function preload() {

  //LoadSprite

  dragonSF1 = loadImage("fly1.png");

  dragonSF2 = loadImage("fly2.png");

  dragonSF3 = loadImage("fly3.png");

  dragonSS1 = loadImage("stand1.png");

  dragonSS2 = loadImage("stand2.png");

  dragonSS3 = loadImage("stand3.png");

  town = loadImage("town.png");

​

  //DefineArray

  dragonSpF = [dragonSF1, dragonSF2, dragonSF3];

  dragonSpS = [dragonSS1, dragonSS2, dragonSS3];

}

​

function setup() {

  createCanvas(640, 360);

​

  //Pixel

  noSmooth();

​

  dragonReset(500, 1000);

}

​

function draw() {

  background(220);

  imageMode(CENTER);

  image(town,width / 2, height / 2)

  dragonFly(dragonSpeed, 6);

  // console.log(buildingDestroyed)

}

​

function dragonFly(speed,dropSpeed) {

      imageMode(CENTER);

  //Dragon drop from sky

  if (dragonState == 2) {

    // console.log("Dragon Drop!");

    dragonY+=20;

    image(

      dragonSpF[0],

      width / 2,

      dragonY,

      dragonSpF[0].width * 1.5,

      dragonSpF[0].height * 1.5

    );

    if (dragonY >= groundY)

      {

        dragonState = 3;

      }

  } 

  //Dragon stand on ground

  else if (dragonState == 3)

    {

      dragonDestroyTown();

    }

  //Dragon rise to sky

  else if (dragonY <= -50 && dragonState == 1) 

  {

    dragonState = 2;

    image(

      dragonSpF[aniCountF],

      dragonX,

      dragonY,

      dragonSpF[aniCountF].width,

      dragonSpF[aniCountF].height)

  } 

  else if (dragonState == 0 || dragonState == 1) {

    image(

      dragonSpF[aniCountF],

      dragonX,

      dragonY,

      dragonSpF[aniCountF].width,

      dragonSpF[aniCountF].height

    );

    //When timer = destroy, fly up

    if (dragonTimer < dragonDestroy) {

      //Dragon Move from Side 2 Side

      dragonX += speed;

      if (dragonX >= width - 80 || dragonX <= 80) {

        dragonSpeed = -speed;

      }

    } else {

      dragonY -= 6;

      dragonState = 1;

    }

  }

​

  //Dragon Animation

  // console.log(aniCount)

  if (frameCount % 20 == 0 && dragonState != 3) {

    if (aniCountF >= 2) {

      aniCountF = 0;

    } else {

      aniCountF++;

    }

  }

​

  //Add 1 to dragon timer

  dragonTimer++;

  // console.log(dragonDestroy)

  // console.log(dragonTimer);

}

​

function dragonReset(minD, maxD) {

  dragonDestroy = int(random(minD, maxD));

  //https://p5js.org/reference/#/p5/int

  dragonX = width / 2;

  dragonY = 100;

}

​

//Calls when the dragon reaches the ground

function dragonDestroyTown() {

  image(

      dragonSpS[aniCountS],

      width / 2,

      groundY,

      dragonSpS[aniCountS].width * 1.5,

    dragonSpS[aniCountS].height * 1.5)

    ;

  //Wing closes and stop animation

    if (frameCount % 20 == 0) {

    if (aniCountS >= 1) {

      aniCountS--;

    }

    else

      {

        aniCountS = 0;

        fire = true;

      }

    }

  if (fire == true)

    {

      rectMode(CENTER)

      fill(255,0,0,100)

      fireA1--;

      if(fireA1 >0)

        {

          rect(width / 2, height / 2, width, height)

        }

    }

  // buildingDestroyed ++;

}

​