diff --git a/css/rockpapercisor.css b/css/rockpapercisor.css new file mode 100644 index 0000000..2e31c44 --- /dev/null +++ b/css/rockpapercisor.css @@ -0,0 +1,130 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Arial', sans-serif; +} + +body { + background-color: #eef1f5; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + padding: 20px; +} + +.game-container { + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 30px; + max-width: 600px; + width: 100%; + text-align: center; + margin-top: 20px; +} + +h1 { + color: #333; + margin-bottom: 20px; +} + +.score-board { + display: flex; + justify-content: space-around; + margin: 20px 0; + padding: 15px; + background-color: #f0f0f0; + border-radius: 8px; +} + +.score { + font-size: 22px; + font-weight: bold; +} + +.result { + font-size: 18px; + margin: 20px 0; + height: 24px; +} + +.choices { + display: flex; + justify-content: space-around; + margin: 30px 0; +} + +.choice { + background: none; + border: none; + font-size: 50px; + cursor: pointer; + transition: transform 0.2s; + background-color: #f8f8f8; + border-radius: 50%; + width: 80px; + height: 80px; + display: flex; + justify-content: center; + align-items: center; +} + +.choice:hover { + transform: scale(1.2); + background-color: #e0e0e0; +} + +.choice:focus { + outline: none; +} + +.action-message { + font-size: 18px; + margin-top: 20px; + color: #555; +} + +.game-history { + margin-top: 20px; + max-height: 150px; + overflow-y: auto; + background-color: #f8f8f8; + border-radius: 8px; + padding: 10px; +} + +.history-item { + margin: 5px 0; + padding: 5px; + border-bottom: 1px solid #ddd; +} + +.reset-button { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + margin-top: 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; +} + +.reset-button:hover { + background-color: #45a049; +} + +@media (max-width: 480px) { + .choices { + flex-direction: column; + align-items: center; + gap: 20px; + } + + .game-container { + padding: 15px; + } +} \ No newline at end of file diff --git a/pages/gameHub/RockPaperScissors/index.html b/pages/gameHub/RockPaperScissors/index.html new file mode 100644 index 0000000..b1cd1b3 --- /dev/null +++ b/pages/gameHub/RockPaperScissors/index.html @@ -0,0 +1,51 @@ + + + + + + Jeu Pierre Feuille Ciseaux + + + +
+ +

Pierre Feuille Ciseaux

+ + +
+
+

Joueur

+

0

+
+
+

Ordinateur

+

0

+
+
+ + +
Faites votre choix !
+ + +
+ + + +
+ + +

Cliquez sur une icône pour jouer

+ + +
+

Historique des parties

+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/pages/gameHub/memory/index.html b/pages/gameHub/memory/index.html deleted file mode 100644 index bb93ff9..0000000 --- a/pages/gameHub/memory/index.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - TechnoMastery - Games - Memory - - -
-

Memory game

-

Test your memory with this fun game! Try to find all the pairs of cards in the shortest time possible.

- -
-
-

The memory

-
-

Rules

-

The rules are simple : you have to find the 10 pairs in the shortest time possible.
- Click on a card to start. The timer begin when you turn the first card.

-

When you find a pair, the cards will stay turned. If you don't find a pair, the cards will turn back after 1 second.

-

When you find all the pairs, the game is over and you can see your time.

-

Good luck!

-

Scoreboard :

-

The scoreboard can't be displayed yet, because we can't save the scores in the server.
- We will try to make that possible, but for the moment we can't. You'll still be able to see you score, and your best one as long as you don't refresh or quite the game.

-
-
-

Play the game

