Smikkelbakje/J1B2-Game-controller
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-2/cuujooceevii61

Browse Source
This commit is contained in:
Mees Roelofsz
2024-01-24 11:43:31 +01:00
parent 3e1e1b5c79 73b6b82738
commit 5f359aeef0
25 changed files with 1266 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/.pages
View File

@@ -17,8 +17,9 @@ nav:
- 📚 Documentatie:
- Presentatie: documentatie/presentatie
- Database: documentatie/database
- SQL : documentatie/sql
- PHP : documentatie/php
- P5.md : documentatie/p5
- Feedback : documentatie/Feedback
- User Interface : "documentatie/User Interface"
- Documentatie game : "documentatie/Documentatie game"
- Documentatie game : "documentatie/Documentatie game"
- UML : "documentatie/uml"

47
docs/documentatie/Documentatie game.md
View File

@@ -40,4 +40,49 @@ function canvas2(){
fill(255, 0, 0)
circle (300, 200, 50);
}
```
```
Wat ik later heb gevonden is een betere manier waarbij je een variabel een int maakt en dan een switch statement gebruikt. Dit is een stuk beter dan wat ik heb gedaan. Hieronder staat de code:
```js
let canvasSwitch = 0;
function setup(){
createCanvas(400, 400);
}
function draw(){
//draw a background every frame
background(220)
//switch canvas when spacebar is pressed
if (canvasSwitch == 0){
canvas1();
}
if (canvasSwitch == 1){
canvas2();
}
}
function keyPressed(){
if (keyCode == 32){ // 32 is the keyCode for the space bar
canvasSwitch = 1
}
if (keyCode == 16){ // 16 is the keyCode for the Shift key
canvasSwitch = 0
}
}
//draw a yellow circle on canvas 1
function canvas1(){
fill(255, 255, 0)
circle (200, 200, 50);
}
//draw a red circle on canvas 2
function canvas2(){
fill(255, 0, 0)
circle (300, 200, 50);
}
```

38
docs/documentatie/Feedback.md
View File

@@ -81,16 +81,36 @@ De game moet duidelijker zijn wanneer je het begint met spelen en wat makkelijke
# Feedback doormiddel van game Sprint 3
#### Persoon 1:
Duidelijker maken wat je moet doen als je spel in gaat (persoon was heel confused wat je moest doen)
Is wel pittig
Is wel grappig
* Duidelijker maken wat je moet doen als je spel in gaat (persoon was heel confused wat je moest doen)
* Is wel pittig
* Is wel grappig
#### Persoon 2
Hoe kan ik hem op pauze zetten
Maak het score text groter
Way too hard
Als je door boss dood gaat kan je niet respawnen
Linksboven in game score hoger maken
* Hoe kan ik hem op pauze zetten
* Maak het score text groter
* Way too hard
* Als je door boss dood gaat kan je niet respawnen
* Linksboven in game score hoger maken
#### Persoon 3
Waar ben ik (speler wat duidelijker maken waar hij is)
* Waar ben ik (speler wat duidelijker maken waar hij is)
#### Persoon 4
* Beetje lastig
* Score resetten na zelf scoren invullen (bug)
* Bij score dat je score kan aanpassen ipv heen en weer gaan
#### Persoon 5
* Game is lastig
* Game is verslavend
* Cool spel
* Je moet iemand inhuren om te stoppen met spelen
#### Persoon 6
* Ik ben er heel slecht in
* Duidelijk wat je moet doen
* Is niet te doen
### Conclusie
De game is lastig wat ook de bedoeling was. Mensen vinden het ook leuk en een iemand vond het zelfs verlavend. Verder was het spel ook duidelijk wat je moest doen. We hebben tussen de feedback ook duidelijker gemaakt waar de speler was, waar een iemand moeite bij had. We hebben vergeleken met vorig feedback steeds minder suggesties gekregen en meer positieve feedback over het spel.

3
docs/documentatie/database.md
View File

@@ -3,8 +3,11 @@
We hebben een database gemaakt. De tabel heet scores en heeft de volgende kolommen: Naam, Scores.
![Alt text](../assets/image.png)
### Waarom hebben we voor deze structuur gekozen?
We hebben gekozen om 2 tabellen te maken en een koppel tabel zodat we alle gebruikers met hun code apart kunnen houden en de achievementsoorten apart kunnen houden. We hebben users en scores in dezelfde tabel gezet omdat je per sessie maar 1 score kan hebben en dus niet meerdere scores per gebruiker. Aan die sessie kunnen ook achievements worden gekoppelt en die worden dan in de koppel tabel gezet. We hebben een many to many relatie tussen sessie en achievements omdat een sessie meerdere achievements kan hebben en een achievement meerdere sessies kan hebben.
Om iets in de database te zetten moet je de volgende code gebruiken:

35
docs/documentatie/sql.md → docs/documentatie/php.md
View File

