Version initiale

public/javascripts/game.js

@@ -0,0 +1,163 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+let bricks = [];
+let paddle = { x: 175, y: 510, width: 75, height: 15 };
+let ball = { x: 200, y: 370, dx: 4, dy: -4, radius: 8 };
+const floorY = 525; // Define the floor position
+
+let isPaused = false;
+
+function togglePause() {
+    isPaused = !isPaused;
+    if (!isPaused) {
+        requestAnimationFrame(update);
+    }
+}
+
+function drawBricks() {
+    bricks.forEach(brick => {
+        ctx.fillStyle = brick.color;
+        ctx.fillRect(brick.x, brick.y, 90, 30);
+        ctx.fillStyle = brick.textColor;
+        ctx.font = '14px Arial';
+        ctx.fillText(brick.text, brick.x + 10, brick.y + 20);
+    });
+}
+
+function drawPaddle() {
+    ctx.fillStyle = '#003333';
+    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+}
+
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+    ctx.fillStyle = '#003333';
+    ctx.fill();
+    ctx.closePath();
+}
+
+function movePaddle(e) {
+    if (!isPaused) {
+        let relativeX = e.clientX - canvas.offsetLeft;
+        if (relativeX > 0 && relativeX < canvas.width) {
+            paddle.x = relativeX - paddle.width / 2;
+        }
+    }
+}
+
+function collisionDetection() {
+    bricks.forEach((brick, index) => {
+        if (
+            ball.x > brick.x &&
+            ball.x < brick.x + 90 &&  // Changed from 50 to 90
+            ball.y > brick.y &&
+            ball.y < brick.y + 30     // Changed from 20 to 30
+        ) {
+            ball.dy = -ball.dy;
+            bricks.splice(index, 1);
+        }
+    });
+}
+
+function drawPauseScreen() {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = 'white';
+    ctx.font = '30px Arial';
+    ctx.fillText('PAUSED', canvas.width / 2 - 50, canvas.height / 2);
+}
+
+function update() {
+
+    if (isPaused) {
+        drawPauseScreen();
+        return;
+    }
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw background image
+    let background = new Image();
+    background.src = '/assets/images/background.png';
+    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
+
+    // Draw floor line
+    ctx.beginPath();
+    ctx.moveTo(0, floorY);
+    ctx.lineTo(canvas.width, floorY);
+    ctx.strokeStyle = 'white';
+    ctx.stroke();
+
+    drawBricks();
+    drawPaddle();
+    drawBall();
+
+    collisionDetection();
+
+    if (bricks.length === 0) {
+        alert('Congratulations! You won!');
+        document.location.reload();
+        return;
+    }
+
+    // Bounce off side walls
+    if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
+        ball.dx = -ball.dx;
+    }
+
+    // Bounce off top wall
+    if (ball.y + ball.dy < ball.radius) {
+        ball.dy = -ball.dy;
+    } else if (ball.y + ball.dy > floorY - ball.radius) { // Changed to use floorY
+        if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
+            // Calculate where the ball hit the paddle
+            let hitPos = (ball.x - paddle.x) / paddle.width;
+
+            // Change angle based on where the ball hit the paddle
+            let angle = hitPos * Math.PI - Math.PI/2;
+
+            // Add some randomness to the angle
+            angle += (Math.random() - 0.5) * Math.PI/4;
+
+            // Set new velocity based on this angle
+            let speed = Math.sqrt(ball.dx * ball.dx + ball.dy * ball.dy);
+            ball.dx = Math.cos(angle) * speed;
+            ball.dy = -Math.abs(Math.sin(angle) * speed); // Ensure the ball always goes up
+        } else {
+            alert('GAME OVER');
+            document.location.reload();
+        }
+    }
+
+    ball.x += ball.dx;
+    ball.y += ball.dy;
+
+    requestAnimationFrame(update);
+}
+
+document.addEventListener('mousemove', movePaddle, false);
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'p' || e.key === 'P') {
+        togglePause();
+    }
+});
+
+// Create pause button
+const pauseButton = document.createElement('button');
+pauseButton.textContent = 'Pause';
+pauseButton.style.position = 'absolute';
+pauseButton.style.top = '10px';
+pauseButton.style.left = '10px';
+document.body.appendChild(pauseButton);
+
+pauseButton.addEventListener('click', togglePause);
+
+fetch('/bricks')
+    .then(response => response.json())
+    .then(data => {
+        bricks = data;
+        update();
+    });

public/javascripts/main.js

@@ -0,0 +1,2 @@
+// Main application JavaScript file
+console.log('Main JavaScript file loaded');