Skip to content

Commit

Permalink
Audio issues resolved
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohanamisra
mohanamisra committed Jun 27, 2024
1 parent 236114f commit d674714
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 75 deletions.
32 changes: 16 additions & 16 deletions .firebase/hosting.ZGlzdA.cache
View file
Original file line number Diff line number Diff line change
@@ -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
6 changes: 3 additions & 3 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ const App = () => {
return (
<div>
<Routes>
<Route path="/" element={<Login/>} />
<Route path="/game" element={<Game/>} />
<Route path="/leaderboard" element={<GameOver/>} />
<Route path="/" element={<Login/>}/>
<Route path="/game" element={<Game/>}/>
<Route path="/leaderboard" element={<GameOver/>}/>
</Routes>
</div>
);
Expand Down
Binary file added src/assets/images/1.webp
View file
Binary file not shown.
Binary file added src/assets/images/2.webp
View file
Binary file not shown.
112 changes: 57 additions & 55 deletions src/pages/Game.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -14,19 +16,19 @@ 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;
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;
Expand All @@ -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);
Expand All @@ -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,
Expand All @@ -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;
}
Expand All @@ -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);
Expand All @@ -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();
}
}, []);
Expand All @@ -207,4 +209,4 @@ function Game() {
);
}

export default Game;
export default Game;
2 changes: 1 addition & 1 deletion src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down

0 comments on commit d674714

Please sign in to comment.