@@ -57,6 +57,41 @@ En je kan meerdere dingen in een echo zetten doormiddel van een punt
```php
echo "Text" . $variabele . "Text";
```
De server laat van zichzelf niet toe dat je data ophaalt vanaf een andere server. Om dit te fixen moet je de volgende code in de php file zetten. Hierdoor laat je alle servers toe om data op te halen van deze server. Wat uiteindelijk niet heel veilig is. Eigenlijk wil je het koppelen aan een domein waardoor je niet vanaf overal data kan versturen.
```php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: *");
```
Op deze manier haal je de laatst gegeneerde id op van de database
```php
$last_id = $conn->insert_id;
```
Om data weer uit de database te halen gebruiken we dit SQL commando
```php
$sql = "SELECT * FROM Scores ORDER BY Score DESC LIMIT 10";
```
Dit selecteerd alle scores uit de tabel scores en sorteerd ze op score en laat de top 10 zien. Daarna moet je ze met json encoden en dan kan je ze weer ophalen in javascript.
```php
$result = $conn->query($sql);
$json = json_encode($result);
```
Later kan je het uitprinten op de website door ```echo $json;``` te doen.
Om de data op te halen in javascript moet je het volgende doen:
```js
return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`)
.then(response => response.json())
.then(data => {
requesteddata = data;
console.log(data);
});
```
Hier word meteen requesteddata een publiek variabel gezet en de json array uitgeprint in console. Waarna je het overal kan gebruiken en beivoorbeeld de highscores kan uitprinten op de website. Bij dit stukje code heb je nog de optie om een naam op te geven, als je dat niet doet dan krijg je de top 10 terug. Als je wel een naam opgeeft dan krijg je alle scores van die naam terug.
---
### Bronnen:
* https://www.w3schools.com/php/php_mysql_select.asp Voor data opvragen uit database

59
docs/documentatie/uml.md Normal file
View File

@@ -0,0 +1,59 @@
### UML game.js
```mermaid
classDiagram
class bullet {
+x
+y
+shot
+angle
+bulletHit
+direction
+directionX
+direcitonY
+hasMoved
+projectile
+radius
+targetx
+targety
+speed
-hit
-shot
-isOffScreen
-originalPos
-targetx
-targety
+draw()
+update(targetx, targety)
}
class Menu {
+controlsImage
+clearDataOnce
+scorescreenOn
+keyReleasedFlag
+dataIsCalled
+requesteddata
+isDead
+iIndex
+currentIndex
+Height
+Width
+homescreen()
+pauseMenu()
+gameOver()
+scoreMenu()
+dodgeBanner()
}
class Database {
+requesteddata
-data
-response
+sendData()
+getData()
}
class Button {
button()
}
Menu --> Database
Menu --> Button
```

29
docs/opdracht/uml.md
View File

@@ -1,29 +0,0 @@
### UML game.js
```mermaid
classDiagram
class bullet {
+x
+y
+shot
+angle
+bulletHit
+direction
+directionX
+direcitonY
+hasMoved
+projectile
+radius
+targetx
+targety
+speed
-hit
-shot
-isOffScreen
-originalPos
-targetx
-targety
+draw()
+update(targetx, targety)
}
```

28
web/game.js
View File

@@ -1,7 +1,11 @@
function preload() {
controlsImage = loadImage('./contols.png');
}
// the function setup() is called once when the page is loaded
function setup() {
// create a canvas element and append it to the body
getData()
DB.getData()
createCanvas(width, height);
frameRate(framerate);
angleMode(DEGREES);
@@ -25,13 +29,16 @@ function reset() {
isDead = false;
entered = false;
buttonSelect = 0;
nameHS = '';
submitted = false;
escaped = false;
bossPosX = width / 2;
bossPosY = height / 6;
bossVelX = 5;
bossVelY = 5;
dataIsCalled = false;
DB.getData();
}
function movementCheck() {
@@ -79,7 +86,7 @@ async function keyPressed() {
homescreenOn = true;
reset();
keyReleasedFlag = false;
getData()
DB.getData()
return;
}
}
@@ -106,7 +113,7 @@ async function keyPressed() {
if (keyCode == ENTER) {
homescreenOn = false;
scorescreenOn = true;
reset();
requesteddata = [];
keyReleasedFlag = false;
}
}
@@ -169,10 +176,11 @@ async function keyPressed() {
}
}
}
}
function submit() {
if (entered == true) {
sendData(nameHS, int(time));
DB.sendData(nameHS, int(time));
console.log(nameHS + ": " + int(time));
nameHS = '';
submitted = true;
@@ -255,7 +263,7 @@ function nameDraw(positiony) {
// the function draw() is called every frame
function draw() {
keyPressed();
gameOver();
Menus.gameOver();
// draw background
background(0, 0, 0, 100);
ffps = frameRate();
@@ -263,7 +271,7 @@ function draw() {
playerSpeed = 300 / ffps;
if (homescreenOn) {
homescreen();
Menus.homescreen();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 0) {
push()
@@ -286,7 +294,7 @@ function draw() {
game();
}
if (scorescreenOn) {
scoremenu();
Menus.scoreMenu();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 1 && entered) {
push()
@@ -298,7 +306,7 @@ function draw() {
}
}
if (pausescreenOn) {
pauseMenu();
Menus.pauseMenu();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 0) {
push()
@@ -353,7 +361,7 @@ function draw() {
}
if (!hasMoved && !isDead && !homescreenOn && !pausescreenOn && !scorescreenOn) {
dodgeBanner();
Menus.dodgeBanner();
}
}
async function randPatern() {

5
web/index.html
View File

@@ -15,10 +15,11 @@
<!-- support p5-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<script src="js/variables.js"></script>
<script src="js/basicbullet.js"></script>
<script src="js/Database.js"></script>
<script src="js/Button.js"></script>
<script src="js/Menu.js"></script>
<script src="js/Database.js"></script>
<script src="js/variables.js"></script>
<script src="game.js"></script>
</head>

14
web/js/Button.js Normal file
View File

@@ -0,0 +1,14 @@
class Button{
button(r, g, b, buttonX, buttonY, buttonText) {
push()
noFill()
rectMode(CENTER);
rect(buttonX, buttonY, buttonWidth, buttonHeight)
textSize(25)
fill(r, g, b)
textAlign(CENTER);
text(buttonText, buttonX, buttonY)
pop()
}
}

35
web/js/Database.js
View File

@@ -1,22 +1,19 @@
class database{
sendData(naam, score) {
fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
}
function sendData(naam, score) {
const request = ( url, params = {}) => {
url += '?' + ( new URLSearchParams( params ) ).toString();
fetch( url );
};
const get = ( url, params ) => request( url, params);
get('https://oege.ie.hva.nl/~hossan/postData.php', { name: naam, score: score } );
getData(naam) {
// Fetch data from the database, put it in an array, and log it to the console
//met backticks als " " kan je variabelen in een string zetten
return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`) // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;
console.log(data);
});
}
}
function getData(name){
// Fetch data from the database, put it in an array, and log it to the console
//met backticks als " " kan je variabelen in een string zetten
return fetch (`https://oege.ie.hva.nl/~hossan/getData.php?name=${name}`) // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;
console.log(data);
});
}

332
web/js/Menu.js
View File

