Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Future Stick Game</title>
                <style>
                        body, html { margin: 0; padding: 0; height: 100%; }
                                canvas { display: block; margin: 0 auto; background-color: #f4f4f4; }
                                    </style>
                                    </head>
                                    <body>
                                        <canvas id="gameCanvas"></canvas>

                                            <script src="game.js"></script>
                                            </body>
                                            </html>
                                            const canvas = document.getElementById('gameCanvas');
                                            const ctx = canvas.getContext('2d');

                                            // Canvas size
                                            canvas.width = 800;
                                            canvas.height = 600;

                                            // Variables for game elements
                                            let player, obstacles = [], score = 0;
                                            let isGameOver = false;

                                            // Player object
                                            class Player {
                                                constructor() {
                                                        this.width = 50;
                                                                this.height = 50;
                                                                        this.x = 100;
                                                                                this.y = canvas.height - this.height - 30;
                                                                                        this.speed = 5;
                                                                                                this.dy = 0;
                                                                                                        this.jumpHeight = -15;
                                                                                                            }

                                                                                                                update() {
                                                                                                                        this.y += this.dy;
                                                                                                                                if (this.y < canvas.height - this.height - 30) {
                                                                                                                                            this.dy += 1; // gravity effect
                                                                                                                                                    } else {
                                                                                                                                                                this.y = canvas.height - this.height - 30; // reset to ground
                                                                                                                                                                            this.dy = 0;
                                                                                                                                                                                    }

                                                                                                                                                                                            this.draw();
                                                                                                                                                                                                }

                                                                                                                                                                                                    draw() {
                                                                                                                                                                                                            ctx.fillStyle = 'blue';
                                                                                                                                                                                                                    ctx.fillRect(this.x, this.y, this.width, this.height);
                                                                                                                                                                                                                        }

                                                                                                                                                                                                                            jump() {
                                                                                                                                                                                                                                    if (this.y === canvas.height - this.height - 30) {
                                                                                                                                                                                                                                                this.dy = this.jumpHeight;
                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                            // Obstacle object
                                                                                                                                                                                                                                                            class Obstacle {
                                                                                                                                                                                                                                                                constructor() {
                                                                                                                                                                                                                                                                        this.width = 50;
                                                                                                                                                                                                                                                                                this.height = 50;
                                                                                                                                                                                                                                                                                        this.x = canvas.width;
                                                                                                                                                                                                                                                                                                this.y = canvas.height - this.height - 30;
                                                                                                                                                                                                                                                                                                        this.speed = 4;
                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                update() {
                                                                                                                                                                                                                                                                                                                        this.x -= this.speed;
                                                                                                                                                                                                                                                                                                                                if (this.x < 0) {
                                                                                                                                                                                                                                                                                                                                            this.x = canvas.width;
                                                                                                                                                                                                                                                                                                                                                        this.height = Math.random() * 50 + 50; // random height for variety
                                                                                                                                                                                                                                                                                                                                                                    score++;
                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                                    this.draw();
                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                            draw() {
                                                                                                                                                                                                                                                                                                                                                                                                    ctx.fillStyle = 'red';
                                                                                                                                                                                                                                                                                                                                                                                                            ctx.fillRect(this.x, this.y, this.width, this.height);
                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                                                // Initialize player
                                                                                                                                                                                                                                                                                                                                                                                                                player = new Player();

                                                                                                                                                                                                                                                                                                                                                                                                                // Handle user input for jumping
                                                                                                                                                                                                                                                                                                                                                                                                                document.addEventListener('keydown', (e) => {
                                                                                                                                                                                                                                                                                                                                                                                                                    if (e.code === 'Space' && !isGameOver) {
                                                                                                                                                                                                                                                                                                                                                                                                                            player.jump();
                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                });

                                                                                                                                                                                                                                                                                                                                                                                                                                // Game loop
                                                                                                                                                                                                                                                                                                                                                                                                                                function gameLoop() {
                                                                                                                                                                                                                                                                                                                                                                                                                                    if (isGameOver) return;

                                                                                                                                                                                                                                                                                                                                                                                                                                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                // Update and draw player
                                                                                                                                                                                                                                                                                                                                                                                                                                                    player.update();
                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                            // Generate obstacles
                                                                                                                                                                                                                                                                                                                                                                                                                                                                if (Math.random() < 0.02) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        obstacles.push(new Obstacle());
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                // Update obstacles
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    obstacles.forEach((obstacle, index) => {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            obstacle.update();

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    // Collision detection
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            if (player.x < obstacle.x + obstacle.width &&
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        player.x + player.width > obstacle.x &&
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    player.y < obstacle.y + obstacle.height &&
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                player.y + player.height > obstacle.y) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            isGameOver = true;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            // Remove off-screen obstacles
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    if (obstacle.x + obstacle.width < 0) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                obstacles.splice(index, 1);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            });

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                // Display score
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ctx.font = '20px Arial';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ctx.fillStyle = 'black';
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ctx.fillText('Score: ' + score, 10, 30);

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                requestAnimationFrame(gameLoop);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                // Start the game loop
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                gameLoop();
Editor is loading...