Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Fruits Cutting Web Game and added assets and music folder #4959

Closed
wants to merge 13 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .DS_Store
Binary file not shown.
Binary file added Games/.DS_Store
Binary file not shown.
Binary file added Games/FruitCutiingGame/assets/apple.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/banana.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/graphes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/knife.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/mango.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/orange.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/papaya.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/FruitCutiingGame/assets/watermelon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions Games/FruitCutiingGame/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Cutting Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<div class="knife"></div>
<div id="score" style="text-align: center; color: aquamarine;font-size: 30px;margin-top: 30px;">0</div>
</div>

<audio id="backgroundMusic" loop>
<source src="background.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio id="cutSound">
<source src="cut.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div class="start-button" onclick="startGame()">Start Game</div>
<div class="play-again" onclick="startNewGame()">Play Again</div>

<script src="script.js"></script>
</body>
</html>
Binary file added Games/FruitCutiingGame/music/background.mp3
Binary file not shown.
Binary file added Games/FruitCutiingGame/music/cut.mp3
Binary file not shown.
120 changes: 120 additions & 0 deletions Games/FruitCutiingGame/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@

const fruits = [
'apple.png',
'orange.png',
'banana.png',
'graphes.png',
'papaya.png',
'watermelon.png',
'mango.png'

];

let score = 0;
let gameTime = 0;
let gameRunning = false;
let gameInterval;

function startGame() {
gameRunning = true;
document.querySelector('.start-button').style.display = 'none'; // Hide start button
const gameContainer = document.querySelector('.game-container');
gameContainer.addEventListener('mousemove', moveKnife);

function moveKnife(event) {
const knife = document.querySelector('.knife');
knife.style.left = event.clientX - knife.offsetWidth / 2 + 'px';
knife.style.top = event.clientY - knife.offsetHeight / 2 + 'px';
}

function createFruit() {
if (!gameRunning) return;

const fruit = document.createElement('div');
fruit.classList.add('fruit');
const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
fruit.style.backgroundImage = `url('${randomFruit}')`;
fruit.style.left = Math.random() * (window.innerWidth - 100) + 'px';
fruit.style.top = '0px';
gameContainer.appendChild(fruit);

moveFruit(fruit);
}

gameInterval = setInterval(createFruit, 1000);
setTimeout(endGame, 30000);
setInterval(updateGameTime, 1000);

document.getElementById('backgroundMusic').play(); // Start background music
}

function moveFruit(fruitElement) {
let position = 0;
const interval = setInterval(() => {
if (!gameRunning) {
clearInterval(interval);
return;
}

position += 20;
fruitElement.style.top = position + 'px';

const knife = document.querySelector('.knife');
if (knife && checkCollision(fruitElement, knife)) {
fruitElement.style.backgroundImage = 'none';
fruitElement.style.backgroundColor = 'red';
fruitElement.style.borderRadius = '50%'; // Make it a small circle

score++;
document.getElementById('score').textContent = score;
playCutSound(); // Play sound effect

setTimeout(() => {
fruitElement.remove();
}, 100);
}

if (position >= window.innerHeight) {
fruitElement.remove();
}
}, 20);
}

function playCutSound() {
const cutSound = document.getElementById('cutSound');
cutSound.currentTime = 0; // Reset sound to start
cutSound.play();
}

function checkCollision(fruit, knife) {
const fruitRect = fruit.getBoundingClientRect();
const knifeRect = knife.getBoundingClientRect();

return !(
fruitRect.right < knifeRect.left ||
fruitRect.left > knifeRect.right ||
fruitRect.bottom < knifeRect.top ||
fruitRect.top > knifeRect.bottom
);
}

function updateGameTime() {
gameTime++;
}

function endGame() {
gameRunning = false;
clearInterval(gameInterval);
document.getElementById('backgroundMusic').pause();
document.querySelector('.play-again').style.display = 'block';
alert(`Game Over! Your score: ${score} in ${gameTime} seconds.`);
}

function startNewGame() {
score = 0;
gameTime = 0;
gameRunning = true;
document.getElementById('score').textContent = score;
document.querySelector('.play-again').style.display = 'none';
startGame();
}
64 changes: 64 additions & 0 deletions Games/FruitCutiingGame/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
body {
margin: 10;
overflow: hidden;
font-family: Arial, sans-serif;
background: url('https://ideogram.ai/assets/progressive-image/balanced/response/gbfrHHRRSAeEt7Si6GCOuw');
background-size: cover;
background-repeat: no-repeat;
}

.game-container {
position: relative;
width: 100vw;
height: 100vh;


}