@@ -1,186 +1,164 @@
let buttonSelectScore = 0;
let searchName = '';
let dataIsCalled = false;
let clearDataOnce = false;
function keyPressed() {
// Check if the back button was selected and the Enter key was pressed
if (keyCode == ENTER && buttonSelectScore == 0) {
scorescreenOn = false;
}
}
function preload() {
controlsImage = loadImage('./contols.png');
}
function homescreen() {
textAlign(CENTER, CENTER);
textSize(70);
fill(100, 255, 100);
text("Slime\nSymphony", width / 2, height / 4);
button(255, 255, 255, width / 2, height / 2, "Start Game")
button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30))
}
pop()
//Scores rectangle
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(width / 5, height / 2, width / 4, height / 1.5)
rect(width / 5 * 4, height / 2, width / 4, height / 1.5)
imageMode(CENTER)
image(controlsImage, width / 5 * 4, height / 2, width / 4, height / 1.5)
pop()
push()
textSize(50)
fill(255, 255, 255)
text("Highscores", width / 5, height / 4)
fill(255, 255, 255)
stroke('black');
strokeWeight(4);
text("Controls", width / 5 * 4, height / 4)
pop()
}
function button(r, g, b, buttonX, buttonY, buttonText) {
push()
noFill()
rectMode(CENTER);
rect(buttonX, buttonY, buttonWidth, buttonHeight)
textSize(25)
fill(r, g, b)
textAlign(CENTER);
text(buttonText, buttonX, buttonY)
pop()
}
function pauseMenu() {
textAlign(CENTER);
textSize(50);
fill(255, 255, 255);
text("Paused", width / 2, height / 2 - height / 6);
button(255, 255, 255, width / 2, height / 2, "Resume");
button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu");
}
function scoremenu() {
textAlign(CENTER, CENTER);
textSize(50);
fill(255, 255, 255);
text("Score", width / 2, height / 5);
textSize(32);
text(letters[currentIndex[0]], width / 2 - 30, height / 3);
text(letters[currentIndex[1]], width / 2, height / 3);
text(letters[currentIndex[2]], width / 2 + 30, height / 3);
if (!clearDataOnce) {
requesteddata = [];
clearDataOnce = true;
class Menu {
constructor() {
}
if (scorescreenOn && keyReleasedFlag) {
nameSubmit();
}
homescreen() {
textAlign(CENTER, CENTER);
textSize(70);
fill(100, 255, 100);
text("Slime\nSymphony", width / 2, height / 4);
button.button(255, 255, 255, width / 2, height / 2, "Start Game")
button.button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
if (entered) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 3, 90, 40)
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30))
}
pop()
if (!dataIsCalled) {
getData(nameHS);
dataIsCalled = true;
//Scores rectangle
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(width / 5, height / 2, width / 4, height / 1.5)
rect(width / 5 * 4, height / 2, width / 4, height / 1.5)
imageMode(CENTER)
image(controlsImage, width / 5 * 4, height / 2, width / 4, height / 1.5)
pop()
push()
textSize(50)
fill(255, 255, 255)
text("Highscores", width / 5, height / 4)
fill(255, 255, 255)
stroke('black');
strokeWeight(4);
text("Controls", width / 5 * 4, height / 4)
pop()
}
pauseMenu() {
textAlign(CENTER);
textSize(50);
fill(255, 255, 255);
text("Paused", width / 2, height / 2 - height / 6);
button(255, 255, 255, width / 2, height / 2, "Resume");
button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu");
}
scoreMenu() {
textAlign(CENTER, CENTER);
textSize(50);
fill(255, 255, 255);
text("Score", width / 2, height / 5);
textSize(32);
text(letters[currentIndex[0]], width / 2 - 30, height / 3);
text(letters[currentIndex[1]], width / 2, height / 3);
text(letters[currentIndex[2]], width / 2 + 30, height / 3);
if (!clearDataOnce) {
requesteddata = [];
clearDataOnce = true;
}
if (scorescreenOn && keyReleasedFlag) {
nameSubmit();
}
if (entered) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 3, 90, 40)
pop()
if (!dataIsCalled) {
DB.getData(nameHS);
dataIsCalled = true;
}
}
else {
nameDraw(3);
}
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
//text for name, score, achievements
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score + " " + requesteddata[i].Datum, width / 4, height / 3 + (i * 30))
}
pop()
push()
fill(255, 255, 255)
textSize(16)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Achievements, width / 4 * 3, height / 3 + (i * 30))
}
pop()
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
//box left
rect(width / 4 * 3, height / 2, width / 3.5, height / 1.25)
//box right
rect(width / 4, height / 2, width / 3.5, height / 1.25)
pop()
push()
text("Your scores", width / 4, height / 6)
text("Your achievements", width / 4 * 3, height / 6)
pop()
push()
button.button(255, 255, 255, width / 2, height / 2, "Main Menu")
pop()
}
gameOver() {
if (lives <= 0) {
//game over screen
iIndex = constrain(iIndex, 0, 2);
isDead = true;
push();
fill(255, 0, 0);
textSize(60);
textAlign(CENTER, CENTER);
text("Game Over", width / 2, height / 2 - height / 5);
fill(255, 255, 255)
textSize(18);
text("Score: " + int(time), width / 2, height / 2 - height / 8);
textSize(32);
textAlign(CENTER, CENTER);
text(letters[currentIndex[0]], width / 2 - 30, height / 2);
text(letters[currentIndex[1]], width / 2, height / 2);
text(letters[currentIndex[2]], width / 2 + 30, height / 2);
text("Restart", width / 2, height / 2 + height / 12);
text("Main Menu", width / 2, height / 2 + height / 6);
pop();
}
}
else {
nameDraw(3);
dodgeBanner() {
push()
fill(255, 0, 0)
textSize(100)
textAlign(CENTER, CENTER)
text("Dodge!", width / 2, height / 2)
pop()
}
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
//text for name, score, achievements
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score + " " + requesteddata[i].Datum, width / 4, height / 3 + (i * 30))
}
pop()
push()
fill(255, 255, 255)
textSize(16)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Achievements, width / 4 * 3, height / 3 + (i * 30))
}
pop()
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
//box left
rect(width / 4 * 3, height / 2, width / 3.5, height / 1.25)
//box right
rect(width / 4, height / 2, width / 3.5, height / 1.25)
pop()
push()
text("Your scores", width / 4, height / 6)
text("Your achievements", width / 4 * 3, height / 6)
pop()
push()
button(255, 255, 255, width / 2, height / 2, "Main Menu")
pop()
}
function gameOver() {
if (lives <= 0) {
//game over screen
iIndex = constrain(iIndex, 0, 2);
isDead = true;
push();
fill(255, 0, 0);
textSize(60);
textAlign(CENTER, CENTER);
text("Game Over", width / 2, height / 2 - height / 5);
fill(255, 255, 255)
textSize(18);
text("Score: " + int(time), width / 2, height / 2 - height / 8);
textSize(32);
textAlign(CENTER, CENTER);
text(letters[currentIndex[0]], width / 2 - 30, height / 2);
text(letters[currentIndex[1]], width / 2, height / 2);
text(letters[currentIndex[2]], width / 2 + 30, height / 2);
text("Restart", width / 2, height / 2 + height / 12);
text("Main Menu", width / 2, height / 2 + height / 6);
pop();
}
}
function dodgeBanner(){
push()
fill(255, 0, 0)
textSize(100)
textAlign(CENTER, CENTER)
text("Dodge!", width / 2, height / 2)
pop()
}

