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

coverted database interactions and menu to classes

Browse Source
This commit is contained in:
Sam
2024-01-23 19:45:03 +01:00
parent cf843b80c8
commit 68005ea72b
6 changed files with 212 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
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;
}
}
@@ -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()
}
}

28
web/js/Database.js
View File

@@ -1,15 +1,19 @@
class database{
sendData(naam, score) {
fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
}
function sendData(naam, score) {
fetch (`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
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);
});
}
}
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);
});
}

329
web/js/Menu.js
View File

@@ -1,183 +1,164 @@
let searchName = '';
let dataIsCalled = false;
let clearDataOnce = false;
function keyPressed() {
// Check if the back button was selected and the Enter key was pressed
}
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()
}

8
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;