xxxxxxxxxx
202
/*
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 ++;
}