428 lines
11 KiB
JavaScript
428 lines
11 KiB
JavaScript
//--------------------Game--------------------
|
|
// Game variables
|
|
const width = 1260;
|
|
const height = 620;
|
|
|
|
// Player variables
|
|
const playerSize = 10;
|
|
let radius = playerSize / 2;
|
|
let playerPosX = 500
|
|
let playerPosY = 300;
|
|
let playerSpeed = 4;
|
|
let booleanArray = window.booleanArray;
|
|
let lives = 1;
|
|
|
|
let bossPosX = width / 2;
|
|
let bossPosY = 100;
|
|
let shotSpeed = 12;
|
|
let projectile;
|
|
let projSize = 5;
|
|
let shot = false;
|
|
let hit = false;
|
|
let shotPosX;
|
|
let shotPosY;
|
|
|
|
let initialPlayerPosX = playerPosX;
|
|
let initialPlayerPosY = playerPosY;
|
|
|
|
let bullets = [];
|
|
let direction;
|
|
let framerate = 120;
|
|
let hasMoved = false;
|
|
let time = 0;
|
|
let shotPoint = 0;
|
|
let angle = 0;
|
|
|
|
let patern;
|
|
let suroundX = 300;
|
|
let suroundY = 300;
|
|
let x2;
|
|
let y2;
|
|
let x3;
|
|
let y3;
|
|
let x4;
|
|
let y4;
|
|
let x5;
|
|
let y5;
|
|
let homescreenOn = true;
|
|
let chosen = false;
|
|
|
|
let bulletAmount = 20;
|
|
//let myBullet = new bullet();
|
|
// the function setup() is called once when the page is loaded
|
|
function setup() {
|
|
// create a canvas element and append it to the body
|
|
|
|
createCanvas(width, height);
|
|
frameRate(framerate);
|
|
angleMode(DEGREES);
|
|
|
|
// disable the outline of shapes
|
|
Movementloop()
|
|
noStroke();
|
|
}
|
|
|
|
function score() {
|
|
time += 1 / framerate;
|
|
}
|
|
|
|
function life() {
|
|
textAlign(CENTER);
|
|
if (lives == 0) {
|
|
push();
|
|
fill(255, 0, 0);
|
|
textSize(40);
|
|
textAlign(CENTER);
|
|
text("Game Over", width/2, height/2);
|
|
pop();
|
|
if (key == ' ') {
|
|
lives = 1;
|
|
time = 0;
|
|
bounceX = bossPosX;
|
|
bounceY = bossPosY;
|
|
initialPlayerPosX = playerPosX;
|
|
initialPlayerPosY = playerPosY;
|
|
hasMoved = false;
|
|
bullets = [];
|
|
shot = false;
|
|
chosen = false;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function movementCheck() {
|
|
if (playerPosX != initialPlayerPosX || playerPosY != initialPlayerPosY) {
|
|
hasMoved = true;
|
|
}
|
|
}
|
|
|
|
async function keyPressed() {
|
|
if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
|
|
playerPosX -= playerSpeed;
|
|
}
|
|
if (keyIsDown(RIGHT_ARROW) && playerPosX < width - radius) {
|
|
playerPosX += playerSpeed;
|
|
}
|
|
if (keyIsDown(UP_ARROW) && playerPosY > 0 + radius) {
|
|
playerPosY -= playerSpeed;
|
|
}
|
|
if (keyIsDown(DOWN_ARROW) && playerPosY < height - radius) {
|
|
playerPosY += playerSpeed;
|
|
}
|
|
}
|
|
function wait(waitTime) {
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
resolve(true);
|
|
}, waitTime);
|
|
});
|
|
}
|
|
|
|
async function Movementloop() {
|
|
window.addEventListener('booleanArrayUpdated', function (event) {
|
|
// event.detail contains the booleanArray
|
|
let booleanArray = event.detail;
|
|
// Use booleanArray here...
|
|
|
|
if (booleanArray[1]) {
|
|
playerPosX += playerSpeed;
|
|
}
|
|
if (booleanArray[3]) {
|
|
playerPosX -= playerSpeed;
|
|
}
|
|
if (booleanArray[2]) {
|
|
playerPosY += playerSpeed;
|
|
}
|
|
if (booleanArray[0]) {
|
|
playerPosY -= playerSpeed;
|
|
}
|
|
});
|
|
}
|
|
|
|
// the function draw() is called every frame
|
|
function draw() {
|
|
keyPressed();
|
|
life();
|
|
// draw background
|
|
//myBullet.draw();
|
|
background(0, 0, 0, 100);
|
|
|
|
if (homescreenOn == true) {
|
|
homescreen();
|
|
}
|
|
if (homescreenOn == false) {
|
|
game();
|
|
}
|
|
}
|
|
|
|
async function randPatern () {
|
|
patern = random([5]);
|
|
chosen = true;
|
|
if (patern == 1) {
|
|
await wait(3000);
|
|
chosen = false;
|
|
}
|
|
if (patern == 2) {
|
|
await wait(5000);
|
|
chosen = false;
|
|
}
|
|
if (patern == 5) {
|
|
await wait(30000);
|
|
chosen = false;
|
|
}
|
|
|
|
}
|
|
|
|
function randomAttackPattern() {
|
|
if (shot == false || hit == true) {
|
|
for (i = 0; i < bulletAmount; i++) {
|
|
spawnRandomBullet()
|
|
}
|
|
}
|
|
}
|
|
|
|
function spawnRandomBullet() {
|
|
if (chosen == false) {
|
|
randPatern();
|
|
}
|
|
|
|
if (patern == 1) {
|
|
let nextAttack = random([1, 2, 3, 4, 5]);
|
|
//text(nextAttack, 30, 50);
|
|
if (nextAttack == 1) {
|
|
shotPosX = bossPosX;
|
|
shotPosY = bossPosY;
|
|
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
|
|
}
|
|
if (nextAttack == 2) {
|
|
shotPosX = random(0, width);
|
|
shotPosY = height;
|
|
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
|
|
}
|
|
if (nextAttack == 3) {
|
|
shotPosX = 0;
|
|
shotPosY = random(0, height);
|
|
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
|
|
}
|
|
if (nextAttack == 4) {
|
|
shotPosX = width;
|
|
shotPosY = random(0, height);
|
|
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
|
|
}
|
|
if (nextAttack == 5) {
|
|
shotPosX = random(0, width);
|
|
shotPosY = 0;
|
|
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
|
|
}
|
|
}
|
|
if (patern == 2) {
|
|
let suroundChoice = random([1, 2, 3, 4]);
|
|
if (suroundChoice == 1) {
|
|
shotPosX = x2;
|
|
shotPosY = y2;
|
|
} if (suroundChoice == 2) {
|
|
shotPosX = x3;
|
|
shotPosY = y3;
|
|
} if (suroundChoice == 3) {
|
|
shotPosX = x4;
|
|
shotPosY = y4;
|
|
} if (suroundChoice == 4) {
|
|
shotPosX = x5;
|
|
shotPosY = y5;
|
|
}
|
|
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
|
|
}
|
|
if (!(patern == 2)) {
|
|
bossPosX = width / 2;
|
|
bossPosY = 100;
|
|
}
|
|
if (patern == 3) {
|
|
shotPosX = bossPosX;
|
|
shotPosY = bossPosY;
|
|
angle = 0;
|
|
// changing the angle of the bullets
|
|
for (let i = 0; i < 86; i++) {
|
|
setTimeout(function() {
|
|
bullets.push(new bullet(0, 100, radius, shotSpeed/4, shotPosX, shotPosY, hasMoved, angle));
|
|
angle -= 360 / 1;
|
|
}, i * 100);
|
|
}
|
|
angle = 0;
|
|
}
|
|
if (patern == 4) {
|
|
shotPosX = bossPosX;
|
|
shotPosY = bossPosY;
|
|
angle = 0;
|
|
// changing the angle of the bullets
|
|
for (let i = 0; i < 86; i++) {
|
|
bullets.push(new bullet(0, 100, radius, shotSpeed/4, shotPosX, shotPosY, hasMoved, angle));
|
|
angle -= 360 / 3;
|
|
}
|
|
angle = 0;
|
|
}
|
|
if (patern == 5) {
|
|
let nextAttack = random([1, 2, 3]);
|
|
if (nextAttack == 1) {
|
|
for (let i = 0; i < random(3, 10); i++) {
|
|
let shotWidth = random(0, width);
|
|
shotPosX = shotWidth
|
|
shotPosY = height;
|
|
bullets.push(new bullet(shotWidth, 0, radius, shotSpeed/4, shotPosX, shotPosY, hasMoved, angle));
|
|
}
|
|
}
|
|
if (nextAttack == 2) {
|
|
for (let i = 0; i < random(3, 10); i++) {
|
|
let shotWidth = random(0, width);
|
|
shotPosX = shotWidth
|
|
shotPosY = 0;
|
|
bullets.push(new bullet(shotWidth, height, radius, shotSpeed/4, shotPosX, shotPosY, hasMoved, angle));
|
|
}
|
|
}
|
|
if (nextAttack == 3) {
|
|
for (let i = 0; i < random(3, 10); i++) {
|
|
let shotHeight = random(0, width);
|
|
shotPosX = 0
|
|
shotPosY = shotHeight;
|
|
bullets.push(new bullet(width, shotHeight, radius, shotSpeed/4, shotPosX, shotPosY, hasMoved, angle));
|
|
}
|
|
}
|
|
if (nextAttack == 3) {
|
|
for (let i = 0; i < random(3, 10); i++) {
|
|
let shotHeight = random(0, width);
|
|
shotPosX = width
|
|
shotPosY = shotHeight;
|
|
bullets.push(new bullet(0, shotHeight, radius, shotSpeed/4, shotPosX, shotPosY, hasMoved, angle));
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function homescreen() {
|
|
// push()
|
|
// fill(0, 0, 0, 200)
|
|
// square(0, 0, 1600)
|
|
// pop()
|
|
|
|
// push()
|
|
// fill(255, 0, 0)
|
|
// let buttonHeight = height/2
|
|
// rect(width/2-90, buttonHeight, 200, 40 , 20, 20, 20, 20)
|
|
// textSize(25)
|
|
// fill(0,0,0)
|
|
// text("Start Game", width/2+10, buttonHeight+30)
|
|
// if (mouseX > width/2-90 && mouseX < width/2+110 && mouseY > height/2 && mouseY < buttonHeight+40) {
|
|
// if (mouseIsPressed) {
|
|
// homescreenOn = false;
|
|
// }
|
|
// }
|
|
// pop()
|
|
button(0,0,0 ,width/2-90, height/2, 200, 40, "Start Game")
|
|
button(0,0,0 ,width/2-90, height/2+50, 200, 40, "Scores")
|
|
|
|
push()
|
|
stroke(255,0,0)
|
|
strokeWeight(5)
|
|
fill(0, 255, 0, 0)
|
|
rect(100, 150, 300, 400 , 20, 20, 20, 20)
|
|
pop()
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
|
|
push()
|
|
fill(255, 0, 0)
|
|
rect(buttonX, buttonY, buttonWidth, buttonHeight, 20, 20, 20, 20)
|
|
textSize(25)
|
|
fill(r,g,b)
|
|
text(buttonText, buttonX+100, buttonY+30)
|
|
textAlign(CENTER);
|
|
if (mouseX > buttonX-90 && mouseX < width/2+110 && mouseY > height/2 && mouseY < buttonY+40) {
|
|
if (mouseIsPressed) {
|
|
homescreenOn = false;
|
|
}
|
|
}
|
|
pop()
|
|
}
|
|
|
|
function game(){
|
|
if (!(lives == 0)) {
|
|
// draw player
|
|
push();
|
|
fill(0, 255, 255)
|
|
circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
|
|
pop();
|
|
movementCheck()
|
|
// draw boss
|
|
push();
|
|
fill(255, 165, 0)
|
|
circle(x2, y2, 50);
|
|
pop();
|
|
if (hasMoved == true) {
|
|
push();
|
|
score();
|
|
textSize(10);
|
|
textAlign(LEFT);
|
|
fill(255, 0, 255)
|
|
text(int(time), 10, 20);
|
|
pop();
|
|
}
|
|
if (hasMoved == false) {
|
|
time = 0;
|
|
push();
|
|
score();
|
|
textSize(10);
|
|
textAlign(LEFT);
|
|
fill(255, 0, 255)
|
|
text(0, 10, 20);
|
|
pop();
|
|
}
|
|
|
|
|
|
randomAttackPattern()
|
|
if (patern == 2) {
|
|
suroundX += 2;
|
|
suroundY += 2;
|
|
let sinX = sin(suroundX);
|
|
let cosY = cos(suroundY);
|
|
x2 = map(sinX, -1, 1, playerPosX - 200, playerPosX + 200);
|
|
y2 = map(cosY, -1, 1, playerPosY - 200, playerPosY + 200);
|
|
x3 = map(-sinX, -1, 1, playerPosX - 200, playerPosX + 200);
|
|
y3 = map(-cosY, -1, 1, playerPosY - 200, playerPosY + 200);
|
|
x4 = map(-sinX, -1, 1, playerPosX - 100, playerPosX + 100);
|
|
y4 = map(cosY, -1, 1, playerPosY - 100, playerPosY + 100);
|
|
x5 = map(sinX, -1, 1, playerPosX - 100, playerPosX + 100);
|
|
y5 = map(-cosY, -1, 1, playerPosY - 100, playerPosY + 100);
|
|
push();
|
|
fill(255, 165, 0)
|
|
circle(x3, y3, 50);
|
|
circle(x4, y4, 50);
|
|
circle(x5, y5, 50);
|
|
pop();
|
|
|
|
|
|
} else {
|
|
x2 = width / 2;
|
|
y2 = 100;
|
|
}
|
|
|
|
bullets.forEach(myBullet => {
|
|
//zolang mybullet bestaat blijft hij drawen en updaten
|
|
({ hit, shot, isOffScreen, originalPos } = myBullet.update(playerPosX, playerPosY));
|
|
myBullet.draw();
|
|
|
|
if (isOffScreen == true) {
|
|
myBullet.hit = true;
|
|
shot = false;
|
|
}
|
|
});
|
|
//blijf de bullet tekenen zolang hit false is
|
|
bullets = bullets.filter(bullet => !bullet.hit);
|
|
}
|
|
|
|
} |