I am new to canvas and Js so just trying to make a basic game. currently I am simply trying to draw a rect on the canvas that I can move around with arrow keys. I keep gettign this error and nothing seems to fix it
This is the basic JS code for the game it was once I added the code to draw and move the rect that this error was thrown up
//canvas//
const canvas = document.getElementsByClassName("canvas1");
const ctx = canvas.getContext("2d");
console.log(canvas)
//score bord//
score = document.getElementById("playerscore");
let currentScore = 0;
//game//
function startGame() {
const myInterval = setInterval(function () {
score.textContent = "Score: " + currentScore++;
}, 1000);
//player movment//
const player = {
x: 350,
y: 250,
speed: 3,
};
let left = false;
let right = false;
// let up = false;
// let down = false;
function move() {
if (left) {
player.x -= player.speed;
}
if (right) {
player.x += player.speed;
}
}
//test for key press//
document.onkeydown = function () {
if (e.keyCode == 37) left = true;
if (e.keyCode == 39) right = true;
};
document.onkeyup = function () {
if (e.keyCode == 37) left = false;
if (e.keyCode == 39) right = false;
};
function clearcanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function block(x,y)
// let x = 350
// let y = 250
ctx.filltyle = "red"
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(x+15,y+50)
ctx.lineTo(x-15,y-50)
ctx.fill()
setInterval(update, 10);
function update() {
clearcanvas();
block();
move();
}
}
//play button//
const startgame = document.getElementById("startgame");
startgame.addEventListener("click", function () {
startGame();
});
//game over//
function endGame() {
function myStopFuction() {
clearInterval(myInterval);
}
finalScore = currentScore;
console.log(finalScore);
ctx.font = "50px Courier New";
ctx.fillStyle = "bold";
ctx.textAlign = "center";
ctx.fillText("Game Over", 350, 250);
ctx.fillText("Score: " + finalScore, 350, 200);
}
const endgame = document.getElementById("endgame");
endgame.addEventListener("click", function () {
endGame();
});
Here is the HTML Site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Block Dodge</title>
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<h1>Block Dodge</h1>
<h4 id="playerscore">Score: 0</h4>
<button id="startgame">Start Game</button>
<button id="endgame">End Game</button>
<canvas id="canvas1" width="700" height="500"> </canvas>
</body>
<script src="script.js"></script>
</html>