.knife {
position: absolute;
width: 150px;
height: 150px;
background: url('knife.png') no-repeat center center;
background-size: contain;
pointer-events: none;
}

#scoreboard {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
}
.fruit {
width: 100px;
height: 100px;
background-size: cover;
position: absolute;
transition: background-color 0.3s ease-out;
border-radius: 50%;
}
.play-again {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #551363;
color: white;
font-size: 18px;
cursor: pointer;
display: none;
}
.start-button {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 40px;
background-color: #0f296b;
color: white;
font-size: 24px;
cursor: pointer;
display: block;
}
Binary file added Games/Fruit_Cutiing_Game/.DS_Store
Binary file not shown.
Binary file added Games/Fruit_Cutiing_Game/assets/apple.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/banana.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/graphes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/knife.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/mango.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/orange.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/papaya.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Games/Fruit_Cutiing_Game/assets/watermelon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions Games/Fruit_Cutiing_Game/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Cutting Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<div class="knife"></div>
<div id="score" style="text-align: center; color: aquamarine;font-size: 30px;margin-top: 30px;">0</div>
</div>

<audio id="backgroundMusic" loop>
<source src="background.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio id="cutSound">
<source src="cut.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div class="start-button" onclick="startGame()">Start Game</div>
<div class="play-again" onclick="startNewGame()">Play Again</div>

<script src="script.js"></script>
</body>
</html>
Binary file added Games/Fruit_Cutiing_Game/music/background.mp3
Binary file not shown.
Binary file added Games/Fruit_Cutiing_Game/music/cut.mp3
Binary file not shown.
120 changes: 120 additions & 0 deletions Games/Fruit_Cutiing_Game/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@

const fruits = [
'apple.png',
'orange.png',
'banana.png',
'graphes.png',
'papaya.png',
'watermelon.png',
'mango.png'

];

let score = 0;
let gameTime = 0;
let gameRunning = false;
let gameInterval;

function startGame() {
gameRunning = true;
document.querySelector('.start-button').style.display = 'none'; // Hide start button
const gameContainer = document.querySelector('.game-container');
gameContainer.addEventListener('mousemove', moveKnife);

function moveKnife(event) {
const knife = document.querySelector('.knife');
knife.style.left = event.clientX - knife.offsetWidth / 2 + 'px';
knife.style.top = event.clientY - knife.offsetHeight / 2 + 'px';
}

function createFruit() {
if (!gameRunning) return;

const fruit = document.createElement('div');
fruit.classList.add('fruit');
const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
fruit.style.backgroundImage = `url('${randomFruit}')`;
fruit.style.left = Math.random() * (window.innerWidth - 100) + 'px';
fruit.style.top = '0px';
gameContainer.appendChild(fruit);

moveFruit(fruit);
}

gameInterval = setInterval(createFruit, 1000);
setTimeout(endGame, 30000);
setInterval(updateGameTime, 1000);

document.getElementById('backgroundMusic').play(); // Start background music
}

function moveFruit(fruitElement) {
let position = 0;
const interval = setInterval(() => {
if (!gameRunning) {
clearInterval(interval);
return;
}

position += 20;
fruitElement.style.top = position + 'px';

const knife = document.querySelector('.knife');
if (knife && checkCollision(fruitElement, knife)) {
fruitElement.style.backgroundImage = 'none';
fruitElement.style.backgroundColor = 'red';
fruitElement.style.borderRadius = '50%'; // Make it a small circle

score++;
document.getElementById('score').textContent = score;
playCutSound(); // Play sound effect

setTimeout(() => {
fruitElement.remove();
}, 100);
}

if (position >= window.innerHeight) {
fruitElement.remove();
}
}, 20);
}

function playCutSound() {
const cutSound = document.getElementById('cutSound');
cutSound.currentTime = 0; // Reset sound to start
cutSound.play();
}

function checkCollision(fruit, knife) {
const fruitRect = fruit.getBoundingClientRect();
const knifeRect = knife.getBoundingClientRect();

return !(
fruitRect.right < knifeRect.left ||
fruitRect.left > knifeRect.right ||
fruitRect.bottom < knifeRect.top ||
fruitRect.top > knifeRect.bottom
);
}

function updateGameTime() {
gameTime++;
}

function endGame() {
gameRunning = false;
clearInterval(gameInterval);
document.getElementById('backgroundMusic').pause();
document.querySelector('.play-again').style.display = 'block';
alert(`Game Over! Your score: ${score} in ${gameTime} seconds.`);
}

function startNewGame() {
score = 0;
gameTime = 0;
gameRunning = true;
document.getElementById('score').textContent = score;
document.querySelector('.play-again').style.display = 'none';
startGame();
}
Loading
Loading