Game development – <canvas> <svg>
canvas
•The <canvas> element in the HTML sets the dimensions of the drawing area (500x500 pixels).
•id="myCanvas" gives it a reference name that JavaScript will use to interact with it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Drawing Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 2px solid #000;
}
</style>
</head>
<body>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// Get the canvas element and its context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Set the fill color to blue
ctx.fillStyle = 'blue';
// Draw a filled circle at position (250, 250) with radius 100
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI * 2); // arc(x, y, radius, startAngle, endAngle)
ctx.fill(); // Fill the circle
</script>
</body>
</html>
svg
The <svg> tag is used to define scalable vector graphics (SVG) in an HTML document. SVG is an
XML-based markup language for describing two-dimensional vector graphics. The <svg> tag
itself acts as a container for the graphic elements like shapes, paths, text, and images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Drawing Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
svg {
border: 2px solid #000;
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- Draw a Circle -->
<circle cx="250" cy="150" r="100" fill="blue" stroke="black" stroke-width="2" />
<!-- Draw a Rectangle -->
<rect x="50" y="300" width="200" height="100" fill="green" stroke="black" stroke-width="2" />
<!-- Draw a Line -->
<line x1="0" y1="0" x2="500" y2="500" stroke="red" stroke-width="2" />
<!-- Draw Text -->
<text x="150" y="250" font-family="Arial" font-size="24" fill="black">SVG Example</text>
</svg>
</body>
</html>
Click the Moving Target
<!DOCTYPE html>
<html>
<body>
<svg id="game" width="400" height="300" style="border:1px solid #000; background:#eef">
<circle id="target" r="20" fill="red"/>
</svg>
<script>
const t = document.getElementById("target");
let score = 0;
t.onclick = () => { score++; move(); };
function move() {
t.setAttribute("cx", Math.random() * 360 + 20);
t.setAttribute("cy", Math.random() * 260 + 20);
document.title = "Score: " + score;
}
move();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="c" width="400" height="300" style="border:1px solid #000"></canvas>
<script>
const ctx = c.getContext("2d");
let x, y, r = 20, score = 0;
c.onclick = e => {
const rect = c.getBoundingClientRect(), cx = e.clientX - rect.left, cy = e.clientY - rect.top;
if ((cx - x)**2 + (cy - y)**2 < r**2) { score++; draw(); }
};
function draw() {
x = Math.random() * (400 - 2*r) + r;
y = Math.random() * (300 - 2*r) + r;
ctx.clearRect(0, 0, 400, 300);
ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
document.title = "Score: " + score;
draw();
</script></body></html>
Dropping Bombs Animation Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dropping Bombs Animation</title>
</head>
<body>
<canvas id="bombCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('bombCanvas');
const ctx = canvas.getContext('2d');
class Bomb {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 10;
this.speed = 3;
this.exploding = false;
this.explosionRadius = 0;
this.maxExplosionRadius = 50;
}
update() {
if (!this.exploding) {
this.y += this.speed;
if (this.y + this.radius >= canvas.height) {
this.exploding = true;
}
} else {
this.explosionRadius += 4;
if (this.explosionRadius > this.maxExplosionRadius) {
// Reset bomb to top
this.exploding = false;
this.explosionRadius = 0;
this.y = -this.radius;
this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius;
}
}
}
draw() {
if (!this.exploding) {
// Draw bomb (circle with fuse)
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(this.x, this.y - this.radius);
ctx.lineTo(this.x, this.y - this.radius - 10);
ctx.stroke();
} else {
// Draw explosion
let gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.explosionRadius);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(0.5, 'orange');
gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.explosionRadius, 0, Math.PI * 2);
ctx.fill();
}
}
}
const bombs = [];
const bombCount = 5;
// Initialize bombs at random x positions above the canvas
for (let i = 0; i < bombCount; i++) {
bombs.push(new Bomb(Math.random() * (canvas.width - 20) + 10, Math.random() * -300));
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bombs.forEach(bomb => {
bomb.update();
bomb.draw();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Collision
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Collision Animation</title>
<style>
body { text-align: center; background: #222; color: white; }
canvas { background: #444; display: block; margin: 20px auto; }
</style>
</head>
<body>
<h2>Simple Collision Animation (No Calculations)</h2>
<canvas id="canvas" width="600" height="150"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Two balls with position, velocity, and radius
const ball1 = { x: 100, y: 75, radius: 20, v: 2 };
const ball2 = { x: 500, y: 75, radius: 20, v: -3 };
function drawBall(ball, color) {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Move balls
ball1.x += ball1.v;
ball2.x += ball2.v;
// Check for collision
if (Math.abs(ball1.x - ball2.x) <= ball1.radius + ball2.radius) {
// Reverse velocities on collision
ball1.v = -ball1.v;
ball2.v = -ball2.v;
}
// Bounce off walls
if (ball1.x - ball1.radius < 0 || ball1.x + ball1.radius > canvas.width) {
ball1.v = -ball1.v;
}
if (ball2.x - ball2.radius < 0 || ball2.x + ball2.radius > canvas.width) {
ball2.v = -ball2.v;
}
// Draw balls
drawBall(ball1, 'lightblue');
drawBall(ball2, 'orange');
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
