My teacher asked me to do this
Study the game at https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
Follow the steps and build it.
Once you build as the website describes, organize the code into the functions running from an external file (lib.js) that will be declared in the HEAD of HTML.
In HTML you will leave the minimum code required for the game flow. Create external functions.
draw
bricks
collisionDetection
drawBall
drawPaddle
drawBricks
drawScore
drawLives
The functions you create will take as input parameter all the necessary elements such as canvas, frame, position,
The code that is not included in the above functions will be left in a game.js and will be called to the body or will go directly to the HTML.
Whoever I asked they told me that this is a bad technique, but that’s what he asked.
I created these two js
This one called in
function drawBall(canvas,ctx) {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle(canvas,ctx,paddleWidth, paddleHeight) {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks(canvas,ctx,bricks) {
for (c = 0; c < brickColumnCount; c++) {
for (r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
var brickY = (c * (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();
}
}
}
}
function drawScore(canvas,ctx,score) {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);
}
function drawLives(canvas,ctx,lives) {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}
function draw(canvas,ctx,ballRadius,paddleX,paddleWidth) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
drawLives();
collisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
lives--;
if (!lives) {
alert("GAME OVER");
document.location.reload();
} else {
x = canvas.width / 2;
y = canvas.height - 30;
dx = 3;
dy = -3;
paddleX = (canvas.width - paddleWidth) / 2;
}
}
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
and this on
var
canvas,
ctx,
ballRadius = 10,
x = canvas.width / 2,
y = canvas.height - 30,
dx = 2,
dy = -2,
paddleHeight = 10,
paddleWidth = 75,
paddleX,
rightPressed = false,
leftPressed = false,
brickRowCount = 5,
brickColumnCount = 3,
brickWidth = 75,
brickHeight = 20,
brickPadding = 10,
brickOffsetTop = 30,
brickOffsetLeft = 30,
score = 0,
lives = 3,
bricks = [];
for (c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (r = 0; r < brickRowCount; r++) {
bricks[c][r] = {
x: 0,
y: 0,
status: 1
};
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
} else if (e.keyCode == 37) {
leftPressed = false;
}
}
function mouseMoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth / 2;
}
}
function collisionDetection() {
for (c = 0; c < brickColumnCount; c++) {
for (r = 0; r < brickRowCount; r++) {
var b = bricks[c][r];
if (b.status == 1) {
if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
dy = -dy;
b.status = 0;
score++;
if (score == brickRowCount * brickColumnCount) {
alert("YOU WIN, CONGRATS!");
document.location.reload();
}
}
}
}
}
}
window.addEventListener('load', function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
paddleX = (canvas.width - paddleWidth) / 2,
draw();
}, false);
this is my index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gamedev Canvas Workshop - lesson 10: finishing up</title>
<link href="page.css" rel="stylesheet" type="text/css">
<script src="game.js" type="text/javascript"></script>
</head>
<body>
<canvas height="320" id="myCanvas" width="480"></canvas>
<script src="lib.js" type="text/javascript"></script>
</body>
</html>
It doesnt work. What I should do ?