js自由闯关源码

// HTML结构
/*
<div id="gameArea">
    <div id="player"></div>
    <div class="platform"></div>
    <!-- 其他平台和障碍物 -->
</div>
*/

// CSS样式
#gameArea {
    width: 800px;
    height: 600px;
    position: relative;
    overflow: hidden;
}
#player {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.platform {
    width: 200px;
    height: 20px;
    background-color: green;
    position: absolute;
}

// JavaScript逻辑
const player = document.getElementById('player');
let playerPosition = 0;
let gravity = 1;
let jumpStrength = -15;
let velocity = 0;

document.addEventListener('keydown', (e) => {
    if (e.code === 'Space' && velocity === 0) {
        velocity = jumpStrength;
    }
});

function update() {
    velocity += gravity;
    playerPosition += velocity;
    player.style.bottom = playerPosition + 'px';

    // 碰撞检测
    const platforms = document.querySelectorAll('.platform');
    platforms.forEach(platform => {
        if (playerPosition + 50 >= platform.offsetTop && playerPosition <= platform.offsetTop + 20) {
            if (velocity > 0) {
                velocity = 0;
                playerPosition = platform.offsetTop - 50;
            }
        }
    });

    requestAnimationFrame(update);
}

update();