<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Attrape les chats !</title>
<style>
body {
margin: 0;
background-color: #ccc;
}
#game-container {
position: relative;
margin: 0 auto;
width: 800px;
height: 600px;
background-image: url('https://votre-image/fond-jeu.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
border: 2px solid #000;
touch-action: none; /* Empêche le comportement par défaut du navigateur sur les gestes tactiles */
}
#assiette {
position: absolute;
bottom: 10px;
left: 0;
width: 100px;
height: auto;
}
.tartine {
position: absolute;
width: 50px;
height: auto;
}
#score, #instructions, #lives {
color: black;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
font-family: Arial, sans-serif;
}
#instructions {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
font-family: Arial, sans-serif;
}
#lives {
position: absolute;
top: 40px;
left: 10px;
font-size: 24px;
font-family: Arial, sans-serif;
}
/* Style pour l'écran Game Over */
#game-over {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 10;
}
#game-over img {
max-width: 100%;
max-height: 100%;
}
#final-score {
position: absolute;
top: 20px;
left: 20px;
font-size: 36px;
color: white;
font-family: 'Calibri', sans-serif;
font-weight: bold;
}
/* Style pour l'écran de démarrage */
#start-screen {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 20;
}
#start-button {
padding: 20px 40px;
font-size: 24px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 8px;
transition: background-color 0.3s;
}
#start-button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div id="game-container">
<img id="assiette" src="https://votre-image/assiette.png" alt="Bateau">
<div id="score">Score: 0</div>
<div id="lives">Vies: 5</div>
<div id="instructions">Déplacez le bateau pour attraper les chats !</div>
<div id="game-over">
<img src="https://votre-image-game_over.png" alt="Game Over">
<div id="final-score"></div>
</div>
<!-- Écran de démarrage déplacé à l'intérieur du conteneur du jeu -->
<div id="start-screen">
<button id="start-button">Démarrer le Jeu</button>
</div>
</div>
<!-- Éléments audio -->
<audio id="start-sound" src="https://votre-son.wav"></audio>
<audio id="lose-life-sound" src="https://votre-son-2.wav"></audio>
<audio id="game-over-music" src="https://votre-musique-game-over.wav"></audio> <!-- Suppression de l'attribut loop -->
<audio id="background-music" src="https://votre-musique-game.mp3"></audio> <!-- Nouvel élément audio pour la musique de fond -->
<script>
window.onload = function() {
const gameContainer = document.getElementById('game-container');
const assiette = document.getElementById('assiette');
const scoreDisplay = document.getElementById('score');
const livesDisplay = document.getElementById('lives');
const finalScoreDisplay = document.getElementById('final-score');
const gameOverDiv = document.getElementById('game-over');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
// Récupération des éléments audio
const startSound = document.getElementById('start-sound');
const loseLifeSound = document.getElementById('lose-life-sound');
const gameOverMusic = document.getElementById('game-over-music');
const backgroundMusic = document.getElementById('background-music'); // Nouvel élément audio
// Déclaration des variables avant utilisation
let score = 0;
let lives = 5;
let vitesse = 2;
let niveau = 1;
let gameIsOver = false;
let tartineInterval;
let vitesseInterval;
let backgroundMusicTimeout; // Variable pour stocker la minuterie de la musique de fond
// Configuration de la musique de fond
backgroundMusic.volume = 0.2; // Volume réduit (0.0 à 1.0)
// backgroundMusic.loop = true; // Optionnel : Définir la musique de fond en boucle
// Positionnement initial de l'assiette
assiette.style.left = (gameContainer.clientWidth - assiette.offsetWidth) / 2 + 'px';
// Fonction pour déplacer l'assiette en fonction de la position x
function deplacerAssiette(x) {
let rect = gameContainer.getBoundingClientRect();
let positionX = x - rect.left - (assiette.offsetWidth / 2);
if (positionX < 0) positionX = 0;
if (positionX > gameContainer.clientWidth - assiette.offsetWidth) positionX = gameContainer.clientWidth - assiette.offsetWidth;
assiette.style.left = positionX + 'px';
}
// Déplacement de l'assiette avec la souris
gameContainer.addEventListener('mousemove', (e) => {
deplacerAssiette(e.clientX);
});
// Déplacement de l'assiette avec le toucher
gameContainer.addEventListener('touchstart', (e) => {
deplacerAssiette(e.touches[0].clientX);
e.preventDefault(); // Empêche le comportement par défaut
});
gameContainer.addEventListener('touchmove', (e) => {
deplacerAssiette(e.touches[0].clientX);
e.preventDefault(); // Empêche le comportement par défaut
});
// Fonction pour jouer le son de démarrage
function jouerSonDemarrage() {
startSound.currentTime = 0;
}
// Fonction pour jouer le son de perte de vie
function jouerSonPerteVie() {
loseLifeSound.currentTime = 0;
}
// Fonction pour jouer la musique de Game Over
function jouerMusiqueGameOver() {
gameOverMusic.currentTime = 0;
}
// Fonction pour jouer la musique de fond
function jouerMusiqueFond() {
backgroundMusic.currentTime = 0;
}
// Création des tartines (chats)
function creerTartine() {
if (gameIsOver) return;
const tartine = document.createElement('img');
tartine.src = 'https://votre-image/tartine.png'; // Chemin de votre image
tartine.classList.add('tartine');
tartine.style.left = Math.random() * (gameContainer.clientWidth - 50) + 'px';
tartine.style.top = '0px';
gameContainer.appendChild(tartine);
laisserTomber(tartine);
}
// Mouvement des tartines
function laisserTomber(tartine) {
function move() {
if (gameIsOver) return;
let tartineTop = parseFloat(tartine.style.top);
tartineTop += vitesse;
tartine.style.top = tartineTop + 'px';
// Vérification de la collision
let tartineLeft = parseFloat(tartine.style.left);
let assietteLeft = parseFloat(assiette.style.left);
let tartineBottom = tartineTop + tartine.offsetHeight;
let assietteTop = gameContainer.clientHeight - assiette.offsetHeight - 10;
if (tartineBottom >= assietteTop) {
if (tartineLeft + tartine.offsetWidth > assietteLeft && tartineLeft < assietteLeft + assiette.offsetWidth) {
score++;
scoreDisplay.textContent = `Score: ${score}`;
gameContainer.removeChild(tartine);
return;
} else if (tartineTop > gameContainer.clientHeight) {
gameContainer.removeChild(tartine);
lives--;
livesDisplay.textContent = `Vies: ${lives}`;
jouerSonPerteVie(); // Jouer le son de perte de vie
if (lives <= 0) {
gameOver();
}
return;
}
} else if (tartineTop > gameContainer.clientHeight) {
gameContainer.removeChild(tartine);
lives--;
livesDisplay.textContent = `Vies: ${lives}`;
jouerSonPerteVie(); // Jouer le son de perte de vie
if (lives <= 0) {
gameOver();
}
return;
}
requestAnimationFrame(move);
}
requestAnimationFrame(move);
}
// Augmentation de la vitesse du jeu
function augmenterVitesse() {
if (gameIsOver) return;
vitesse += 1; // Augmente la vitesse de 1
niveau++;
console.log(`Niveau: ${niveau}, Vitesse: ${vitesse}`);
}
// Fonction pour terminer le jeu
function gameOver() {
gameIsOver = true;
clearInterval(tartineInterval);
clearInterval(vitesseInterval);
clearTimeout(backgroundMusicTimeout); // Annuler la minuterie de la musique de fond
gameOverDiv.style.display = 'flex';
finalScoreDisplay.textContent = `Score final: ${score}`;
jouerMusiqueGameOver(); // Jouer la musique de Game Over
// Arrêter la musique de fond si elle est en cours de lecture
if (!backgroundMusic.paused) {
backgroundMusic.pause();
backgroundMusic.currentTime = 0;
}
}
// Lancement du jeu après clic sur le bouton de démarrage
startButton.addEventListener('click', () => {
startScreen.style.display = 'none';
jouerSonDemarrage();
tartineInterval = setInterval(creerTartine, 500); // Crée une tartine toutes les demi-secondes
vitesseInterval = setInterval(augmenterVitesse, 3000); // Augmente la vitesse toutes les 3 secondes
// Définir la minuterie pour jouer la musique de fond après 10,5 secondes
backgroundMusicTimeout = setTimeout(jouerMusiqueFond, 10500); // 10 500 ms = 10,5 secondes
});
};
</script>
</body>
</html>