Changed around line 1
+ const canvas = document.getElementById('gameCanvas');
+ const ctx = canvas.getContext('2d');
+
+ const player = {
+ x: canvas.width / 2,
+ y: canvas.height / 2,
+ size: 20,
+ speed: 5,
+ color: '#FF6347'
+ };
+
+ const keys = {
+ ArrowUp: false,
+ ArrowDown: false,
+ ArrowLeft: false,
+ ArrowRight: false,
+ Space: false
+ };
+
+ function drawPlayer() {
+ ctx.fillStyle = player.color;
+ ctx.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
+ }
+
+ function updatePlayer() {
+ if (keys.ArrowUp && player.y > player.size / 2) {
+ player.y -= player.speed;
+ }
+ if (keys.ArrowDown && player.y < canvas.height - player.size / 2) {
+ player.y += player.speed;
+ }
+ if (keys.ArrowLeft && player.x > player.size / 2) {
+ player.x -= player.speed;
+ }
+ if (keys.ArrowRight && player.x < canvas.width - player.size / 2) {
+ player.x += player.speed;
+ }
+ if (keys.Space && player.y === canvas.height - player.size / 2) {
+ player.y -= 50;
+ }
+ }
+
+ function gameLoop() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw ground
+ ctx.fillStyle = '#228B22';
+ ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
+
+ updatePlayer();
+ drawPlayer();
+
+ requestAnimationFrame(gameLoop);
+ }
+
+ window.addEventListener('keydown', (e) => {
+ if (keys.hasOwnProperty(e.key)) {
+ keys[e.key] = true;
+ }
+ });
+
+ window.addEventListener('keyup', (e) => {
+ if (keys.hasOwnProperty(e.key)) {
+ keys[e.key] = false;
+ }
+ });
+
+ gameLoop();