Hey guys,
On this article I’ll present you the way I constructed a breakout recreation utilizing HTML canvas, CSS and Javascript. Utilizing a single ball, the participant should knock down as many bricks as attainable through the use of the partitions and/or the paddle under to hit the ball in opposition to the bricks and get rid of them.
On this recreation, you should have 3 lives, and you could hit the ball in opposition to the bricks and get rid of them. If you’re not capable of get rid of the bricks inside 3 lives, then your recreation is over.
Why did I wish to create this recreation ?
I wish to familiarise myself with utilizing HTML Canvas and the flexibleness of constructing a recreation with it.
Setup for the challenge
This recreation is greatest seen or performed on a desktop pc with the assistance of a mouse pointer.
Let’s begin coding !!!
The challenge construction consists of solely 3 recordsdata.
|__ fashion.css
|__ script.js
|__ index.html
Let’s start with this system.
A easy html file with canvas outlined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout Recreation</title>
<hyperlink rel="stylesheet" href="kinds.css">
</head>
<physique>
<canvas id="myCanvas" width="600" top="600"></canvas>
<script src="script.js"></script>
</physique>
</html>
A css file for the background and defining the colours.
* {
padding: 10;
margin: 10;
}
#myCanvas {
background: #eee;
show: block;
margin: 0 auto;
}
A Javascript file that defines every operation as a operate.
var canvas = doc.getElementById('myCanvas');
var ctx = canvas.getContext('second');
var x = canvas.width/2;
var y = canvas.top - 30;
var dx = 2;
var dy = -2;
var ballRadius = 25;
var paddleHeight = 10;
var paddleWidth = 100;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 8;
var brickWidth = 100;
var brickHeight = 10;
var brickPadding = 7;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var rating = 0;
var lives = 3;
var bricks = [];
for (c=0; c<brickColumnCount; c++) {
bricks[c] = [];
for (r=0; r<brickRowCount; r++) {
bricks[c][r] = {x: 0, y:0, standing: 1};
}
}
/*
doc.addEventListener("keydown", keyDownHandler);
doc.addEventListener("keyup", keyUpHandler);
*/
operate drawBricks() {
for(c=0; c<brickColumnCount; c++) {
for(r=0; r<brickRowCount; r++) {
if(bricks[c][r].standing == 1) {
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
operate keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37)
leftPressed = true;
}
}
operate keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
After defining the objects as capabilities lets name the draw based mostly strategies to carry out the person operations corresponding to drawing a ball, figuring out the collision between the ball and many others.
operate drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
operate drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.top-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "pink";
ctx.fill();
ctx.closePath();
}
operate collisionDetection() {
for(c=0; c<brickColumnCount; c++){
for(r=0; r<brickRowCount; r++){
var b = bricks[c][r];
if(b.standing == 1) {
if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
dy = -dy;
b.standing = 0;
rating++;
if(rating == brickRowCount*brickColumnCount) {
alert("YOU WIN, CONGRADULATIONS!");
doc.location.reload();
}
}
}
}
}
}
operate drawScore () {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Rating: "+rating, 8, 20);
}
operate drawLives() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Lives: "+lives, canvas.width-65, 20);
}
Now lets create a draw methodology which mixes the above capabilities collectively
operate draw() {
ctx.clearRect(0,0, canvas.width, canvas.top);
drawBricks()
drawBall();
drawPaddle();
drawScore();
drawLives();
collisionDetection();
if(y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.top-ballRadius) {
if(x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
lives--;
if(!lives) {
alert("GAME OVER!");
doc.location.reload();
} else {
x = canvas.width/2;
y = canvas.top-30;
dx = 2;
dy = -2;
paddleX = (canvas.width-paddleWidth)/2;
}
}
}
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
Now lets add the capabilities to outline the motion of the mouse lastly.
doc.addEventListener("mousemove", mouseMoveHandler);
operate mouseMoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
if(relativeX > 0+paddleWidth/2 && relativeX < canvas.width-paddleWidth/2) {
paddleX = relativeX - paddleWidth/2;
}
}
draw();
The draw methodology truly calls a set of capabilities, ranging from drawing the bricks to the assorted parts wanted for the breakout recreation.
Conclusion
I used to be capable of accomplish this by dividing the weather of the sport into small elements and designing all the recreation by combining elements of the code with performance to be set
You may attempt enjoying the sport right here and get the supply code right here. Be at liberty to contribute incase you may have any enhancements to be carried out ✌️
Thanks for studying ❤️
Be at liberty to subscribe to my publication.
Comply with me by way of Twitter, Instagram, or Github.
