breakout-custom/public/javascripts/game.js
2024-09-06 18:02:34 -04:00

184 lines
No EOL
5.2 KiB
JavaScript

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Load background image once, outside of any function
const backgroundImage = new Image();
backgroundImage.src = '/assets/images/background.png';
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;
if (e.type.startsWith('mouse')) {
relativeX = e.clientX - canvas.offsetLeft;
} else if (e.type.startsWith('touch')) {
relativeX = e.touches[0].clientX - canvas.offsetLeft;
e.preventDefault(); // Prevent scrolling when touching the canvas
}
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
ctx.drawImage(backgroundImage, 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) {
// Gagné !!
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 - paddle.height) { // Changed to use floorY
if (ball.x > paddle.x-ball.radius && ball.x < paddle.x + paddle.width+ball.radius) {
// Limit the angle to a maximum of 60 degrees (pi/3 radians) from vertical
const maxAngle = Math.PI*2/3;
// Calculate where the ball hit the paddle
let hitPos = Math.max(0.1, Math.min(0.9, (ball.x - paddle.x) / paddle.width)) ;
console.log('Hit position:', hitPos); // Debugging purposes
// Change angle based on where the ball hit the paddle
let angle = hitPos * Math.PI - Math.PI/2;
console.log('Angle brut:', angle); // Debugging purposes
// Add some randomness to the angle (within the limited range)
angle += (Math.random() - 0.5) * Math.PI/12;
// Ensure the angle stays within the maximum limits after randomness
if (Math.abs(angle) < maxAngle) {
angle = Math.sign(angle) * maxAngle;
}
console.log('Angle ajusté:', angle); // Debugging purposes
// 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 * Math.sign(angle);
ball.dy = -Math.abs(Math.sin(angle) * speed); // Ensure the ball always goes up
} else {
// 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();
});