Skip to content

Commit

Permalink
score + pause
Browse files Browse the repository at this point in the history
  • Loading branch information
William committed Sep 27, 2024
1 parent f6cc94d commit ef4f262
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 45 deletions.
79 changes: 36 additions & 43 deletions threejs/main.js → threejs/jeu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ var temp = new THREE.Vector3;
var dir = new THREE.Vector3;
var a = new THREE.Vector3;
var b = new THREE.Vector3;
var score = 0;
var speed = document.getElementById('speed').value;
document.getElementById('speed').addEventListener('input', (event) => {
speed = event.target.value;
});
var paused = document.getElementById('displayPause').style.display === 'flex';
init();

// Création de la queue du serpent
Expand Down Expand Up @@ -53,6 +59,9 @@ renderer.render(scene, camera);
document.addEventListener('keydown', (event) => {
const keyName = event.key;
if (keyName === 'ArrowUp' || keyName === 'ArrowDown' || keyName === 'ArrowLeft' || keyName === 'ArrowRight') {
if (paused) {
return;
}
if (lastArrow === 'ArrowUp' && keyName === 'ArrowDown' || lastArrow === 'ArrowDown' && keyName === 'ArrowUp' || lastArrow === 'ArrowLeft' && keyName === 'ArrowRight' || lastArrow === 'ArrowRight' && keyName === 'ArrowLeft') {
return;
}
Expand All @@ -73,7 +82,7 @@ document.addEventListener('keydown', (event) => {
camera.position.x += 1;
break;
case 'Escape':
lastArrow = '';
pauseGame();
break;
default:
break;
Expand Down Expand Up @@ -152,12 +161,13 @@ function changeRotation(object, keyName) {


function autoAvancer() {
if (!snakeHead) {
if (!snakeHead || paused) {
return;
}
let oldx = snakeHead.position.x;
let oldy = snakeHead.position.y;
let distance = tps ? 0.1 : 1;
distance *= speed / 50;
switch (lastArrow) {
case 'ArrowUp':
if (snakeHead.position.y >= 30) {
Expand Down Expand Up @@ -191,20 +201,26 @@ function autoAvancer() {
}

if (food && (Math.abs(snakeHead.position.x - food.position.x) < 1 && Math.abs(snakeHead.position.y - food.position.y) < 1)) {
const newTail = new THREE.BoxGeometry(1, 1, 1);
const newTailMaterial = new THREE.MeshBasicMaterial({ color: 0x944a00 });

const newTailMesh = new THREE.Mesh(newTail, newTailMaterial);
newTailMesh.position.set(tails[tails.length - 1].position.x, tails[tails.length - 1].position.y, 0.5);
tails.push(newTailMesh);
scene.add(newTailMesh);

food.position.set(Math.floor(Math.random() * 20) - 10, Math.floor(Math.random() * 20) - 10, 0);
manger();
}

renderer.render(scene, camera);
}

function manger() {
const newTail = new THREE.BoxGeometry(1, 1, 1);
const newTailMaterial = new THREE.MeshBasicMaterial({ color: 0x944a00 });

const newTailMesh = new THREE.Mesh(newTail, newTailMaterial);
newTailMesh.position.set(tails[tails.length - 1].position.x, tails[tails.length - 1].position.y, 0.5);
tails.push(newTailMesh);
scene.add(newTailMesh);

food.position.set(Math.floor(Math.random() * 20) - 10, Math.floor(Math.random() * 20) - 10, 0);
score++;
document.getElementById('scoreValue').innerText = score;
}

function animate() {
if (tps) {
requestAnimationFrame(animate);
Expand All @@ -219,38 +235,6 @@ function animate() {
goal.position.lerp(temp, 0.02);
temp.setFromMatrixPosition(follow.matrixWorld);
camera.lookAt(snakeHead.position);

// const cameraOffset = new THREE.Vector3();
// const cameraDistance = 10; // Distance de la caméra derrière le serpent
// const cameraHeight = 10;
// switch (lastArrow) {
// case 'ArrowUp':
// cameraOffset.set(0, -cameraDistance, cameraHeight);
// break;
// case 'ArrowDown':
// cameraOffset.set(0, cameraDistance, cameraHeight);
// camera.rotation.z = Math.PI;
// break;
// case 'ArrowLeft':
// cameraOffset.set(cameraDistance, 0, cameraHeight);
// break;
// case 'ArrowRight':
// cameraOffset.set(-cameraDistance, 0, cameraHeight);
// camera.rotation.z = -Math.PI;
// break;
// default:
// cameraOffset.set(0, -cameraDistance, cameraHeight); // Par défaut, derrière la tête
// break;
// }

// // Calcul de la position cible de la caméra
// const targetCameraPosition = snakeHead.position.clone().add(cameraOffset);

// // Interpolation vers la position cible de la caméra
// camera.position.lerp(targetCameraPosition, 0.1);

// // La caméra regarde toujours la tête du serpent
// camera.lookAt(snakeHead.position);
}
renderer.render(scene, camera);
}
Expand Down Expand Up @@ -345,5 +329,14 @@ function init() {
}
animate();

export function pauseGame() {
console.log("test");
paused = !paused;
if (paused) {
document.getElementById('displayPause').style.display = 'flex';
} else {
document.getElementById('displayPause').style.display = 'none';
}
}
if (!tps)
setInterval(autoAvancer, 100);
57 changes: 55 additions & 2 deletions threejs/snake.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,33 @@
left: 0;
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
width: 20%;
}

#right {
position: absolute;
top: 0;
right: 0;
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
}

#displayPause {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.5);
flex-direction: column;
align-items: center;
padding: 20px;
display: none;
}
</style>
</head>
Expand All @@ -36,15 +62,32 @@
</script>

<body>
<script type="module" src="main.js"></script>
<script type="module" src="jeu.js"></script>
<form id="form">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="toggleTps">
<label class="form-check-label" for="toggleTps">Vue TPS (En cours de développement)</label>
</div>
<div class="speedSelector">
<label for="speed">Vitesse de déplacement : <span id="speedValue">50</span></label>
<span class="sliderContainer">
<input type="range" min="1" max="100" value="50" class="form-range" id="speed">
</span>
</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>
</div>
<div id="displayPause">
<h1>Jeu en pause</h1>
<button id="resumeButton" class="btn btn-primary">Reprendre</button>
</div>
</body>
<script>
<script type="module">
import { pauseGame } 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 @@ -53,6 +96,16 @@
localStorage.setItem('tps', event.target.checked);
location.reload();
});

const speed = document.getElementById('speed');
speed.addEventListener('input', (event) => {
document.getElementById('speedValue').innerText = event.target.value;
});

const resumeButton = document.getElementById('resumeButton');
resumeButton.addEventListener('click', pauseGame);
const pauseButton = document.getElementById('pauseButton');
pauseButton.addEventListener('click', pauseGame);
</script>

</html>
Expand Down

0 comments on commit ef4f262

Please sign in to comment.