js+css实现2.5D飞檐走壁游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现2.5D飞檐走壁游戏代码，操作方式 | 按键 | 动作 | |------|------| | A/D 或 ←/→ | 左右移动 | | W/↑/空格 | 跳跃（支持二段跳） | | S/↓ | 蹲伏 / 空中快速下落 | | Shift | 冲刺（有冷却时间） | ###

代码标签： js css 2.5D 飞檐走壁游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞檐走壁 - 2.5D Parkour</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background: #0a0a1a; 
    overflow: hidden; 
    font-family: 'Microsoft YaHei', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
canvas { 
    display: block; 
    border: 2px solid #333;
    image-rendering: pixelated;
}
#ui-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}
#start-screen, #death-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.85);
    z-index: 20;
    pointer-events: all;
}
#start-screen h1 {
    font-size: 60px;
    color: #00ffcc;
    text-shadow: 0 0 30px #00ffcc, 0 0 60px #00ffcc;
    margin-bottom: 20px;
    letter-spacing: 10px;
}
#start-screen h2 {
    font-size: 20px;
    color: #ff6644;
    margin-bottom: 40px;
}
.btn {
    padding: 15px 50px;
    font-size: 22px;
    background: linear-gradient(135deg, #00ffcc, #0088ff);
    border: none;
    color: #000;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    margin: 10px;
    transition: all 0.3s;
    pointer-events: all;
}
.btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #00ffcc;
}
.controls-info {
    color: #888;
    margin-top: 30px;
    text-align: center;
    line-height: 2;
    font-size: 14px;
}
.controls-info span {
    color: #00ffcc;
    background: #222;
    padding: 2px 8px;
    border-radius: 3px;
    margin: 0 3px;
}
#death-screen h1 {
    font-size: 50px;
    color: #ff4444;
    text-shadow: 0 0 30px #ff4444;
    margin-bottom: 20px;
}
#death-screen p {
    color: #ccc;
    font-size: 24px;
    margin-bottom: 30px;
}
.hidden { display: none !important; }
</style>
</head>
<body>

<canvas id="game"></canvas>

<div id="start-screen">
    <h1>飞 檐 走 壁</h1>
    <h2>2.5D PARKOUR</h2>
    <button class="btn" onclick="startGame()">开 始 游 戏</button>
    <div class="controls-info">
        <span>A/D</span> 或 <span>←/→</span> 移动 &nbsp;&nbsp;
        <span>W</span> 或 <span>↑</span> 或 <span>空格</span> 跳跃<br>
        <span>S</span> 或 <span>↓</span> 下蹲/快速下落<br>
        <span>Shift</span> 冲刺 &nbsp;&nbsp;
        <span>靠墙+跳跃</span> 蹬墙跳<br>
        <span>空中靠墙</span> 滑墙减速 &nbsp;&nbsp;
        <span>连续蹬墙</span> 飞檐走壁
    </div>
</div>

<div id="death-screen" class="hidden">
    <h1>坠 落</h1>
    <p>得分: <span id="final-score">0</span></p>
    <button class="btn" onclick="restartGame()">重新开始</button>
</div>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

// Canvas size
const W = 1000;
const H = 650;
canvas.width = W;
canvas.height = H;

// Game state
let gameState = 'menu'; // menu, playing, dead
let score = 0;
let highScore = 0;
let combo = 0;
let comboTimer = 0;
let screenShake = 0;
let slowMotion = 1;
let slowMotionTimer = 0;

// Camera
let camera = { x: 0, y: 0, targetX: 0, targetY: 0 };

// Parallax layers
let parallaxOffset = 0;

// Keys
const keys = {};
window.addEventListener('keydown', e => { keys[e.code] = true; e.preventDefault(); });
window.addEventListener('keyup', e => { keys[e.code] = false; e.preventDefault(); });

// Player
let player;
const GRAVITY = 0.6;
const JUMP_FORCE = -13;
const WALL_JUMP_X = 9;
const WALL_JUMP_Y = -12;
const WALL_SLIDE_SPEED = 2;
const MOVE_SPEED = 5;
const DASH_SPEED = 18;
const DASH_DURATION = 12;
const MAX_JUMPS = 2;

function createPlayer() {
    return {
        x: 200, y: 300,
        vx: 0, vy: 0,
        w: 24, h: 40,
        onGround: false,
        onWall: 0, // -1 left, 0 none, 1 right
        wallSliding: false,
        jumps: MAX_JUMPS,
        facing: 1,
        dashing: false,
        dashTimer: 0,
        dashCooldown: 0,
        crouching: false,
        // Animation
        animFrame: 0,
        animTimer: 0,
        state: 'idle', // idle, run, jump, fall, wallslide, dash, crouch
        trail: [],
        // Wall run
        wallRunTimer: 0,
        wallRunning: fal.........完整代码请登录后点击上方下载按钮下载查看