Physics Ball Bounce Game
Windows Tip: After downloading the ZIP, right-click the folder → Properties → check "Unblock" (if visible) → Apply → OK. This removes the "file came from another computer" warning so everything works perfectly!
HTML
CSS
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Physics Ball Bounce Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB, #98D8C8);
font-family: 'Arial', sans-serif;
touch-action: none;
}
canvas { display: block; background: transparent; }
#ui {
position: absolute; top: 20px; left: 20px;
color: white; font-size: 1.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.6); z-index: 10;
}
#startScreen, #gameOver {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.7); color: white;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 2.5em; text-align: center; z-index: 20;
}
button {
margin-top: 30px; padding: 15px 40px; font-size: 1.2em;
background: #ff4757; color: white; border: none;
border-radius: 50px; cursor: pointer;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
button:hover { background: #ff3742; transform: scale(1.05); }
</style>
</head>
<body>
<div id="ui">
<div>Score: <span id="score">0</span></div>
<div>Balls: <span id="lives">3</span></div>
</div>
<div id="startScreen">
<h1>Physics Ball Bounce!</h1>
<p>Click/Tap to launch colorful balls<br>Don't let them fall!</p>
<button onclick="startGame()">PLAY NOW</button>
</div>
<div id="gameOver" style="display:none">
<h1>Game Over!</h1>
<div id="finalScore">Score: 0</div>
<button onclick="startGame()">Play Again</button>
</div>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let score=0, lives=3, balls=[], isPlaying=false;
const gravity=0.5, bounce=0.75, friction=0.99;
function resize(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}
window.addEventListener("resize",resize); resize();
class Ball {
constructor(x,y,vx,vy,color){
this.x=x;this.y=y;this.vx=vx;this.vy=vy;
this.radius=30;this.color=color;this.trail=[];
}
update(){
this.vy+=gravity; this.vx*=friction; this.vy*=friction;
this.x+=this.vx; this.y+=this.vy;
this.trail.push({x:this.x,y:this.y});
if(this.trail.length>15)this.trail.shift();
if(this.x-this.radius<0||this.x+this.radius>canvas.width){
this.vx=-this.vx*bounce;
this.x=this.x<canvas.width/2?this.radius:canvas.width-this.radius;
}
if(this.y-this.radius<0){this.vy=-this.vy*bounce;this.y=this.radius;}
if(this.y-this.radius>canvas.height+100){
lives--;document.getElementById("lives").textContent=lives;
if(lives<=0)gameOver();
balls=balls.filter(b=>b!==this);
}
}
draw(){
this.trail.forEach((p,i)=>{
ctx.beginPath();
ctx.arc(p.x,p.y,this.radius*(i/this.trail.length),0,Math.PI*2);
ctx.fillStyle=`rgba(255,255,255,${i/this.trail.length*0.3})`;
ctx.fill();
});
const grad=ctx.createRadialGradient(this.x-10,this.y-10,0,this.x,this.y,this.radius);
grad.addColorStop(0,"white");
grad.addColorStop(0.7,this.color);
grad.addColorStop(1,this.color);
ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
ctx.fillStyle=grad;ctx.fill();
ctx.strokeStyle="rgba(255,255,255,0.5)";ctx.lineWidth=4;ctx.stroke();
ctx.beginPath();ctx.arc(this.x-10,this.y-10,this.radius*0.3,0,Math.PI*2);
ctx.fillStyle="rgba(255,255,255,0.6)";ctx.fill();
}
}
function launchBall(e){
if(!isPlaying)return;
const x=e.touches?e.touches[0].clientX:e.clientX;
const y=e.touches?e.touches[0].clientY:e.clientY;
const colors=["#ff6b6b","#4ecdc4","#45b7d1","#f9ca24","#f3722c","#5f27cd"];
const color=colors[Math.floor(Math.random()*colors.length)];
const angle=Math.atan2(y-canvas.height*0.3,x-canvas.width/2);
const ball=new Ball(canvas.width/2,canvas.height*0.3,Math.cos(angle)*15,Math.sin(angle)*15,color);
balls.push(ball);score++;
document.getElementById("score").textContent=score;
}
function animate(){
ctx.clearRect(0,0,canvas.width,canvas.height);
balls.forEach(b=>{b.update();b.draw();});
ctx.strokeStyle="rgba(255,255,255,0.3)";ctx.lineWidth=8;
ctx.beginPath();ctx.moveTo(0,canvas.height-50);ctx.lineTo(canvas.width,canvas.height-50);ctx.stroke();
if(isPlaying)requestAnimationFrame(animate);
}
function startGame(){
score=0;lives=3;balls=[];
document.getElementById("score").textContent="0";
document.getElementById("lives").textContent="3";
document.getElementById("startScreen").style.display="none";
document.getElementById("gameOver").style.display="none";
isPlaying=true;animate();
}
function gameOver(){
isPlaying=false;
document.getElementById("finalScore").textContent="Final Score: "+score;
document.getElementById("gameOver").style.display="flex";
}
canvas.addEventListener("click",launchBall);
canvas.addEventListener("touchstart",launchBall);
</script>
</body>
</html>