

开发 3D 版《狼来了》小游戏

码途钥匙

2025-08-27

· 点击蓝字，关注我们

效果图

一、HTML

用基础标签构建游戏框架，核心是承载 3D 场景的容器与交互入口：

用<div>创建游戏主容器、游戏结束提示、距离显示等 UI 区域，明确功能分区；

引入 Three.js（3D 渲染）、GSAP（动画）等外部库，为 3D 效果和流畅动画打基础；

预留画布容器，后续通过 JS 渲染 3D 场景，同时绑定鼠标 / 触屏点击事件，实现跳跃等核心操作。

二、CSS

CSS 聚焦样式美化与用户体验，让游戏更具沉浸感：

场景样式：设置游戏主容器全屏显示，背景色模拟草地质感，配合overflow: hidden避免场景溢出；

UI 设计：统一使用 “Voltaire” 字体，通过颜色区分功能（如距离数值用红色突出，操作提示用绿色辅助），游戏结束文字添加渐变动画，增强视觉冲击；

交互优化：禁用文本选中、触摸高亮，防止操作时出现干扰元素，确保鼠标和触屏操作流畅。

三、JS

JS 是游戏的 “大脑”，依托 Three.js 实现完整玩法：

3D 场景搭建：创建 3D 场景、相机和灯光，生成地面（球形草地）、树木等环境元素，构建开放的游戏世界；

角色与道具：设计狼（追逐者）、小羊（玩家）、胡萝卜（加分）、刺猬（障碍）等 3D 模型，通过骨骼动画实现跑步、跳跃、点头等生动动作；

玩法逻辑：监听点击事件触发小羊跳跃，实时计算角色位置判断碰撞（捡胡萝卜加分、碰刺猬减益），狼随时间逼近，玩家被追上则游戏结束，支持重新开始。

四、代码

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>狼来了</title>    <link      rel="stylesheet"      href="https://public.codepenassets.com/css/reset-2.0.min.css"    />    <style>      @import url("https://fonts.googleapis.com/css?family=Voltaire");      #world {        position: absolute;        width: 100%;        height: 100%;        background-color: #dbe6e6;        overflow: hidden;      }      #gameoverInstructions {        position: absolute;        font-family: "Voltaire", sans-serif;        font-weight: bold;        text-transform: uppercase;        font-size: 120px;        text-align: center;        color: #ffc5a2;        opacity: 0;        left: 50%;        top: 50%;        width: 100%;        transform: translate(-50%, -100%);        -webkit-user-select: none;        -moz-user-select: none;        -ms-user-select: none;        user-select: none;        transition: all 500ms ease-in-out;      }      #gameoverInstructions.show {        opacity: 1;        transform: translate(-50%, -50%);        transition: all 500ms ease-in-out;      }      #dist {        position: absolute;        left: 50%;        top: 50px;        transform: translate(-50%, 0%);        -webkit-user-select: none;        -moz-user-select: none;        -ms-user-select: none;        user-select: none;      }      .label {        position: relative;        font-family: "Voltaire", sans-serif;        text-transform: uppercase;        color: #ffa873;        font-size: 12px;        letter-spacing: 2px;        text-align: center;        margin-bottom: 5px;      }      #distValue {        position: relative;        text-transform: uppercase;        color: #dc5f45;        font-size: 40px;        font-family: "Voltaire";        text-align: center;      }      #credits {        position: absolute;        width: 100%;        margin: auto;        bottom: 0;        margin-bottom: 20px;        font-family: "Voltaire", sans-serif;        color: #544027;        font-size: 12px;        letter-spacing: 0.5px;        text-transform: uppercase;        text-align: center;        -webkit-user-select: none;        -moz-user-select: none;        -ms-user-select: none;        user-select: none;      }      #credits a {        color: #544027;      }      #credits a:hover {        color: #dc5f45;      }      #instructions {        position: absolute;        width: 100%;        bottom: 0;        margin: auto;        margin-bottom: 50px;        font-family: "Voltaire", sans-serif;        color: #dc5f45;        font-size: 16px;        letter-spacing: 1px;        text-transform: uppercase;        text-align: center;        -webkit-user-select: none;        -moz-user-select: none;        -ms-user-select: none;        user-select: none;      }      .lightInstructions {        color: #5f9042;      }    </style>  </head>  <body>    <div id="world" />    <div id="gameoverInstructions">游戏结束</div>    <div id="dist">      <div class="label">距离</div>      <div id="distValue">000</div>    </div>    <div id="instructions">      点击跳跃<span class="lightInstructions"> — 捡起胡萝卜 / 避开刺猬</span>    </div>