9
web/js/variables.js
View File

@@ -1,4 +1,8 @@
//--------------------Game--------------------
// Classes
const Menus = new Menu();
const button = new Button();
const DB = new database();
// Game variables
const width = window.innerWidth;
const height = window.innerHeight;
@@ -10,7 +14,9 @@ let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let currentIndex = [0, 0, 0];
let nameHS = '';
let pressed = false;
let searchName = '';
let dataIsCalled = false;
let clearDataOnce = false;
// Player variables
const playerSize = 10;
let radius = playerSize / 2;
@@ -67,6 +73,7 @@ let entered = false;
let submitted = false;
let keyReleasedFlag = true;
let escaped = false;
let buttonSelectScore = 0;
let bulletAmount = 5;

6
webdev/Serial.js.old → webdev/Serial.js
View File

@@ -29,6 +29,7 @@ async function readLoop() {
if (singleByte != 10) {
buffer.push(singleByte);
}
else {
let sensorString = decoder.decode(new Uint8Array(buffer));
//Put all data in a json Array and parse it to a boolean array
@@ -41,6 +42,9 @@ async function readLoop() {
//Convert the array of strings to a boolean array
//When a bit is 1 it becomes true, when a bit is 0 it becomes false
let booleanArray = SerialArray.map(bit => bit == '1');
// Dispatch an event with booleanArray as detail
let event = new CustomEvent('booleanArrayUpdated', { detail: booleanArray });
window.dispatchEvent(event);
console.log(booleanArray);
} else {
console.error("Dit is geen Array");
@@ -60,6 +64,8 @@ async function readLoop() {
}
}
// Sluit de poort
async function disconnect() {
await reader.cancel();

BIN
webdev/background.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 B

66
webdev/basicbullet.js
View File

@@ -1,66 +0,0 @@
class bullet {
constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) { // Add hasMoved parameter
// add all incoming variables to the class
this.angle = radians(angle);
this.targetx = targetx;
this.targety = targety;
this.x = shotPosX;
this.y = shotPosY;
this.radius = radius;
this.speed = speed;
this.bulletHit = false;
this.directionX = null;
this.directionY = null;
this.hasMoved = hasMoved;
// Set a variable that cant be changed
if ((this.directionX === null) || (this.directionY === null)) {
this.directionX = this.targetx;
this.directionY = this.targety;
}
// create a vector for the projectile and the direction
this.projectile = createVector(this.x, this.y);
this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y);
this.direction.normalize();
// rotate the direction towards the player
this.direction.rotate(this.angle);
}
draw() {
//draw the bullet
push();
fill(0, 255, 0);
circle(this.projectile.x, this.projectile.y, this.radius);
pop();
}
update(targetx, targety) {
// keeps the projetile updated so hit collision can be checked
this.targetx = targetx;
this.targety = targety;
// update the projectile
this.projectile.add(p5.Vector.mult(this.direction, this.speed));
let hit = false;
let shot = true;
// check if the projectile has hit the player
if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius) {
hit = true;
shot = false;
// if the projectile has hit the player and the player has lives left, remove a life
if (this.hasMoved && lives != 0 && this.bulletHit == false) {
this.bulletHit = true;
lives -= 1;
}
//if the bullet hits one of the wall reset the shot variable so a new wave of bullets can be fired
} else if (this.projectile.x < 0 - 10 || this.projectile.x > width + 10 || this.projectile.y < 0 - 10 || this.projectile.y > height + 10) {
shot = false;
}
// check if the projectile is off screen so it can be removed
let isOffScreen = this.projectile.x < 0 || this.projectile.x > width || this.projectile.y < 0 || this.projectile.y > height;
//unused variable to check if the projetile passsed the original player position when it was fired
let originalPos = this.projectile.x == this.targetx || this.projectile.y == this.targety;
// return all the variables
return { hit, shot, isOffScreen, originalPos };
}
}

BIN
webdev/contols.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

634
webdev/game.js
View File

