<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu Donkey Kong - Version Corrigée</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
color: white;
}
.container {
max-width: 900px;
width: 100%;
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
text-align: center;
}
h1 {
color: #FFD700;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
margin-bottom: 15px;
font-size: 2.5rem;
}
.game-info {
display: flex;
justify-content: space-between;
background: rgba(0, 0, 0, 0.5);
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
}
.info-item {
font-size: 1.2rem;
font-weight: bold;
}
#gameCanvas {
background: #2c3e50;
border: 5px solid #34495e;
border-radius: 10px;
display: block;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.controls {
margin: 20px 0;
text-align: center;
}
button {
background: #27ae60;
color: white;
border: none;
padding: 12px 25px;
font-size: 1.1rem;
border-radius: 50px;
cursor: pointer;
margin: 0 10px;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
button:hover {
background: #2ecc71;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
button:active {
transform: translateY(1px);
}
#restartButton {
background: #e74c3c;
}
#restartButton:hover {
background: #c0392b;
}
.instructions {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 10px;
margin-top: 20px;
text-align: left;
}
.instructions h3 {
color: #FFD700;
margin-bottom: 10px;
}
.instructions ul {
list-style-type: none;
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
}
.game-over, .level-complete {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 30px;
border-radius: 15px;
text-align: center;
display: none;
z-index: 100;
box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
border: 2px solid #FFD700;
width: 80%;
max-width: 400px;
}
.game-over h2, .level-complete h2 {
color: #FFD700;
font-size: 2rem;
margin-bottom: 15px;
}
.level-complete {
background: rgba(0, 0, 0, 0.9);
border: 2px solid #27ae60;
}
.level-complete h2 {
color: #27ae60;
}
.key {
display: inline-block;
background: #34495e;
padding: 5px 10px;
border-radius: 5px;
margin: 0 3px;
font-weight: bold;
border: 1px solid #7f8c8d;
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
#gameCanvas {
width: 100%;
height: auto;
}
.game-info {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Jeu Donkey Kong</h1>
<div class="game-info">
<div class="info-item" id="score">Score: 0</div>
<div class="info-item" id="lives">Vies: 3</div>
<div class="info-item" id="level">Niveau: 1</div>
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="controls">
<button id="startButton">Commencer</button>
<button id="restartButton">Redémarrer</button>
</div>
<div class="instructions">
<h3>Instructions</h3>
<ul>
<li>Utilisez les touches <span class="key">←</span> <span class="key">→</span> pour vous déplacer</li>
<li>Appuyez sur <span class="key">Espace</span> ou <span class="key">↑</span> pour sauter</li>
<li>Montez aux échelles avec <span class="key">↑</span> et <span class="key">↓</span></li>
<li>Évitez les barils et sauvez la princesse!</li>
</ul>
</div>
</div>
<div class="game-over" id="gameOver">
<h2>Game Over</h2>
<p>Votre score: <span id="finalScore">0</span></p>
<button id="gameOverButton">Rejouer</button>
</div>
<div class="level-complete" id="levelComplete">
<h2>Niveau Réussi!</h2>
<p>Prêt pour le niveau suivant?</p>
<button id="nextLevelButton">Niveau Suivant</button>
</div>
<script>
// Variables globales
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const livesElement = document.getElementById('lives');
const levelElement = document.getElementById('level');
const startButton = document.getElementById('startButton');
const restartButton = document.getElementById('restartButton');
const gameOverButton = document.getElementById('gameOverButton');
const nextLevelButton = document.getElementById('nextLevelButton');
const gameOverDiv = document.getElementById('gameOver');
const levelCompleteDiv = document.getElementById('levelComplete');
const finalScoreElement = document.getElementById('finalScore');
let gameRunning = false;
let score = 0;
let lives = 3;
let currentLevel = 1;
let gameInterval;
// Définition des objets du jeu
const player = {
x: 50,
y: 500,
width: 30,
height: 40,
speed: 5,
jumpPower: 12,
isJumping: false,
jumpVelocity: 0,
gravity: 0.5,
onLadder: false,
direction: 1
};
const donkeyKong = {
x: 100,
y: 100,
width: 60,
height: 60,
frame: 0,
frameCounter: 0
};
const princess = {
x: 700,
y: 100,
width: 30,
height: 40
};
let platforms = [];
let ladders = [];
let barrels = [];
let movingPlatforms = [];
let keys = {};
// Initialisation du jeu
function initGame() {
platforms = [
{x: 0, y: 550, width: 800, height: 20},
{x: 0, y: 450, width: 600, height: 20},
{x: 650, y: 450, width: 150, height: 20},
{x: 0, y: 350, width: 500, height: 20},
{x: 550, y: 350, width: 250, height: 20},
{x: 0, y: 250, width: 300, height: 20},
{x: 400, y: 250, width: 400, height: 20},
{x: 0, y: 150, width: 200, height: 20},
{x: 300, y: 150, width: 500, height: 20}
];
ladders = [
{x: 300, y: 450, height: 100},
{x: 700, y: 350, height: 100},
{x: 200, y: 350, height: 100},
{x: 500, y: 250, height: 100},
{x: 100, y: 250, height: 100},
{x: 600, y: 150, height: 100}
];
barrels = [];
movingPlatforms = [];
// Ajouter des plateformes mobiles pour le niveau 2
if (currentLevel === 2) {
movingPlatforms = [
{x: 300, y: 400, width: 100, height: 15, speed: 2, direction: 1, minX: 300, maxX: 500}
];
}
player.x = 50;
player.y = 500;
player.isJumping = false;
player.onLadder = false;
}
// Fonctions de dessin
function drawPlayer() {
ctx.fillStyle = 'red';
ctx.fillRect(player.x, player.y, player.width, player.height);
// Dessiner les yeux selon la direction
ctx.fillStyle = 'white';
if (player.direction === 1) {
ctx.fillRect(player.x + player.width - 10, player.y + 10, 5, 5);
} else {
ctx.fillRect(player.x + 5, player.y + 10, 5, 5);
}
}
function drawDonkeyKong() {
ctx.fillStyle = 'brown';
ctx.fillRect(donkeyKong.x, donkeyKong.y, donkeyKong.width, donkeyKong.height);
// Animation simple de Donkey Kong
donkeyKong.frameCounter++;
if (donkeyKong.frameCounter > 20) {
donkeyKong.frame = (donkeyKong.frame + 1) % 2;
donkeyKong.frameCounter = 0;
// Lancer un baril occasionnellement
if (donkeyKong.frame === 0 && Math.random() < 0.1 && barrels.length < 5) {
barrels.push({
x: donkeyKong.x + donkeyKong.width/2,
y: donkeyKong.y + donkeyKong.height,
width: 20,
height: 20,
speed: currentLevel === 1 ? 3 : 4,
direction: -1,
onLadder: false,
fallCounter: 0
});
}
}
// Dessiner les bras en fonction de l'animation
ctx.fillStyle = 'darkbrown';
if (donkeyKong.frame === 0) {
ctx.fillRect(donkeyKong.x - 10, donkeyKong.y + 10, 15, 10);
} else {
ctx.fillRect(donkeyKong.x + donkeyKong.width - 5, donkeyKong.y + 10, 15, 10);
}
}
function drawPrincess() {
ctx.fillStyle = 'pink';
ctx.fillRect(princess.x, princess.y, princess.width, princess.height);
// Dessiner la tête
ctx.fillStyle = 'white';
ctx.fillRect(princess.x + 5, princess.y - 10, princess.width - 10, 10);
}
function drawPlatforms() {
ctx.fillStyle = 'blue';
platforms.forEach(platform => {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
});
}
function drawLadders() {
ctx.fillStyle = 'yellow';
ladders.forEach(ladder => {
// Dessiner les montants de l'échelle
ctx.fillRect(ladder.x, ladder.y, 5, ladder.height);
ctx.fillRect(ladder.x + 15, ladder.y, 5, ladder.height);
// Dessiner les barreaux
for (let i = 0; i < ladder.height; i += 15) {
ctx.fillRect(ladder.x, ladder.y + i, 20, 5);
}
});
}
function drawBarrels() {
ctx.fillStyle = 'brown';
barrels.forEach(barrel => {
ctx.beginPath();
ctx.arc(barrel.x + barrel.width/2, barrel.y + barrel.height/2, barrel.width/2, 0, Math.PI * 2);
ctx.fill();
// Dessiner les détails du baril
ctx.strokeStyle = 'darkbrown';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(barrel.x + barrel.width/2, barrel.y + barrel.height/2, barrel.width/2 - 2, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(barrel.x + 2, barrel.y + barrel.height/2);
ctx.lineTo(barrel.x + barrel.width - 2, barrel.y + barrel.height/2);
ctx.stroke();
});
}
function drawMovingPlatforms() {
ctx.fillStyle = 'lightblue';
movingPlatforms.forEach(platform => {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
});
}
// Gestion des mouvements
function movePlayer() {
if (keys['ArrowLeft']) {
player.x -= player.speed;
player.direction = -1;
}
if (keys['ArrowRight']) {
player.x += player.speed;
player.direction = 1;
}
// Grimper aux échelles
player.onLadder = false;
if (keys['ArrowUp'] || keys['ArrowDown']) {
for (const ladder of ladders) {
if (player.x + player.width/2 > ladder.x &&
player.x + player.width/2 < ladder.x + 20 &&
player.y + player.height > ladder.y &&
player.y < ladder.y + ladder.height) {
player.onLadder = true;
if (keys['ArrowUp']) {
player.y -= player.speed;
}
if (keys['ArrowDown']) {
player.y += player.speed;
}
break;
}
}
}
// Sauter
if ((keys[' '] || keys['ArrowUp']) && !player.isJumping && !player.onLadder) {
player.isJumping = true;
player.jumpVelocity = -player.jumpPower;
playJumpSound();
}
// Appliquer la gravité si pas sur une échelle
if (!player.onLadder) {
player.y += player.jumpVelocity;
player.jumpVelocity += player.gravity;
// Vérifier les collisions avec les plateformes
let onGround = false;
for (const platform of platforms) {
if (player.x + player.width > platform.x &&
player.x < platform.x + platform.width &&
player.y + player.height > platform.y &&
player.y + player.height < platform.y + platform.height/2 &&
player.jumpVelocity >= 0) {
player.y = platform.y - player.height;
player.isJumping = false;
player.jumpVelocity = 0;
onGround = true;
}
}
// Vérifier les collisions avec les plateformes mobiles
for (const platform of movingPlatforms) {
if (player.x + player.width > platform.x &&
player.x < platform.x + platform.width &&
player.y + player.height > platform.y &&
player.y + player.height < platform.y + platform.height/2 &&
player.jumpVelocity >= 0) {
player.y = platform.y - player.height;
player.isJumping = false;
player.jumpVelocity = 0;
onGround = true;
// Le joueur se déplace avec la plateforme
player.x += platform.speed * platform.direction;
}
}
// Si le joueur n'est sur aucune plateforme, il continue à tomber
if (!onGround && !player.isJumping) {
player.isJumping = true;
player.jumpVelocity = 0;
}
}
// Limites de l'écran
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
if (player.y > canvas.height) {
playerDie();
}
}
function moveBarrels() {
for (let i = barrels.length - 1; i >= 0; i--) {
const barrel = barrels[i];
// Mouvement horizontal
barrel.x += barrel.speed * barrel.direction;
// Vérifier les chutes des barils
let onPlatform = false;
for (const platform of platforms) {
if (barrel.x + barrel.width > platform.x &&
barrel.x < platform.x + platform.width &&
barrel.y + barrel.height >= platform.y &&
barrel.y < platform.y + platform.height) {
barrel.y = platform.y - barrel.height;
onPlatform = true;
// Changer de direction en arrivant au bord
if (barrel.x <= platform.x || barrel.x + barrel.width >= platform.x + platform.width) {
barrel.direction *= -1;
}
}
}
// Vérifier les échelles (les barils peuvent tomber dessus)
if (!onPlatform) {
for (const ladder of ladders) {
if (barrel.x + barrel.width/2 > ladder.x &&
barrel.x + barrel.width/2 < ladder.x + 20 &&
barrel.y + barrel.height > ladder.y &&
barrel.y < ladder.y + ladder.height &&
Math.random() < 0.01) {
barrel.onLadder = true;
}
}
}
// Si le baril est sur une échelle, le faire descendre
if (barrel.onLadder) {
barrel.y += 2;
// Vérifier si le baril a atteint le bas de l'échelle
let stillOnLadder = false;
for (const ladder of ladders) {
if (barrel.x + barrel.width/2 > ladder.x &&
barrel.x + barrel.width/2 < ladder.x + 20 &&
barrel.y + barrel.height > ladder.y &&
barrel.y < ladder.y + ladder.height) {
stillOnLadder = true;
break;
}
}
if (!stillOnLadder) {
barrel.onLadder = false;
}
} else if (!onPlatform) {
// Appliquer la gravité
barrel.y += 3;
}
// Supprimer les barils sortis de l'écran
if (barrel.y > canvas.height) {
barrels.splice(i, 1);
score += 10;
scoreElement.textContent = `Score: ${score}`;
}
}
}
function moveMovingPlatforms() {
for (const platform of movingPlatforms) {
platform.x += platform.speed * platform.direction;
if (platform.x <= platform.minX || platform.x + platform.width >= platform.maxX) {
platform.direction *= -1;
}
}
}
// Vérification des collisions
function checkCollisions() {
// Vérifier les collisions avec les barils
for (const barrel of barrels) {
if (player.x + player.width > barrel.x &&
player.x < barrel.x + barrel.width &&
player.y + player.height > barrel.y &&
player.y < barrel.y + barrel.height) {
playCollisionSound();
playerDie();
break;
}
}
// Vérifier si le joueur a atteint la princesse
if (player.x + player.width > princess.x &&
player.x < princess.x + princess.width &&
player.y + player.height > princess.y &&
player.y < princess.y + princess.height) {
if (currentLevel === 1) {
currentLevel = 2;
levelCompleteDiv.style.display = 'block';
gameRunning = false;
} else {
// Le joueur a gagné
alert(`Félicitations! Vous avez gagné avec un score de ${score}`);
resetGame();
}
}
}
function playerDie() {
lives--;
livesElement.textContent = `Vies: ${lives}`;
if (lives <= 0) {
gameOver();
} else {
// Réinitialiser la position du joueur
player.x = 50;
player.y = 500;
player.isJumping = false;
player.jumpVelocity = 0;
}
}
function gameOver() {
gameRunning = false;
clearInterval(gameInterval);
finalScoreElement.textContent = score;
gameOverDiv.style.display = 'block';
}
function resetGame() {
score = 0;
lives = 3;
currentLevel = 1;
scoreElement.textContent = `Score: ${score}`;
livesElement.textContent = `Vies: ${lives}`;
levelElement.textContent = `Niveau: ${currentLevel}`;
gameOverDiv.style.display = 'none';
levelCompleteDiv.style.display = 'none';
initGame();
}
// Sons du jeu (simulés avec l'API Web Audio)
function playJumpSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.type = 'sine';
oscillator.frequency.value = 523.25; // Note Do
gainNode.gain.value = 0.3;
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.1);
} catch (e) {
console.log("Audio context not supported" );
}
}
function playCollisionSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.type = 'sawtooth';
oscillator.frequency.value = 220; // Note La
gainNode.gain.value = 0.3;
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.2);
} catch (e) {
console.log("Audio context not supported" );
}
}
// Boucle de jeu
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlatforms();
drawLadders();
drawMovingPlatforms();
drawBarrels();
drawDonkeyKong();
drawPrincess();
drawPlayer();
if (gameRunning) {
movePlayer();
moveBarrels();
moveMovingPlatforms();
checkCollisions();
}
}
// Événements
startButton.addEventListener('click', () => {
gameRunning = true;
startButton.textContent = 'Jeu en cours...';
startButton.disabled = true;
gameInterval = setInterval(gameLoop, 1000/60);
});
restartButton.addEventListener('click', () => {
resetGame();
gameRunning = true;
startButton.textContent = 'Jeu en cours...';
startButton.disabled = true;
gameInterval = setInterval(gameLoop, 1000/60);
});
gameOverButton.addEventListener('click', () => {
resetGame();
gameRunning = true;
startButton.textContent = 'Jeu en cours...';
startButton.disabled = true;
gameInterval = setInterval(gameLoop, 1000/60);
});
nextLevelButton.addEventListener('click', () => {
levelCompleteDiv.style.display = 'none';
levelElement.textContent = `Niveau: ${currentLevel}`;
initGame();
gameRunning = true;
gameInterval = setInterval(gameLoop, 1000/60);
});
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Initialiser le jeu
initGame();
gameLoop();
</script>
</body>
</html>
---------------
...survivre à ses Medecins...