118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
let canvas = document.getElementById("game");
|
|
let ctx = canvas.getContext("2d");
|
|
let score = 0;
|
|
let running = false;
|
|
let ball, paddle, bricks, rows, cols, speed;
|
|
const brickColors = ["#FF5733", "#33FF57", "#3357FF", "#FF33F5", "#33FFF5", "#F5FF33"];
|
|
|
|
let hitSound = new Audio("hit.wav");
|
|
let loseSound = new Audio("lose.wav");
|
|
let wallSound = new Audio("wall.wav");
|
|
let winSound = new Audio("win.wav");
|
|
|
|
function startGame(){
|
|
score = 0;
|
|
document.getElementById("score").textContent = score;
|
|
running = true;
|
|
|
|
let diff = document.getElementById("diff").value;
|
|
if(diff === "easy"){ rows = 3; cols = 5; speed = 3; }
|
|
if(diff === "medium"){ rows = 4; cols = 7; speed = 4; }
|
|
if(diff === "hard"){ rows = 6; cols = 9; speed = 5; }
|
|
|
|
paddle = { x:200, w:80, h:10 };
|
|
ball = { x:240, y:200, dx:speed, dy:-speed, r:6 };
|
|
bricks = [];
|
|
|
|
for(let r=0;r<rows;r++){
|
|
for(let c=0;c<cols;c++){
|
|
let color = brickColors[r % brickColors.length];
|
|
bricks.push({ x: c*50+30, y: r*20+30, w:40, h:15, hit:false, color: color });
|
|
}
|
|
}
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
function loop(){
|
|
if(!running) return;
|
|
ctx.clearRect(0,0,480,320);
|
|
|
|
ctx.fillStyle = "#FFCC00";
|
|
ctx.fillRect(paddle.x, 300, paddle.w, paddle.h);
|
|
|
|
ctx.fillStyle = "#00FF7F";
|
|
ctx.beginPath();
|
|
ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2);
|
|
ctx.fill();
|
|
|
|
ball.x += ball.dx;
|
|
ball.y += ball.dy;
|
|
|
|
if(ball.x < ball.r || ball.x > 480-ball.r || ball.y < ball.r){
|
|
if(ball.x < ball.r || ball.x > 480-ball.r) ball.dx *= -1;
|
|
if (ball.y < ball.r) ball.dy *= -1;
|
|
|
|
wallSound.currentTime = 0;
|
|
wallSound.play();
|
|
}
|
|
|
|
if(ball.y > 294 && ball.x > paddle.x && ball.x < paddle.x+paddle.w){
|
|
let deltaX = ball.x - (paddle.x + paddle.w/2);
|
|
ball.dx = deltaX * 0.1;
|
|
ball.dy *= -1;
|
|
|
|
wallSound.currentTime = 0;
|
|
wallSound.play();
|
|
}
|
|
|
|
bricks.forEach(b =>{
|
|
if(!b.hit && ball.x > b.x && ball.x < b.x+b.w && ball.y > b.y && ball.y < b.y+b.h){
|
|
b.hit = true;
|
|
ball.dy *= -1;
|
|
score += 10;
|
|
document.getElementById("score").textContent = score;
|
|
hitSound.currentTime = 0;
|
|
hitSound.play();
|
|
}
|
|
});
|
|
|
|
bricks.forEach(b =>{
|
|
if(!b.hit){
|
|
ctx.fillStyle = b.color;
|
|
ctx.fillRect(b.x,b.y,b.w,b.h);
|
|
ctx.strokeStyle = "#000000";
|
|
ctx.strokeRect(b.x,b.y,b.w,b.h);
|
|
}
|
|
});
|
|
|
|
if(bricks.every(b => b.hit)){
|
|
winSound.currentTime = 0;
|
|
winSound.play();
|
|
running = false;
|
|
alert("YOU WIN! Total Score: " + score);
|
|
saveScore();
|
|
return;
|
|
}
|
|
|
|
if(ball.y > 330){
|
|
loseSound.currentTime = 0;
|
|
loseSound.play();
|
|
running = false;
|
|
saveScore();
|
|
alert("Game Over");
|
|
return;
|
|
}
|
|
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
window.addEventListener("mousemove", e =>{
|
|
let newX = e.clientX - canvas.offsetLeft - paddle.w/2;
|
|
if(newX < 0) newX = 0;
|
|
if(newX > canvas.width - paddle.w) newX = canvas.width - paddle.w;
|
|
paddle.x = newX;
|
|
});
|
|
|
|
function saveScore(){
|
|
fetch("save.php?score="+score);
|
|
} |