@@ -1,94 +1,24 @@
//--------------------Game--------------------
// Game variables
const width = 1260;
const height = 620;
let requesteddata = [];
// Menu variables
let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let currentIndex = [0, 0, 0];
let nameHS = '';
let pressed = false;
function preload() {
controlsImage = loadImage('./contols.png');
}
// 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 isDead = false;
let bossPosX = width / 2;
let bossPosY = 100;
let shotSpeed = 16;
let shotSpeedAdj;
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 = 60;
let hasMoved = false;
let time = 0;
let shotPoint = 0;
let angle = 0;
let patern;
let paternArray = [];
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 finalPhase = false;
let nextWave = [];
let iIndex = 0;
let buttonSelectDead = 0;
let buttonSelectHome = 0;
let buttonSelectPause = 0;
let entered = false;
let submitted = false;
let bulletAmount = 5;
let phases = [false, false, false, false, false];
//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
getData()
DB.getData()
createCanvas(width, height);
frameRate(framerate);
angleMode(DEGREES);
rectMode(CENTER);
// disable the outline of shapes
Movementloop()
noStroke();
// bg = loadImage('background.webp');
}
function score() {
time += 3 / framerate;
}
function reset() {
lives = 1;
time = 0;
bounceX = bossPosX;
bounceY = bossPosY;
initialPlayerPosX = playerPosX;
initialPlayerPosY = playerPosY;
hasMoved = false;
@@ -98,38 +28,17 @@ function reset() {
finalPhase = false;
isDead = false;
entered = false;
buttonSelectDead = 0;
buttonSelect = 0;
nameHS = '';
submitted = false;
getData()
}
escaped = false;
bossPosX = width / 2;
bossPosY = height / 6;
bossVelX = 5;
bossVelY = 5;
dataIsCalled = false;
DB.getData();
function gameOver() {
if (lives == 0) {
//game over screen
iIndex = constrain(iIndex, 0, 2);
buttonSelectDead = constrain(buttonSelectDead, 0, 2);
isDead = true;
push();
fill(255, 0, 0);
textSize(40);
textAlign(CENTER);
text("Game Over", width / 2, height / 2 - 80);
fill(255, 255, 255)
textSize(18);
textAlign(CENTER);
text("Score: " + int(time), width / 2, height / 2 - 55);
textSize(32);
text(letters[currentIndex[0]], width / 2 - 30, height / 2);
text(letters[currentIndex[1]], width / 2, height / 2);
text(letters[currentIndex[2]], width / 2 + 30, height / 2);
text("Restart", width / 2, height / 2 + 45);
text("Main Menu", width / 2, height / 2 + 90);
pop();
}
}
function movementCheck() {
@@ -138,9 +47,8 @@ function movementCheck() {
hasMoved = true;
}
}
async function keyPressed() {
if (!isDead) {
if (!isDead && !homescreenOn && !pausescreenOn) {
if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
playerPosX -= playerSpeed;
}
@@ -155,80 +63,132 @@ async function keyPressed() {
}
}
if (isDead && keyReleasedFlag && !entered) {
if ((!(iIndex > 2)) || (!(iIndex < 0))) {
if (keyCode == LEFT_ARROW) {
iIndex -= 1;
keyReleasedFlag = false;
}
if (keyCode == RIGHT_ARROW) {
iIndex += 1;
keyReleasedFlag = false;
}
}
if (keyCode == UP_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] - 1 + letters.length) % letters.length;
keyReleasedFlag = false;
}
if (keyCode == ENTER) {
nameHS += letters[currentIndex[0]];
nameHS += letters[currentIndex[1]];
nameHS += letters[currentIndex[2]];
entered = true;
submit();
keyReleasedFlag = false;
}
nameSubmit();
}
if (isDead && keyReleasedFlag && entered) {
buttonSelect = constrain(buttonSelect, 0, 2);
if (keyCode == UP_ARROW) {
buttonSelectDead -= 1;
buttonSelect -= 1;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
buttonSelectDead += 1;
buttonSelect += 1;
keyReleasedFlag = false;
}
if (buttonSelectDead == 0) {
if (keyCode == RIGHT_ARROW && !submitted) {
entered = false;
nameHS = '';
keyReleasedFlag = false;
}
if (keyCode == ENTER) {
keyReleasedFlag = false;
}
}
if (buttonSelectDead == 1) {
if (buttonSelect == 1) {
if (keyCode == ENTER) {
//reset all the variables so the game can be played again
reset();
}
}
if (buttonSelectDead == 2) {
if (buttonSelect == 2) {
if (keyCode == ENTER) {
homescreenOn = true;
reset();
keyReleasedFlag = false;
DB.getData()
return;
}
}
}
if (homescreenOn && keyReleasedFlag) {
buttonSelect = constrain(buttonSelect, 0, 1);
if (keyCode == UP_ARROW) {
buttonSelect -= 1;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
buttonSelect += 1;
keyReleasedFlag = false;
}
if (buttonSelect == 0) {
if (keyCode == ENTER) {
console.log("start game");
homescreenOn = false;
gamescreenOn = true;
reset();
}
}
if (buttonSelect == 1) {
if (keyCode == ENTER) {
homescreenOn = false;
scorescreenOn = true;
keyReleasedFlag = false;
requesteddata = [];
}
}
}
if (scorescreenOn && keyReleasedFlag && entered) {
buttonSelect = constrain(buttonSelect, 0, 1);
if (keyCode == UP_ARROW) {
buttonSelect -= 1;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
buttonSelect += 1;
keyReleasedFlag = false;
}
if (buttonSelect == 1 && entered) {
if (keyCode == ENTER) {
homescreenOn = true;
scorescreenOn = false;
reset();
keyReleasedFlag = false;
}
}
}
if (!homescreenOn && !isDead && !scorescreenOn && keyReleasedFlag) {
buttonSelect = constrain(buttonSelect, 0, 1);
if (keyCode == 27 && !escaped) {
escaped = true;
console.log("pause");
pausescreenOn = true;
keyReleasedFlag = false;
}
if (escaped) {
if (keyCode == UP_ARROW) {
buttonSelect -= 1;
keyReleasedFlag = false;
console.log(buttonSelect)
}
if (keyCode == DOWN_ARROW) {
buttonSelect += 1;
keyReleasedFlag = false;
console.log(buttonSelect)
}
if (buttonSelect == 0) {
if (keyCode == ENTER) {
console.log("resume");
pausescreenOn = false;
keyReleasedFlag = false;
escaped = false;
}
}
if (buttonSelect == 1) {
if (keyCode == ENTER) {
console.log("main menu");
homescreenOn = true;
pausescreenOn = false;
escaped = false;
reset();
keyReleasedFlag = false;
}
}
}
}
}
}
function submit() {
if (entered == true) {
sendData(nameHS, int(time));
DB.sendData(nameHS, int(time));
console.log(nameHS + ": " + int(time));
nameHS = '';
submitted = true;
}
}
function keyReleased() {
keyReleasedFlag = true; // Set the flag to true when a key is released
}
function wait(waitTime) {
return new Promise(resolve => {
setTimeout(() => {
@@ -236,94 +196,173 @@ function wait(waitTime) {
}, waitTime);
});
}
async function Movementloop() {
//get info from controller and use it to move the player
window.addEventListener('booleanArrayUpdated', function (event) {
let booleanArray = event.detail;
if (booleanArray[1]) {
playerPosX += playerSpeed;
function nameSubmit() {
iIndex = constrain(iIndex, 0, 2);
if ((!(iIndex > 2)) || (!(iIndex < 0))) {
if (keyCode == LEFT_ARROW) {
console.log(iIndex);
iIndex -= 1;
keyReleasedFlag = false;
}
if (booleanArray[3]) {
playerPosX -= playerSpeed;
if (keyCode == RIGHT_ARROW) {
console.log(iIndex);
iIndex += 1;
keyReleasedFlag = false;
}
if (booleanArray[2]) {
playerPosY += playerSpeed;
}
if (keyCode == UP_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
console.log(currentIndex[iIndex])
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] - 1 + letters.length) % letters.length;
console.log(currentIndex[iIndex])
keyReleasedFlag = false;
}
if (keyCode == ENTER) {
nameHS += letters[currentIndex[0]];
nameHS += letters[currentIndex[1]];
nameHS += letters[currentIndex[2]];
entered = true;
if (isDead) {
submit();
} else {
// do nothing
}
if (booleanArray[0]) {
playerPosY -= playerSpeed;
}
});
keyReleasedFlag = false;
}
}
function nameDraw(positiony) {
if (iIndex == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 30, height / positiony, 30, 40)
pop()
}
if (iIndex == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / positiony, 30, 40)
pop()
}
if (iIndex == 2) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 + 30, height / positiony, 30, 40)
pop()
}
}
// the function draw() is called every frame
function draw() {
keyPressed();
gameOver();
Menus.gameOver();
// draw background
background(0, 0, 0, 100);
ffps = frameRate();
shotSpeed = 1000 / ffps;
playerSpeed = 300 / ffps;
if (homescreenOn == true) {
homescreen();
if (homescreenOn) {
Menus.homescreen();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 2, buttonWidth, buttonHeight)
pop()
}
if (buttonSelect == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
pop()
}
}
if (homescreenOn == false) {
if (!homescreenOn && !scorescreenOn && !isDead) {
game();
}
if (isDead == true) {
if (entered == true) {
if (buttonSelectDead == 0) {
if (scorescreenOn) {
Menus.scoreMenu();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 1 && entered) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 2, buttonWidth, buttonHeight)
pop()
}
}
if (pausescreenOn) {
Menus.pauseMenu();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rectMode(CENTER);
rect(width / 2, height / 2, buttonWidth, buttonHeight)
pop()
}
if (buttonSelect == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rectMode(CENTER);
rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
pop()
}
}
if (isDead) {
buttonSelect = constrain(buttonSelect, 0, 2);
if (entered) {
if (buttonSelect == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 45, height / 2 - 30, 90, 40)
rect(width / 2, height / 2, 90, 40)
pop()
}
if (buttonSelectDead == 1) {
if (buttonSelect == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 55, height / 2 + 15, 110, 40)
rect(width / 2, height / 2 + height / 12, 110, 40)
pop()
}
if (buttonSelectDead == 2) {
if (buttonSelect == 2) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 80, height / 2 + 60, 160, 40)
rect(width / 2, height / 2 + height / 6, 160, 40)
pop()
}
}
else {
if (iIndex == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 45, height / 2 - 30, 30, 40)
pop()
}
if (iIndex == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 15, height / 2 - 30, 30, 40)
pop()
}
if (iIndex == 2) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 + 15, height / 2 - 30, 30, 40)
pop()
}
nameDraw(2);
}
}
if (!hasMoved && !isDead && !homescreenOn && !pausescreenOn && !scorescreenOn) {
Menus.dodgeBanner();
}
}
async function randPatern() {
patern = random(paternArray);
@@ -353,7 +392,6 @@ async function randPatern() {
}
}
function randomAttackPattern() {
if (shot == false || hit == true) {
for (i = 0; i < bulletAmount; i++) {
@@ -361,12 +399,11 @@ function randomAttackPattern() {
}
}
}
function phase() {
switch (true) {
case (time < 20):
case (time < 10):
phases[0] = true;
paternArray = [1,2,3,4,5];
paternArray = [5];
shotSpeedAdj = 2;
push();
fill(255, 0, 255);
@@ -375,8 +412,8 @@ function phase() {
text("phase 1", 10, 50);
pop();
break;
case (time < 60):
shotSpeedAdj = 5;
case (time < 20):
shotSpeedAdj = 3;
paternArray = [5];
phases[0] = false;
phases[1] = true;
@@ -387,7 +424,7 @@ function phase() {
text("phase 2", 10, 50);
pop();
break;
case (time < 90):
case (time < 40):
phases[1] = false;
phases[2] = true;
paternArray = [2];
@@ -398,7 +435,7 @@ function phase() {
text("phase 3", 10, 50);
pop();
break;
case (time < 120):
case (time < 70):
phases[2] = false;
phases[3] = true;
paternArray = [3, 4];
@@ -409,7 +446,7 @@ function phase() {
text("phase 4", 10, 50);
pop();
break;
case (time >= 120):
case (time >= 90):
phases[3] = false;
phases[4] = false;
finalPhase = true;
@@ -423,7 +460,6 @@ function phase() {
break;
}
}
function spawnRandomBullet() {
if (chosen == false) {
randPatern();
@@ -475,10 +511,6 @@ function spawnRandomBullet() {
}
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;
@@ -545,87 +577,78 @@ function spawnRandomBullet() {
bulletAmount = 5;
}
}
function homescreen() {
textAlign(CENTER);
button(255, 255, 255, width / 2 - 90, height / 2, 200, 40, "Start Game")
button(255, 255, 255, width / 2 - 90, height / 2 + 50, 200, 40, "Scores")
push()
stroke(255, 255, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(100, 150, 300, 400)
pop()
//highscores rectangle
push()
textSize(50)
fill(255, 255, 255)
text("Highscores", 250, 200)
pop()
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER)
// if (requesteddata.length > 0) {
// text("1. " + requesteddata[0].Naam + ": " + requesteddata[0].Score, 250, 250)
// }
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, 250, 250 + (i * 30))
function bouncing() {
// Update position
bossPosX += bossVelX;
bossPosY += bossVelY;
// Check for bounce
if (bossPosX > width - 25) {
bossVelX = random([-4, -5, -6, -7]);
}
pop()
push()
stroke(255, 255, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(860, 150, 300, 400)
pop()
push()
textSize(50)
fill(255, 255, 255)
text("Controls", 1000, 200)
pop()
}
function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
push()
fill(0, 0, 50)
rect(buttonX, buttonY, buttonWidth, buttonHeight)
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;
}
if (bossPosX < 25) {
bossVelX = random([4, 5, 6, 7]);
}
if (bossPosY > height - 25) {
bossVelY = random([-4, -5, -6, -7]);
}
if (bossPosY < 25) {
bossVelY = random([4, 5, 6, 7]);
}
// Draw the boss
circle(bossPosX, bossPosY, 50);
if ((dist(bossPosX, bossPosY, playerPosX, playerPosY) <= 25 + radius) && hasMoved) {
lives -= 1;
}
pop()
}
function game() {
if (!(lives == 0)) {
// draw player
phase();
movementCheck();
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);
fill(0, 255, 0);
if (!pausescreenOn) {
push();
fill(0, 255, 255);
circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
stroke('yellow');
strokeWeight(1);
noFill();
circle (playerPosX, playerPosY, playerSize*2);
pop();
if (phases[2] == false || phase[3] == false) {
bouncing();
} else if (phases[2] = true) {
bossPosX = x2;
bossPosY = y2;
} else {
bossPosX = width / 2;
bossPosY = height / 6;
}
bullets.forEach(myBullet => {
//zolang mybullet bestaat blijft hij drawen en updaten
({ hit, shot, isOffScreen, originalPos } = myBullet.update(playerPosX, playerPosY, hasMoved, radius));
myBullet.draw();
if (isOffScreen == true) {
myBullet.hit = true;
shot = false;
}
});
//blijf de bullet tekenen zolang hit false is
bullets = bullets.filter(bullet => !bullet.hit);
}
pop();
if (hasMoved == true) {
push();
score();
if (!pausescreenOn) {
score();
}
textSize(10);
textAlign(LEFT);
fill(255, 0, 255)
@@ -659,50 +682,15 @@ function game() {
x5 = map(sinX, -1, 1, playerPosX - 100, playerPosX + 100);
y5 = map(-cosY, -1, 1, playerPosY - 100, playerPosY + 100);
push();
fill(255, 165, 0)
fill(0, 255, 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);
}
}
function sendData(naam, score) {
const request = ( url, params = {}) => {
url += '?' + ( new URLSearchParams( params ) ).toString();
fetch( url );
};
const get = ( url, params ) => request( url, params);
get('https://oege.ie.hva.nl/~hossan/postData.php', { name: naam, score: score } );
}
function getData(){
// Fetch data from the database, put it in an array, and log it to the console
return fetch ('https://oege.ie.hva.nl/~hossan/getData.php') // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;
});
}
}

17
webdev/index.html
View File

@@ -1,17 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
overflow: hidden;
margin: 0%;
}
</style>
<title>Open Dag Game</title>
<!-- support p5-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<script src="basicbullet.js"></script>
<script src="js/basicbullet.js"></script>
<script src="js/Button.js"></script>
<script src="js/Menu.js"></script>
<script src="js/Database.js"></script>
<script src="js/variables.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>

14
webdev/js/Button.js Normal file
View File

@@ -0,0 +1,14 @@
class Button{
button(r, g, b, buttonX, buttonY, buttonText) {
push()
noFill()
rectMode(CENTER);
rect(buttonX, buttonY, buttonWidth, buttonHeight)
textSize(25)
fill(r, g, b)
textAlign(CENTER);
text(buttonText, buttonX, buttonY)
pop()
}
}

19
webdev/js/Database.js Normal file
View File

@@ -0,0 +1,19 @@
class database{
sendData(naam, score) {
fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
}
getData(naam) {
// Fetch data from the database, put it in an array, and log it to the console
//met backticks als " " kan je variabelen in een string zetten
return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`) // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;
console.log(data);
});
}
}

164
webdev/js/Menu.js Normal file
View File

@@ -0,0 +1,164 @@
class Menu {
constructor() {
}
homescreen() {
textAlign(CENTER, CENTER);
textSize(70);
fill(100, 255, 100);
text("Slime\nSymphony", width / 2, height / 4);
button.button(255, 255, 255, width / 2, height / 2, "Start Game")
button.button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30))
}
pop()
//Scores rectangle
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(width / 5, height / 2, width / 4, height / 1.5)
rect(width / 5 * 4, height / 2, width / 4, height / 1.5)
imageMode(CENTER)
image(controlsImage, width / 5 * 4, height / 2, width / 4, height / 1.5)
pop()
push()
textSize(50)
fill(255, 255, 255)
text("Highscores", width / 5, height / 4)
fill(255, 255, 255)
stroke('black');
strokeWeight(4);
text("Controls", width / 5 * 4, height / 4)
pop()
}
pauseMenu() {
textAlign(CENTER);
textSize(50);
fill(255, 255, 255);
text("Paused", width / 2, height / 2 - height / 6);
button(255, 255, 255, width / 2, height / 2, "Resume");
button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu");
}
scoreMenu() {
textAlign(CENTER, CENTER);
textSize(50);
fill(255, 255, 255);
text("Score", width / 2, height / 5);
textSize(32);
text(letters[currentIndex[0]], width / 2 - 30, height / 3);
text(letters[currentIndex[1]], width / 2, height / 3);
text(letters[currentIndex[2]], width / 2 + 30, height / 3);
if (!clearDataOnce) {
requesteddata = [];
clearDataOnce = true;
}
if (scorescreenOn && keyReleasedFlag) {
nameSubmit();
}
if (entered) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 3, 90, 40)
pop()
if (!dataIsCalled) {
DB.getData(nameHS);
dataIsCalled = true;
}
}
else {
nameDraw(3);
}
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
//text for name, score, achievements
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score + " " + requesteddata[i].Datum, width / 4, height / 3 + (i * 30))
}
pop()
push()
fill(255, 255, 255)
textSize(16)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Achievements, width / 4 * 3, height / 3 + (i * 30))
}
pop()
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
//box left
rect(width / 4 * 3, height / 2, width / 3.5, height / 1.25)
//box right
rect(width / 4, height / 2, width / 3.5, height / 1.25)
pop()
push()
text("Your scores", width / 4, height / 6)
text("Your achievements", width / 4 * 3, height / 6)
pop()
push()
button.button(255, 255, 255, width / 2, height / 2, "Main Menu")
pop()
}
gameOver() {
if (lives <= 0) {
//game over screen
iIndex = constrain(iIndex, 0, 2);
isDead = true;
push();
fill(255, 0, 0);
textSize(60);
textAlign(CENTER, CENTER);
text("Game Over", width / 2, height / 2 - height / 5);
fill(255, 255, 255)
textSize(18);
text("Score: " + int(time), width / 2, height / 2 - height / 8);
textSize(32);
textAlign(CENTER, CENTER);
text(letters[currentIndex[0]], width / 2 - 30, height / 2);
text(letters[currentIndex[1]], width / 2, height / 2);
text(letters[currentIndex[2]], width / 2 + 30, height / 2);
text("Restart", width / 2, height / 2 + height / 12);
text("Main Menu", width / 2, height / 2 + height / 6);
pop();
}
}
dodgeBanner() {
push()
fill(255, 0, 0)
textSize(100)
textAlign(CENTER, CENTER)
text("Dodge!", width / 2, height / 2)
pop()
}
}

66
webdev/js/basicbullet.js Normal file
View File

@@ -0,0 +1,66 @@
class bullet {
constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) { // Add hasMoved parameter
// add all incoming variables to the class
this.angle = radians(angle);
this.targetx = targetx;
this.targety = targety;
this.x = shotPosX;
this.y = shotPosY;
this.radius = radius;
this.speed = speed;
this.bulletHit = false;
this.directionX = null;
this.directionY = null;
// Set a variable that cant be changed
if ((this.directionX === null) || (this.directionY === null)) {
this.directionX = this.targetx;
this.directionY = this.targety;
}
// create a vector for the projectile and the direction
this.projectile = createVector(this.x, this.y);
this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y);
this.direction.normalize();
// rotate the direction towards the player
this.direction.rotate(this.angle);
}
draw() {
//draw the bullet
push();
fill(0, 255, 0);
circle(this.projectile.x, this.projectile.y, this.radius);
pop();
}
update(targetx, targety, hasMoved, radius) {
// keeps the projetile updated so hit collision can be checked
this.targetx = targetx;
this.targety = targety;
// update the projectile
this.projectile.add(p5.Vector.mult(this.direction, this.speed));
let hit = false;
let shot = true;
let travelled = false;
// check if the projectile has hit the player
if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius + radius) {
hit = true;
shot = false;
// if the projectile has hit the player and the player has lives left, remove a life
if (hasMoved && lives != 0 && this.bulletHit == false) {
this.bulletHit = true;
lives -= 1;
}
//if the bullet hits one of the wall reset the shot variable so a new wave of bullets can be fired
} else if (this.projectile.x < 0 - 10 || this.projectile.x > width + 10 || this.projectile.y < 0 - 10 || this.projectile.y > height + 10) {
shot = false;
}
// check if the projectile is off screen so it can be removed
let isOffScreen = this.projectile.x < 0 || this.projectile.x > width || this.projectile.y < 0 || this.projectile.y > height;
//unused variable to check if the projetile passsed the original player position when it was fired
let originalPos = this.projectile.x == this.targetx || this.projectile.y == this.targety;
// return all the variables
return { hit, shot, isOffScreen, originalPos };
}
}

80
webdev/js/variables.js Normal file
View File

@@ -0,0 +1,80 @@
//--------------------Game--------------------
// Classes
const Menus = new Menu();
const button = new Button();
const DB = new database();
// Game variables
const width = window.innerWidth;
const height = window.innerHeight;
let requesteddata = [];
let buttonWidth = width / 6
let buttonHeight = buttonWidth / 5
// Menu variables
let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let currentIndex = [0, 0, 0];
let nameHS = '';
let pressed = false;
let searchName = '';
let dataIsCalled = false;
let clearDataOnce = false;
// Player variables
const playerSize = 10;
let radius = playerSize / 2;
let playerPosX = 500
let playerPosY = 300;
let playerSpeed = 4;
let lives = 1;
let isDead = false;
let bossPosX = width / 2;
let bossPosY = height / 6;
let bossVelX = 5;
let bossVelY = 5;
let shotSpeed = 12;
let shotSpeedAdj;
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 paternArray = [];
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 pausescreenOn = false;
let scorescreenOn = false;
let gamescreenOn = false;
let chosen = false;
let finalPhase = false;
let nextWave = [];
let iIndex = 0;
let buttonSelect = 0;
let entered = false;
let submitted = false;
let keyReleasedFlag = true;
let escaped = false;
let buttonSelectScore = 0;
let bulletAmount = 5;
let phases = [false, false, false, false, false];

202
webdev/reference.js Normal file
View File

@@ -0,0 +1,202 @@
//--------------------Game--------------------
// Game variables
const width = 1000;
const height = 600;
// Player variables
const playerSize = 10;
let radius = playerSize / 2;
let playerPosX = 500
let playerPosY = 300;
let playerSpeed = 3;
let booleanArray = window.booleanArray;
let lives = 2;
let bossPosX = 500;
let bossPosY = 100;
let shotSpeed = 15;
let projectile;
let projSize = 5;
let shot;
let hit;
let shotPosX;
let shotPosY;
let nextAttack;
let bounceX = bossPosX;
let bounceY = bossPosY;
let predictiveBounceX;
let predictiveBounceY;
let time = 0;
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(120);
// disable the outline of shapes
Movementloop()
noStroke();
}
async function score() {
while (true) {
time += 1;
await sleep(1000);
}
}
function life() {
textAlign(CENTER);
text(lives, 500, 20);
if (hit == true) {
hit = false;
lives -= 1;
}
if (lives == 0) {
fill(255, 0, 0);
textSize(40);
textAlign(CENTER);
text("Game Over", 500, 300);
}
if (key == ' ') {
lives = 2;
time = 0;
bounceX = bossPosX;
bounceY = bossPosY;
}
}
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;
}
}
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;
}
});
}
function shoot(directionX, directionY) {
shot = true;
hit = false;
if (!projectile) {
// Set the initial position of the projectile to the player's position
projectile = createVector(shotPosX, shotPosY);
targetX = directionX;
targetY = directionY;
// Calculate the initial direction
direction = createVector(targetX - projectile.x, targetY - projectile.y);
direction.normalize();
}
// Draw the small circle (projectile)
fill(255, 0, 0);
circle(projectile.x, projectile.y, projSize);
// Move the projectile towards the movable circle
projectile.add(p5.Vector.mult(direction, shotSpeed));
if (dist(projectile.x, projectile.y, directionX, directionY) <= radius+(projSize/2)) {
projectile = null;
hit = true;
}
else if (projectile.x < 0 - 10 || projectile.x > width + 10 || projectile.y < 0 - 10 || projectile.y > height + 10) {
bounceX = projectile.x;
bounceY = projectile.y;
projectile = null;
shot = false;
}
}
// the function draw() is called every frame
function draw() {
shot = false;
textSize(10);
keyPressed();
life();
// draw background
myBullet.draw();
background(0, 0, 0, 100);
if (!(lives == 0)) {
// draw player
fill(0, 255, 255)
circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
// draw boss
fill(255, 165, 0)
circle(500, 100, 50);
score();
textAlign(LEFT);
text(time, 10, 20);
if (shot == false || hit == true) {
let patern = random([1]);
if (patern == 1) {
nextAttack = random([1, 2, 3, 4, 5]);
text(nextAttack, 30, 50);
if (nextAttack == 1) {
shotPosX = 500;
shotPosY = 100;
shoot(playerPosX, playerPosY);
}
if (nextAttack == 2) {
shotPosX = random(0, 1000);
shotPosY = 600;
shoot(playerPosX, playerPosY);
}
if (nextAttack == 3) {
shotPosX = 0;
shotPosY = random(0, 600);
shoot(playerPosX, playerPosY);
}
if (nextAttack == 4) {
shotPosX = 1000;
shotPosY = random(0, 600);
shoot(playerPosX, playerPosY);
}
if (nextAttack == 5) {
shotPosX = bounceX;
shotPosY = bounceY;
shoot(playerPosX, playerPosY);
}
}
// if (patern == 2) {
// shotPosX = bounceX;
// shotPosY = bounceY;
// shoot(playerPosX, playerPosY);
// }
}
}
}