Created
August 6, 2024 23:55
-
-
Save careerfinder4you/bd660aa22fdd2e01d57d784b14d3a326 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| html> | |
| <head> | |
| <title>Kong Runner</title> | |
| <style> | |
| canvas { | |
| border: 1px solid black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="gameCanvas"></canvas> | |
| <script src="game.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Set up the canvas | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = 800; | |
| canvas.height = 200; | |
| // Game variables | |
| let gameLoop; | |
| let kong; | |
| let obstacles = []; | |
| let score = 0; | |
| let gameSpeed = 5; | |
| // Kong object | |
| class Kong { | |
| constructor() { | |
| this.x = 50; | |
| this.y = 150; | |
| this.width = 40; | |
| this.height = 50; | |
| this.jumping = false; | |
| this.jumpHeight = 100; | |
| } | |
| draw() { | |
| ctx.fillStyle = 'brown'; | |
| ctx.fillRect(this.x, this.y, this.width, this.height); | |
| } | |
| jump() { | |
| if (!this.jumping) { | |
| this.jumping = true; | |
| let jumpCounter = 0; | |
| const jumpInterval = setInterval(() => { | |
| if (jumpCounter < 15) { | |
| this.y -= 5; | |
| } else if (jumpCounter < 30) { | |
| this.y += 5; | |
| } else { | |
| this.jumping = false; | |
| clearInterval(jumpInterval); | |
| } | |
| jumpCounter++; | |
| }, 20); | |
| } | |
| } | |
| } | |
| // Obstacle object | |
| class Obstacle { | |
| constructor() { | |
| this.x = canvas.width; | |
| this.y = 150; | |
| this.width = 20; | |
| this.height = 50; | |
| } | |
| draw() { | |
| ctx.fillStyle = 'red'; | |
| ctx.fillRect(this.x, this.y, this.width, this.height); | |
| } | |
| update() { | |
| this.x -= gameSpeed; | |
| } | |
| } | |
| // Game functions | |
| function startGame() { | |
| kong = new Kong(); | |
| gameLoop = setInterval(updateGame, 20); | |
| } | |
| function updateGame() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw and update Kong | |
| kong.draw(); | |
| // Generate and update obstacles | |
| if (Math.random() < 0.02) { | |
| obstacles.push(new Obstacle()); | |
| } | |
| obstacles.forEach((obstacle, index) => { | |
| obstacle.draw(); | |
| obstacle.update(); | |
| // Check for collision | |
| if ( | |
| kong.x < obstacle.x + obstacle.width && | |
| kong.x + kong.width > obstacle.x && | |
| kong.y < obstacle.y + obstacle.height && | |
| kong.y + kong.height > obstacle.y | |
| ) { | |
| gameOver(); | |
| } | |
| // Remove off-screen obstacles | |
| if (obstacle.x + obstacle.width < 0) { | |
| obstacles.splice(index, 1); | |
| score++; | |
| } | |
| }); | |
| // Display score | |
| ctx.fillStyle = 'black'; | |
| ctx.font = '20px Arial'; | |
| ctx.fillText(`Score: ${score}`, 10, 30); | |
| // Increase game speed | |
| if (score % 100 === 0 && score !== 0) { | |
| gameSpeed += 0.5; | |
| } | |
| } | |
| function gameOver() { | |
| clearInterval(gameLoop); | |
| ctx.fillStyle = 'black'; | |
| ctx.font = '30px Arial'; | |
| ctx.fillText('Game Over!', canvas.width / 2 - 70, canvas.height / 2); | |
| ctx.fillText(`Final Score: ${score}`, canvas.width / 2 - 70, canvas.height / 2 + 40); | |
| } | |
| // Event listeners | |
| document.addEventListener('keydown', (event) => { | |
| if (event.code === 'Space') { | |
| kong.jump(); | |
| } | |
| }); | |
| // Start the game | |
| startGame(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment