Please help me fix my error. I've spent an hour trying but I cannot seem to find it. Error is on line 65 and when I change canvas.width to an absolute value, error changes its line. I'm making a tennis game (those classic 1970 tennis games on in an arcade) but this has bogged me down. Even changing canvas.width to a variable canvasWidth = "800" and then using it by id then couldn't fix the problem.
The main thing the ball does is not reset or bounce from the wall, I digress, my error has caused the ball to no longer bounce from the wall (or the left paddle) and no longer reset, it just phases through like canvas.widht doesn't exist (maybe it not existing because there is no canvas.width to act as a border for the ball - even though a little over an hour ago I did not have this error)
<!DOCTYPE html>
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 4;
var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_HEIGHT = 100;
const PADDLE_WIDTH = 10;
function calculateMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top - root.scrollTop;
return {
x:mouseX,
y:mouseY
};
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 60;
setInterval( function(){
moveEverything();
drawEverything();
}, 1150/framesPerSecond );
canvas.addEventListener('mousemove',
function(evt){
var mousePos = calculateMousePos(evt);
paddle2Y = mousePos.y-(PADDLE_HEIGHT/2);
})
}
function ballReset() {
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function moveEverything() {
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
}
if(ballX < 0) {
if(ballY > paddle1Y &&
ballY < paddle1Y+PADDLE_HEIGHT){
ballSpeedX = -ballSpeedX;
} else {
ballReset()
}
}
if(ballX > canvas.width) {
if (ballY > paddle2Y &&
ballY < paddle2Y + PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
} else {
ballReset();
}
}
if(ballY < 0) {
ballSpeedY = -ballSpeedY;
}
if(ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
function drawEverything() {
colorRect(0, 0,canvas.width,canvas.height,'black');
colorRect(0,paddle1Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
colorRect(canvas.width - PADDLE_WIDTH,paddle2Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
colorCircle(ballX,ballY, 10,'white');
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
canvasContext.fill();
}
function colorRect( leftX, topY, width, height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX, topY, width, height);
}
</script>
</html>
question from:
https://stackoverflow.com/questions/65660974/uncaught-typeerror-cannot-read-property-width-of-undefined-inside-tennis-game 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