-
- -
- -
Time: 0s
-
-
- - - - \ No newline at end of file diff --git a/scripts/games/memory.js b/scripts/games/memory.js deleted file mode 100644 index 2e9d7ab..0000000 --- a/scripts/games/memory.js +++ /dev/null @@ -1,54 +0,0 @@ -const valeurs = ['apple','banana','strawberry','mure','melon','lemon','ananas','kiwi','avocat','berries']; -let cartes = [...valeurs, ...valeurs]; // 10 paires -cartes = cartes.sort(() => 0.5 - Math.random()); // mélange - -const grille = document.getElementById('grid'); -let premiere = null; -let bloque = false; -let pairesTrouvees = 0; - -// Création dynamique des cartes -cartes.forEach(val => { - const carte = document.createElement('div'); - carte.classList.add('carte'); - - carte.innerHTML = ` -
-
-
${val}
-
- `; - - carte.addEventListener('click', () => { - if (bloque || carte.classList.contains('reveal')) return; - - carte.classList.add('reveal'); - - const currentValue = carte.querySelector('.inner').dataset.valeur; - - if (!premiere) { - premiere = carte; - } else { - const premiereValeur = premiere.querySelector('.inner').dataset.valeur; - if (premiereValeur === currentValue) { - // C'est une paire - premiere = null; - pairesTrouvees++; - if (pairesTrouvees === valeurs.length) { - setTimeout(() => alert("🎉 Bravo, tu as trouvé toutes les paires !"), 300); - } - } else { - // Pas une paire - bloque = true; - setTimeout(() => { - carte.classList.remove('reveal'); - premiere.classList.remove('reveal'); - premiere = null; - bloque = false; - }, 1000); - } - } - }); - - grille.appendChild(carte); -}); diff --git a/scripts/games/rockpapercisor.js b/scripts/games/rockpapercisor.js new file mode 100644 index 0000000..4e34a5e --- /dev/null +++ b/scripts/games/rockpapercisor.js @@ -0,0 +1,110 @@ +document.addEventListener('DOMContentLoaded', () => { + // Sélection des éléments du DOM + const choices = document.querySelectorAll('.choice'); + const playerScore = document.getElementById('player-score'); + const computerScore = document.getElementById('computer-score'); + const resultDisplay = document.getElementById('result'); + const historyList = document.getElementById('history-list'); + const resetButton = document.getElementById('reset'); + + // Initialisation des scores + let score = { + player: 0, + computer: 0 + }; + + // Ajout des événements aux boutons de choix + choices.forEach(choice => { + choice.addEventListener('click', function() { + const playerChoice = this.id; + playRound(playerChoice); + }); + }); + + // Bouton de réinitialisation du jeu + resetButton.addEventListener('click', resetGame); + + // Fonction pour jouer un tour + function playRound(playerChoice) { + const options = ['rock', 'paper', 'scissors']; + const computerChoice = options[Math.floor(Math.random() * options.length)]; + + const result = getResult(playerChoice, computerChoice); + updateUI(playerChoice, computerChoice, result); + } + + // Fonction pour déterminer le gagnant + function getResult(player, computer) { + if (player === computer) return 'égalité'; + + const winConditions = { + rock: 'scissors', + paper: 'rock', + scissors: 'paper' + }; + + if (winConditions[player] === computer) { + score.player++; + return 'gagné'; + } else { + score.computer++; + return 'perdu'; + } + } + + // Mise à jour de l'interface utilisateur + function updateUI(playerChoice, computerChoice, result) { + const emojiMap = { + rock: '🪨', + paper: '🍂', + scissors: '✂️' + }; + + const frenchMap = { + rock: 'Pierre', + paper: 'Feuille', + scissors: 'Ciseaux' + }; + + // Message de résultat + let message = ''; + if (result === 'gagné') { + message = `Vous avez gagné ! ${frenchMap[playerChoice]} bat ${frenchMap[computerChoice]}`; + } else if (result === 'perdu') { + message = `Vous avez perdu ! ${frenchMap[computerChoice]} bat ${frenchMap[playerChoice]}`; + } else { + message = `Égalité ! Vous avez tous les deux choisi ${frenchMap[playerChoice]}`; + } + + resultDisplay.textContent = message; + + // Mise à jour des scores + playerScore.textContent = score.player; + computerScore.textContent = score.computer; + + // Mise à jour de l'historique + const historyItem = document.createElement('div'); + historyItem.classList.add('history-item'); + historyItem.innerHTML = ` + Vous: ${emojiMap[playerChoice]} vs + Ordinateur: ${emojiMap[computerChoice]} - + ${result.charAt(0).toUpperCase() + result.slice(1)} + `; + historyList.prepend(historyItem); + + // Limiter l'historique à 10 éléments maximum + if (historyList.children.length > 10) { + historyList.removeChild(historyList.lastChild); + } + } + + // Fonction pour réinitialiser le jeu + function resetGame() { + score.player = 0; + score.computer = 0; + playerScore.textContent = '0'; + computerScore.textContent = '0'; + resultDisplay.textContent = 'Faites votre choix !'; + historyList.innerHTML = ''; + } +}); \ No newline at end of file