Skip to content

Commit

Permalink
des trucs
Browse files Browse the repository at this point in the history
  • Loading branch information
William committed Sep 27, 2024
1 parent ef4f262 commit 9ca421c
Show file tree
Hide file tree
Showing 2 changed files with 199 additions and 7 deletions.
77 changes: 77 additions & 0 deletions threejs/jeu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ var temp = new THREE.Vector3;
var dir = new THREE.Vector3;
var a = new THREE.Vector3;
var b = new THREE.Vector3;
var highScores = {};
var score = 0;
var speed = document.getElementById('speed').value;
document.getElementById('speed').addEventListener('input', (event) => {
speed = event.target.value;
});
var ended = false;
var paused = document.getElementById('displayPause').style.display === 'flex';
init();

Expand Down Expand Up @@ -57,6 +59,9 @@ renderer.render(scene, camera);

// ecoute des fleches du clavier
document.addEventListener('keydown', (event) => {
if (ended) {
return;
}
const keyName = event.key;
if (keyName === 'ArrowUp' || keyName === 'ArrowDown' || keyName === 'ArrowLeft' || keyName === 'ArrowRight') {
if (paused) {
Expand All @@ -65,6 +70,9 @@ document.addEventListener('keydown', (event) => {
if (lastArrow === 'ArrowUp' && keyName === 'ArrowDown' || lastArrow === 'ArrowDown' && keyName === 'ArrowUp' || lastArrow === 'ArrowLeft' && keyName === 'ArrowRight' || lastArrow === 'ArrowRight' && keyName === 'ArrowLeft') {
return;
}
if (lastArrow === '') {
document.getElementById('displayStart').style.display = 'none';
}
changeRotation(snakeHead, keyName);
lastArrow = keyName;
} else {
Expand Down Expand Up @@ -204,9 +212,46 @@ function autoAvancer() {
manger();
}

checkCollision();

renderer.render(scene, camera);
}

function checkCollision() {
for (let i = 0; i < tails.length; i++) {
let seuil = 0.5;
if (Math.abs(snakeHead.position.x - tails[i].position.x) < seuil && Math.abs(snakeHead.position.y - tails[i].position.y) < seuil) {
loose();
}
}
}

function loose() {
ended = true;
paused = true;
document.getElementById('displayLoose').style.display = 'flex';
document.getElementById('scoreLoose').innerText = score;

let classement = [];
for (let username in highScores) {
classement.push({ username, score: highScores[username] });
}
classement.sort((a, b) => b.score - a.score);
let classementTable = '';

for (let i = 0; i < classement.length; i++) {
classementTable += `
<tr>
<td>${i + 1}</td>
<td>${classement[i].username}</td>
<td>${classement[i].score}</td>
</tr>
`;
}

document.getElementById('classement').innerHTML = classementTable;
}

function manger() {
const newTail = new THREE.BoxGeometry(1, 1, 1);
const newTailMaterial = new THREE.MeshBasicMaterial({ color: 0x944a00 });
Expand All @@ -219,6 +264,8 @@ function manger() {
food.position.set(Math.floor(Math.random() * 20) - 10, Math.floor(Math.random() * 20) - 10, 0);
score++;
document.getElementById('scoreValue').innerText = score;

setHighScore();
}

function animate() {
Expand Down Expand Up @@ -340,3 +387,33 @@ export function pauseGame() {
}
if (!tps)
setInterval(autoAvancer, 100);

function loadHighScores() {
if (localStorage.getItem('highscores') && Object.keys(localStorage.getItem('highscores')).length > 0) {
highScores = JSON.parse(localStorage.getItem('highscores'));
}
highScores[username.value] = 0;
localStorage.setItem('highScores', JSON.stringify(highScores));
}

export function getHighScoreFor(username) {
if (Object.keys(highScores).length === 0) {
loadHighScores();
}

return highScores[username] || 0;
}

function setHighScore() {
let username = localStorage.getItem('username');
if (!username) {
return;
}

let userHighScore = highScores[username] || 0;
if (score >= userHighScore) {
highScores[username] = score;
localStorage.setItem('highscores', JSON.stringify(highScores));
document.getElementById('highscore').innerText = score;
}
}
129 changes: 122 additions & 7 deletions threejs/snake.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,26 @@
align-items: center;
}

#displayPause {
#list {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}

#user {
display: flex;
flex-direction: column;
align-items: center;
}

#score {
display: flex;
flex-direction: column;
align-items: center;
}

.displayCenter {
position: absolute;
top: 50%;
left: 50%;
Expand All @@ -49,6 +68,16 @@
padding: 20px;
display: none;
}

#displayStart {
display: flex;
}

#buttonList {
display: flex;
flex-direction: row;
gap: 15px;
}
</style>
</head>

Expand Down Expand Up @@ -76,18 +105,73 @@
</div>
</form>
<div id="right">
<h3>Score : <span id="scoreValue">0</span></h3>
<div id="pause">
<button id="pauseButton" class="btn btn-primary">Pause</button>
<div id="list">
<div id="user">
<h6>Utilisateur : <span id="loggedUsername">Non connecté</span></h6>
<h6>Votre meilleur score : <span id="highscore">0</span></h6>
</div>
<div id="score">
<h6>Score : <span id="scoreValue">0</span></h6>
<div id="pause">
<button id="pauseButton" class="btn btn-primary">Pause</button>
</div>
</div>
</div>
</div>
<div id="displayPause">
<div id="displayStart" class="displayCenter">
<h1>Appuyez sur une flèche pour commencer</h1>
</div>
<div id="displayPause" class="displayCenter">
<h1>Jeu en pause</h1>
<button id="resumeButton" class="btn btn-primary">Reprendre</button>
<div id="buttonList">
<button id="resumeButton" class="btn btn-primary">Reprendre</button>
<button id="logoutButton" class="btn btn-danger">Se déconnecter</button>
</div>
</div>
<div id="displayLoose" class="displayCenter">
<h1>Vous avez perdu</h1>
<h6>Votre score est de <span id="scoreLoose">0</span></h6>
<button id="restartButton" class="btn btn-primary">Recommencer</button>

<h4>Classement</h4>
<table class="table">
<thead>
<tr>
<th scope="col">Position</th>
<th scope="col">Nom d'utilisateur</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody id="classement">
</tbody>
</table>
</div>
<div id="userLoginModal" class="modal fade" tabindex="-1" aria-labelledby="userLoginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="userLoginModalLabel">Connexion pour sauvegarder votre score (localement)
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="username" class="form-label">Nom d'utilisateur</label>
<input type="text" class="form-control" id="username" aria-describedby="usernameHelp">
<div id="usernameHelp" class="form-text">Votre nom d'utilisateur sera affiché dans le
classement</div>
</div>
<button id="login" type="submit" class="btn btn-primary">Connexion</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Plus tard</button>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="module">
import { pauseGame } from './jeu.js';
import { pauseGame, getHighScoreFor } from './jeu.js';
const toggleTps = document.getElementById('toggleTps');
// On récupère la valeur du switch dans le local storage
toggleTps.checked = localStorage.getItem('tps') === 'true';
Expand All @@ -97,6 +181,7 @@ <h1>Jeu en pause</h1>
location.reload();
});

