6666

<<shijunyu>>  •  12小时前


<div class="game-info">
    分数: <span id="score">0</span>
</div>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<div class="game-controls">
    <button id="jumpBtn">跳跃 (空格/点击)</button>
    <button id="restartBtn">重新开始</button>
</div>

<script>
    // 获取画布和上下文
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreElement = document.getElementById('score');
    const jumpBtn = document.getElementById('jumpBtn');
    const restartBtn = document.getElementById('restartBtn');

    // 游戏参数
    let score = 0;
    let gameOver = false;
    let gameSpeed = 5; // 游戏速度

    // 熊大角色
    const bear = {
        x: 100,          // 横坐标
        y: canvas.height - 100, // 纵坐标
        width: 80,       // 宽度
        height: 80,      // 高度
        velocityY: 0,    // 垂直速度
        gravity: 0.6,    // 重力
        jumpPower: -15,  // 跳跃力度
        isJumping: false // 是否在跳跃
    };

    // 障碍物数组
    let obstacles = [];
    let obstacleSpawnTimer = 0;
    const obstacleSpawnRate = 120; // 生成障碍物的间隔

    // 绘制熊大
    function drawBear() {
        ctx.fillStyle = '#8B4513'; // 熊大的棕色
        // 绘制熊大的身体
        ctx.fillRect(bear.x, bear.y, bear.width, bear.height);
        // 绘制熊大的脸
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(bear.x + 20, bear.y + 20, 15, 10); // 左眼
        ctx.fillRect(bear.x + 45, bear.y + 20, 15, 10); // 右眼
        ctx.fillStyle = '#000000';
        ctx.fillRect(bear.x + 25, bear.y + 22, 5, 5);  // 左眼球
        ctx.fillRect(bear.x + 50, bear.y + 22, 5, 5);  // 右眼球
        // 绘制鼻子
        ctx.fillStyle = '#FF6347';
        ctx.fillRect(bear.x + 35, bear.y + 40, 10, 8);
    }

    // 绘制障碍物(石头)
    function drawObstacles() {
        obstacles.forEach(obstacle => {
            ctx.fillStyle = '#696969'; // 石头灰色
            ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        });
    }

    // 更新熊大状态
    function updateBear() {
        // 应用重力
        bear.velocityY += bear.gravity;
        bear.y += bear.velocityY;

        // 防止熊大掉出画布底部
        if (bear.y > canvas.height - bear.height) {
            bear.y = canvas.height - bear.height;
            bear.velocityY = 0;
            bear.isJumping = false;
        }
    }

    // 更新障碍物
    function updateObstacles() {
        // 移动障碍物
        obstacles.forEach((obstacle, index) => {
            obstacle.x -= gameSpeed;
            
            // 移除超出画布的障碍物
            if (obstacle.x + obstacle.width < 0) {
                obstacles.splice(index, 1);
                // 每躲过一个障碍物加分
                score += 10;
                scoreElement.textContent = score;
                // 随着分数增加提高游戏速度
                if (score % 50 === 0) {
                    gameSpeed += 0.5;
                }
            }
        });

        // 生成新的障碍物
        obstacleSpawnTimer++;
        if (obstacleSpawnTimer >= obstacleSpawnRate && !gameOver) {
            obstacles.push({
                x: canvas.width,
                y: canvas.height - 80,
                width: 50 + Math.random() * 30, // 随机宽度 50-80
                height: 50 + Math.random() * 30  // 随机高度 50-80
            });
            obstacleSpawnTimer = 0;
            // 随机调整生成间隔,增加游戏难度
            obstacleSpawnRate = 100 + Math.random() * 50;
        }
    }

    // 碰撞检测
    function checkCollision() {
        for (let obstacle of obstacles) {
            if (
                bear.x < obstacle.x + obstacle.width &&
                bear.x + bear.width > obstacle.x &&
                bear.y < obstacle.y + obstacle.height &&
                bear.y + bear.height > obstacle.y
            ) {
                gameOver = true;
                alert(`游戏结束!你的分数是: ${score}`);
            }
        }
    }

    // 跳跃函数
    function jump() {
        if (!bear.isJumping && !gameOver) {
            bear.velocityY = bear.jumpPower;
            bear.isJumping = true;
        }
    }

    // 重置游戏
    function restartGame() {
        score = 0;
        gameOver = false;
        gameSpeed = 5;
        scoreElement.textContent = score;
        obstacles = [];
        obstacleSpawnTimer = 0;
        bear.y = canvas.height - bear.height;
        bear.velocityY = 0;
        bear.isJumping = false;
    }

    // 游戏主循环
    function gameLoop() {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if (!gameOver) {
            updateBear();
            updateObstacles();
            checkCollision();
        }
        
        drawBear();
        drawObstacles();
        
        requestAnimationFrame(gameLoop);
    }

    // 事件监听
    jumpBtn.addEventListener('click', jump);
    restartBtn.addEventListener('click', restartGame);
    // 空格键跳跃
    document.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            jump();
        }
    });
    // 点击画布跳跃
    canvas.addEventListener('click', jump);

    // 启动游戏
    gameLoop();
</script>


评论:

请先登录,才能进行评论