🎮 Cannon Shot Game – Learn Physics with Fun!
🎯 Cannon Shot Game
Adjust the angle (in degrees) and power to hit the target!
🎮 Cannon Shot Game – Learn Physics with Fun!
Have you ever wondered how gravity, angles, and velocity work together in real life—like shooting a cannonball? Well, here’s a simple and fun way to understand projectile motion using just your browser and a bit of code.
Today, I’m excited to introduce a browser-based Cannon Shot Game built with HTML5 Canvas and JavaScript. 🧠💥
🧩 What Does It Teach?
-
Angles in degrees
-
Projectile motion
-
Gravity's effect on vertical speed
-
Basic trigonometry with
sinandcos -
Simple animation with
requestAnimationFrame
🚀 How to Play
-
Adjust the angle of your cannon from 0° to 90°.
-
Set the power of the shot.
-
Press Fire! and watch the cannonball fly.
-
Try to hit the red target placed randomly on the canvas.
You'll get real-time feedback on your shot's accuracy.
🔍 Source Code
Here is the complete source code so you can try it yourself or customize it as you like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cannon Shot Game with Animation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #eef;
}
canvas {
border: 1px solid #000;
background-color: #fff;
margin-top: 20px;
}
input, button {
font-size: 16px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1>🎯 Cannon Shot Game</h1>
<p>Adjust the angle (in degrees) and power to hit the target!</p>
<label>Angle (degrees): <input type="number" id="angle" step="1" value="45" min="0" max="90"></label><br>
<label>Power: <input type="number" id="power" step="1" value="50" min="1" max="100"></label><br>
<button onclick="shoot()">Fire!</button>
<canvas id="gameCanvas" width="600" height="400"></canvas>
<p id="result"></p>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let targetX = Math.floor(Math.random() * 200) + 350;
let targetY = Math.floor(Math.random() * 200) + 100;
function drawTarget() {
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(targetX, targetY, 10, 0, Math.PI * 2);
ctx.fill();
}
function shoot() {
const angleDeg = parseFloat(document.getElementById('angle').value);
const power = parseFloat(document.getElementById('power').value);
const angleRad = angleDeg * (Math.PI / 180);
const velocityX = Math.cos(angleRad) * power;
const velocityY = -Math.sin(angleRad) * power;
let posX = 50;
let posY = canvas.height - 20;
const gravity = 0.5;
let vy = velocityY;
let vx = velocityX;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawTarget();
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawTarget();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(posX, posY, 5, 0, Math.PI * 2);
ctx.fill();
posX += vx * 0.1;
vy += gravity;
posY += vy * 0.1;
const dist = Math.sqrt((posX - targetX) ** 2 + (posY - targetY) ** 2);
const result = document.getElementById('result');
if (dist < 7) {
result.textContent = '🎉 Hit! Great shot!';
return;
}
if (posX > canvas.width || posY > canvas.height) {
result.textContent = '💨 Missed! Try adjusting your angle or power.';
return;
}
requestAnimationFrame(animate);
}
animate();
}
drawTarget();
</script>
</body>
</html>
🔧 Bonus Tips
-
Try changing
gravityto see how it affects flight. -
Increase canvas size to make longer-distance shots.
-
Add a scoring system to track hits over time.
🌟 Try It Out!
Copy the code above, paste it into an .html file, and open it in your browser. Fire away, and start tweaking the physics to make it your own!
If you enjoyed this project or want to learn how to build more educational games, let me know in the comments.
Happy Coding! 🚀🎮📐
Comments
Post a Comment