document.getElementById('speedValue').innerText = document.getElementById('speed').value;
const speed = document.getElementById('speed');
speed.addEventListener('input', (event) => {
document.getElementById('speedValue').innerText = event.target.value;
Expand All @@ -106,6 +191,36 @@ <h1>Jeu en pause</h1>
resumeButton.addEventListener('click', pauseGame);
const pauseButton = document.getElementById('pauseButton');
pauseButton.addEventListener('click', pauseGame);

document.getElementById('restartButton').addEventListener('click', () => {
location.reload();
});

document.getElementById('logoutButton').addEventListener('click', () => {
localStorage.removeItem('username');
location.reload();
});

const userLoginModal = new bootstrap.Modal(document.getElementById('userLoginModal'));
if (localStorage.getItem('username') === null) {
userLoginModal.show();
} else {
let username = localStorage.getItem('username');
document.getElementById('loggedUsername').innerText = username;
document.getElementById('username').setAttribute('readonly', true);
document.getElementById('highscore').innerText = getHighScoreFor(username) || 0;
}

document.getElementById('login').addEventListener('click', (event) => {
event.preventDefault();
let username = document.getElementById('username').value;
if (username != '') {
localStorage.setItem('username', username);
document.getElementById('loggedUsername').innerText = localStorage.getItem('username');
document.getElementById('highscore').innerText = getHighScoreFor(username) || 0;
}
userLoginModal.hide();
});
</script>

</html>
Expand Down

0 comments on commit 9ca421c

Please sign in to comment.