Hi guy!... If You're one of the few people that come to this blog, you know for sure that it's been quite some time since the last post. I had a lot to do in the past couple of years. Almost 2 years already. Time flies by so fast! I got my Bachelor's degree. Currently, i'm pursing a Master's degree in Information System Management. But since i wanted to come back, i wanted to relearn myself all that i had forgotten. This Tutorial i'm about to give to you is how i relearned things step by step after so long. With AI these days, people sometimes think that they can do work more faster, but they don't work at all. They AI is making the work for them. And while trying to relearn things, i was tempted to use AI to go faster. But getting code from AI makes you dumber than you think when you are a beginner and don't have solid foundation. So this blog is dedicated to the creation of games using JavaScript. One of the best tools you could use in JavaScript to m...
Introduction:
In this tutorial, we’ll dive into one of the most powerful features in HTML5 for game development: the <canvas> element. This is what you’ll use to render graphics and create interactive animations in your browser-based games. We’ll start by learning how to set up a canvas, draw simple shapes, and build the foundation for more complex game mechanics.
What is the <canvas> Element?
The <canvas> element in HTML5 provides a drawable region in your webpage, allowing you to use JavaScript to draw 2D shapes, images, and animations dynamically. It is one of the fundamental building blocks of many modern browser games.
Step 1: Setting Up the Canvas
First, let’s set up a basic canvas in your HTML file. Create a new HTML file and add the following code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #282c34;
}
canvas {
background-color: #fff;
border: 2px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
</script>
</body>
</html>
Explanation:
- We’ve added a
<canvas>element with an ID ofgameCanvasand set its width to 800 and height to 600. You can adjust these dimensions based on your game’s needs. - Inside the
<script>tag, we grab a reference to the canvas element and its 2D drawing context (ctx), which will allow us to draw shapes and images on the canvas.
Step 2: Drawing Shapes on the Canvas
Now that we’ve set up our canvas, let’s draw some shapes. We’ll start by drawing a rectangle, circle, and line.
html
<script>
// Drawing a rectangle
ctx.fillStyle = '#00FF00'; // Green color
ctx.fillRect(50, 50, 200, 100); // x, y, width, height
// Drawing a circle
ctx.beginPath();
ctx.arc(400, 300, 50, 0, Math.PI * 2, false); // x, y, radius, startAngle, endAngle
ctx.fillStyle = '#FF0000'; // Red color
ctx.fill();
// Drawing a line
ctx.beginPath();
ctx.moveTo(600, 100); // Starting point
ctx.lineTo(750, 500); // Ending point
ctx.strokeStyle = '#0000FF'; // Blue color
ctx.lineWidth = 5; // Line thickness
ctx.stroke(); // Render the line
</script>
Explanation:
- We use
fillRect()to draw a solid green rectangle on the canvas. - The
arc()method is used to draw a red circle, where the parameters represent the center coordinates, radius, and angles to define the arc. - The
moveTo()andlineTo()functions allow us to draw a blue line between two points.
Step 3: Adding Animation
Let’s make things more interesting by adding animation to the shapes. For this, we’ll create a simple bouncing ball effect. We’ll modify the JavaScript part of our code:
html
<script>
let x = 100;
let y = 100;
let dx = 2; // Change in x (speed)
let dy = 2; // Change in y (speed)
const ballRadius = 20;
function drawBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
// Draw the ball
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2, false);
ctx.fillStyle = '#FF4500'; // Orange color
ctx.fill();
ctx.closePath();
// Bounce the ball off the walls
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
// Update ball position
x += dx;
y += dy;
requestAnimationFrame(drawBall); // Loop the animation
}
drawBall();
</script>
Explanation:
- We initialize
xandyto define the starting position of the ball, anddxanddycontrol its movement speed. - In the
drawBall()function, the canvas is cleared each time (clearRect()) to avoid drawing multiple frames on top of each other. - The ball's position is updated on each frame, and we check if the ball hits the canvas edges, making it bounce back.
- We use
requestAnimationFrame()to create a smooth loop that updates the ball's position frame by frame.
Step 4: Next Steps
Now that you know how to set up a canvas, draw shapes, and create animations, you're ready to take the next steps toward developing a full-fledged game.
Things to try:
Add Player Interaction:
- Use keyboard or mouse inputs to control the movement of the ball or add other game elements.
Create Your First Game Object:
- Try building game objects, like obstacles or platforms, that the player can interact with.
Game Loop:
- Understand how game loops work to ensure your game runs efficiently with smooth animations and interactions.
Conclusion:
In this tutorial, you’ve learned how to create and animate objects using the HTML5 <canvas> element. This is just the beginning, but it’s a crucial part of building browser-based games. Keep experimenting with different shapes, animations, and player interactions to develop your skills further. Stay tuned for the next tutorial, where we’ll dive into creating a basic game with collision detection and scoring!
Comments
Post a Comment