diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache index 0f1c3a3..81d679a 100644 --- a/.firebase/hosting.ZGlzdA.cache +++ b/.firebase/hosting.ZGlzdA.cache @@ -1,16 +1,16 @@ -index.html,1719475104743,132277ccff9baf0fd6eab16495f83edfd1286c7b8659cfc5416f886fd138891f -assets/vampire-mPAYI4wv.webp,1719475104743,145a9ec22ac87737a918eda21976c720072c9ff911249ab6fa152b4b47f70fb1 -assets/skull-4aD260e8.webp,1719475104743,a0455c53b48ea85405948295f0cf7d15aaafec7f45b28f5994101d3df5ca605e -assets/scoreboard-C4un5giP.webp,1719475104743,ebbf61adeecb7609764907312305f64ad0b20d988f236339b1e748cde9e7bec1 -assets/pixelify-sans-latin-ext-wght-normal-DEDzhmUG.woff2,1719475104743,c6277cd196d476ffc30a787acd0e38824a13ed166d16dda2a762872aa448bd7d -assets/pixelify-sans-latin-wght-normal-vdc2vUDH.woff2,1719475104743,c066c80d2f859f8733dcfc1b86a970ef829c99884c11b5be87491a5bd98bca20 -assets/index-BRaHDP-w.css,1719475104743,5cb5c03cfaaec53345e8bf34a9ace766cabf2dd16f8eaecb0aeb8894367db83a -assets/pixelify-sans-cyrillic-wght-normal-CPPz0Qvd.woff2,1719475104743,e5f836538ee35dfa62c9e1690c005d8e14fe9b26850bf6f69ee8432570e1dcfb -assets/ghost-CIU8fCIk.webp,1719475104743,83babc01a29b5b53de1527b8155b6ab0b5a70e825daee505f253a2fc3c41ead6 -assets/googleIcon-B82wVp1S.webp,1719475104743,ef6bc8746a5b091b21b2a54762d9e2c6b97e6d877ac055af39c6c601e4270adc -assets/goblin-DJRMrO0b.webp,1719475104743,ad4cc627dcb081641832d374b37695353c33376c3b06931094a6f6ec83ab425a -assets/candy-CTybcJ4Y.webp,1719475104743,013c4baee432d614adde0b83e5a932e08e72f1020a0e551dcae40b0cc5220559 -assets/donutIcon-WQb5dFfL.webp,1719475104743,c76d25394c687e3740f846dcef353ea5789f9439211ee0ea655f22cdc471b24b -assets/background-UArc6RgK.webp,1719475104743,bc5d933faa2d838b2e3a39bc648336c26b543c9501a1ca15daa147d46046165c -assets/a-BZyeQR8F.webp,1719475104743,2a38602b97232ea63f2a18a341cdc8ace716d5e2836bf99ae0bc94e332cc2fed -assets/index-ctsa184t.js,1719475104745,e0cfc46700e6dd5772803e0f8b84f73bed9ad6f3194a50807f889edc153e9bb5 +index.html,1719480493644,d2d50cdd598fca1d43ad50d477ccfa128bd11f8c393d606c1cbe134a8e541344 +assets/vampire-mPAYI4wv.webp,1719480493643,145a9ec22ac87737a918eda21976c720072c9ff911249ab6fa152b4b47f70fb1 +assets/scoreboard-C4un5giP.webp,1719480493644,ebbf61adeecb7609764907312305f64ad0b20d988f236339b1e748cde9e7bec1 +assets/skull-4aD260e8.webp,1719480493643,a0455c53b48ea85405948295f0cf7d15aaafec7f45b28f5994101d3df5ca605e +assets/pixelify-sans-latin-wght-normal-vdc2vUDH.woff2,1719480493644,c066c80d2f859f8733dcfc1b86a970ef829c99884c11b5be87491a5bd98bca20 +assets/pixelify-sans-cyrillic-wght-normal-CPPz0Qvd.woff2,1719480493643,e5f836538ee35dfa62c9e1690c005d8e14fe9b26850bf6f69ee8432570e1dcfb +assets/pixelify-sans-latin-ext-wght-normal-DEDzhmUG.woff2,1719480493644,c6277cd196d476ffc30a787acd0e38824a13ed166d16dda2a762872aa448bd7d +assets/index-BCf2Te5u.css,1719480493644,894b059204dea6b17c11059a58f1b7b4aff01529ac7f20daa1f04171dd7021c7 +assets/googleIcon-B82wVp1S.webp,1719480493643,ef6bc8746a5b091b21b2a54762d9e2c6b97e6d877ac055af39c6c601e4270adc +assets/ghost-CIU8fCIk.webp,1719480493643,83babc01a29b5b53de1527b8155b6ab0b5a70e825daee505f253a2fc3c41ead6 +assets/goblin-DJRMrO0b.webp,1719480493643,ad4cc627dcb081641832d374b37695353c33376c3b06931094a6f6ec83ab425a +assets/candy-CTybcJ4Y.webp,1719480493644,013c4baee432d614adde0b83e5a932e08e72f1020a0e551dcae40b0cc5220559 +assets/donutIcon-WQb5dFfL.webp,1719480493643,c76d25394c687e3740f846dcef353ea5789f9439211ee0ea655f22cdc471b24b +assets/background-UArc6RgK.webp,1719480493644,bc5d933faa2d838b2e3a39bc648336c26b543c9501a1ca15daa147d46046165c +assets/a-BZyeQR8F.webp,1719480493644,2a38602b97232ea63f2a18a341cdc8ace716d5e2836bf99ae0bc94e332cc2fed +assets/index-CP5LjUKW.js,1719480493645,ee14be88730ca710e6ce0c96359f1e5efe5cc5c056762339f2dea85886378983 diff --git a/src/App.jsx b/src/App.jsx index 493b238..7022621 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,9 +10,9 @@ const App = () => { return (
- } /> - } /> - } /> + }/> + }/> + }/>
); diff --git a/src/assets/images/1.webp b/src/assets/images/1.webp new file mode 100644 index 0000000..428964b Binary files /dev/null and b/src/assets/images/1.webp differ diff --git a/src/assets/images/2.webp b/src/assets/images/2.webp new file mode 100644 index 0000000..b32ae2b Binary files /dev/null and b/src/assets/images/2.webp differ diff --git a/src/pages/Game.jsx b/src/pages/Game.jsx index d916c0c..900c9bb 100644 --- a/src/pages/Game.jsx +++ b/src/pages/Game.jsx @@ -1,7 +1,9 @@ -import React, { useRef, useEffect } from 'react'; -import {useNavigate, useLocation} from 'react-router-dom'; +import React, { useRef, useEffect, useState } from 'react'; +import { useNavigate, useLocation } from 'react-router-dom'; import p5 from 'p5'; -import Matter from 'matter-js' +import Matter from 'matter-js'; +import audioOn from "../assets/images/audioon.webp"; +import audioOff from "../assets/images/audiooff.webp"; import Ball from "../components/Ball.jsx"; import Boundary from "../components/Boundary.jsx"; import Box from "../components/Box.jsx"; @@ -14,6 +16,7 @@ import zombie from "../assets/images/zombie.webp"; import goblin from "../assets/images/goblin.webp"; import vampire from "../assets/images/vampire.webp"; import scoreboard from "../assets/images/scoreboard.webp"; +import bgMusic from "../assets/music/bgmusic.mp3"; import '@fontsource-variable/pixelify-sans'; let Engine = Matter.Engine; @@ -21,12 +24,11 @@ let World = Matter.Composite; let Mouse = Matter.Mouse; let MouseConstraint = Matter.MouseConstraint; let Collision = Matter.Collision; -let Constraint = Matter.Constraint; -let ground, ball, world, engine, mCon, leftWall, rightWall, scoreBoard; +let ground, ball, world, engine, mCon, leftWall, rightWall, scoreBoard, audioButton; let boxes = []; let score = 0; -let timer = 10; -let bgImage, ballImage, scoreboardImage; +let timer = 42; +let bgImage, ballImage, scoreboardImage, audioOnImage, audioOffImage; let monsterImages = []; let imgIndex = 0; let constraint, constraintOptions; @@ -35,14 +37,15 @@ let gameOver = false; const BALL_CATEGORY = 0b0001; const MOUSE_CATEGORY = 0b0010; - function Game() { const navigate = useNavigate(); const location = useLocation(); const p5Container = useRef(); + const audioRef = useRef(new Audio(bgMusic)); + const [playing, setPlaying] = useState(false); function sketch(p) { - p.preload = async function() { + p.preload = async function () { bgImage = p.loadImage(bg); ballImage = p.loadImage(candy); scoreboardImage = p.loadImage(scoreboard); @@ -51,20 +54,37 @@ function Game() { monsterImages.push(await p.loadImage(zombie)); monsterImages.push(await p.loadImage(goblin)); monsterImages.push(await p.loadImage(vampire)); + audioOnImage = p.loadImage(audioOn); + audioOffImage = p.loadImage(audioOff); } - p.setup = function() { + p.setup = function () { const canvas = p.createCanvas(p.windowWidth, p.windowHeight); engine = Engine.create(); world = engine.world; const canvasMouse = Mouse.create(canvas.elt); canvasMouse.pixelRatio = p.pixelDensity(); - ground = new Boundary(p.width/2, p.height-10, p.width, 20, world, BALL_CATEGORY); - leftWall = new Boundary(10, p.height/2, 20, p.height, world, BALL_CATEGORY); - rightWall = new Boundary(p.width - 10, p.height/2, 20, p.height, world, BALL_CATEGORY); - ball = new Ball(p.width/2, p.height - 100, 40, world, ballImage, BALL_CATEGORY); - scoreBoard = new Scoreboard( 10, 10, p.width > 800 ? 400 : p.width - 30, 75, world, scoreboardImage); + audioButton = p.createImg(audioRef.current.paused ? audioOff : audioOn, "audio button"); + audioButton.position(20, p.height - 50); + audioButton.size(30, 30); + audioButton.mouseClicked(() => { + if (audioRef.current.paused) { + audioRef.current.play(); + } else { + audioRef.current.pause(); + } + setPlaying(prevPlaying => !prevPlaying); + setTimeout(() => { + audioButton.elt.src = audioRef.current.paused ? audioOff : audioOn; + }, 0); + }); + + ground = new Boundary(p.width / 2, p.height - 10, p.width, 20, world, BALL_CATEGORY); + leftWall = new Boundary(10, p.height / 2, 20, p.height, world, BALL_CATEGORY); + rightWall = new Boundary(p.width - 10, p.height / 2, 20, p.height, world, BALL_CATEGORY); + ball = new Ball(p.width / 2, p.height - 100, 40, world, ballImage, BALL_CATEGORY); + scoreBoard = new Scoreboard(10, 10, p.width > 800 ? 400 : p.width - 30, 75, world, scoreboardImage); const options = { mouse: canvasMouse, @@ -75,32 +95,28 @@ function Game() { } mCon = MouseConstraint.create(engine, options); - World.add(world, [mCon]); - console.log(p.height); - console.log(p.windowWidth); - Matter.Events.on(engine, "afterUpdate", () => { - if(p.mouseIsPressed && p.mouseY < 0.55 * p.height && ball.body.position.y < 0.55 * p.height) { - Matter.Body.applyForce(ball.body, {x: ball.body.position.x, y: ball.body.position.y}, {x: 0, y: -150}) + if (p.mouseIsPressed && p.mouseY < 0.55 * p.height && ball.body.position.y < 0.55 * p.height) { + Matter.Body.applyForce(ball.body, { x: ball.body.position.x, y: ball.body.position.y }, { x: 0, y: -150 }); } - Matter.Body.applyForce(ball.body, {x: ball.body.position.x, y: ball.body.position.y}, {x: 0, y: 0}) - }) + Matter.Body.applyForce(ball.body, { x: ball.body.position.x, y: ball.body.position.y }, { x: 0, y: 0 }); + }); } setInterval(spawnBoxes, 500); function spawnBoxes() { - if(boxes.length > 7) { + if (boxes.length > 7) { World.remove(engine.world, boxes[0].body); boxes.splice(0, 1); } let xLoc = p.random(0, p.width); - let yLoc = p.random(100, p.height/2); + let yLoc = p.random(100, p.height / 2); let boxWidth, boxHeight; let overlapping = false; - if(imgIndex === 3 || imgIndex === 4) { + if (imgIndex === 3 || imgIndex === 4) { boxWidth = 105; boxHeight = 85; } @@ -117,56 +133,55 @@ function Game() { img: monsterImages[imgIndex], } - for(let j = 0; j < boxes.length; j++) { + for (let j = 0; j < boxes.length; j++) { let boxToCheckAgainst = boxes[j]; - let distance = p.dist(boxToPush.x, boxToPush.y ,boxToCheckAgainst.x, boxToCheckAgainst.y); - if(distance < boxToPush.w + boxToCheckAgainst.w - 80 + let distance = p.dist(boxToPush.x, boxToPush.y, boxToCheckAgainst.x, boxToCheckAgainst.y); + if (distance < boxToPush.w + boxToCheckAgainst.w - 80 || distance < boxToPush.h + boxToCheckAgainst.h - 80) { overlapping = true; break; } } - if(!overlapping) { + if (!overlapping) { boxes.push(new Box(boxToPush)); imgIndex = (imgIndex + 1) % monsterImages.length; } } - - p.windowResized = function() { + p.windowResized = function () { p.resizeCanvas(p.windowWidth, p.windowHeight); } p.draw = function () { p.background(bgImage); - if(location.state.loggedIn === true ) { + if (location.state.loggedIn === true) { Engine.update(engine); rightWall.show(p); leftWall.show(p); ground.show(p); ball.show(p); - if(p.frameCount % 60 === 0 && timer > 0) { + if (p.frameCount % 60 === 0 && timer > 0) { timer--; - if(timer === 0){ + if (timer === 0) { gameOver = true; console.log("game over"); - navigate("/leaderboard", {state: {score: score}}); + navigate("/leaderboard", { state: { score: score } }); } } scoreBoard.show(p, score, timer); - for(let i = 0; i < boxes.length; i++) { + for (let i = 0; i < boxes.length; i++) { boxes[i].show(p); } - if(ball.body.position.y < 0 || ball.body.position.y > p.height + 50 || ball.body.position.x < 0 || ball.body.position.x > p.width + 50) { + if (ball.body.position.y < 0 || ball.body.position.y > p.height + 50 || ball.body.position.x < 0 || ball.body.position.x > p.width + 50) { ball.hide(); ball.reset(p); } - for(let i = 0; i < boxes.length; i++) { - if(Collision.collides(ball.body, boxes[i].body)) { + for (let i = 0; i < boxes.length; i++) { + if (Collision.collides(ball.body, boxes[i].body)) { ball.hide(); World.remove(engine.world, boxes[i].body); boxes.splice(i, 1); @@ -177,24 +192,11 @@ function Game() { } } } - (function() - { - if( window.localStorage ) - { - if( !localStorage.getItem('firstLoad') ) - { - localStorage['firstLoad'] = true; - window.location.reload(); - } - else - localStorage.removeItem('firstLoad'); - } - })(); useEffect(() => { const p5Instance = new p5(sketch, p5Container.current); - return() => { + return () => { p5Instance.remove(); } }, []); @@ -207,4 +209,4 @@ function Game() { ); } -export default Game; \ No newline at end of file +export default Game; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index b17540d..64e3a4c 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -5,8 +5,8 @@ import {setDoc, getDoc, doc} from "firebase/firestore"; import {useNavigate} from "react-router-dom"; import bgMusic from "../assets/music/bgmusic.mp3" -import audioOn from "../assets/images/audioon.webp" import audioOff from "../assets/images/audiooff.webp" +import audioOn from "../assets/images/audioon.webp" import googleIcon from "../assets/images/googleIcon.webp" import './Pages.css'