Call a JS on body of a code

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 ?

Hi strack147 welcome to the forum

The first step would be the W3C validator

Once you know the HTML has no errors that might be causing problems with the JavaScript the next step would be to open the file in your browser and look in its dev tools console for error message.

Do you see any there?

yes on both of scripts

-----> <script src="game.js" type="text/javascript"></script> <-----
-----> <script src="lib.js" type="text/javascript"></script> <-----

You didn’t say how many error messages were there. Sometimes one error causes other errors, so I guess a good a place to start is with the first. What does it say and what file is it in?

I don’t know how to use validator … Console of chrome give me this error

lib.js:5 Uncaught TypeError: Cannot read property 'width' of undefined
    at lib.js:5

As Mitteneague said, just paste the HTML you have into the ‘Validate by Direct Input’ tab here https://validator.w3.org

It says that both lines have an error but I also have 2 js files

-----> <script src="game.js" type="text/javascript"></script> <-----
-----> <script src="lib.js" type="text/javascript"></script> <-----

All it’s telling you is that you can remove the type attribute on both lines.

The error message points to line # 5 of the lib.js file.
The code wants to get the “width” property of something that is not defined.

var
	canvas,
	ctx,
	ballRadius = 10,
	x = canvas.width / 2,
	y = canvas.height - 30,

See how most of the variables are like
variable_name equals something

Both canvas and ctx are declared as variables, but they have not had anything assigned to them.

The dot notation of “canvas.width” and “canvas.height” suggest that canvas should be an object. It might need to be something like a “= new Canvas()” or maybe simply an empty object that the properties can be added to.

I found the correct link for the OP’s post, it’s https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

At the game section about Canvas basics they give this code for setting up the canvas and the ctx

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
1 Like

I have it on windows.onload function

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.