233用户524387460

233号：524387460

3关注

1粉丝

--获赞

TA什么都没有写

游戏档案

玩过游戏数量

23.1小时

总游戏时长

动态

233用户524387460

2025-11-15 15:17:29 · 发布在「第五人格庄园」

哪里是终点？

<!DOCTYPE html>

<html>

<head>

<title>哪里是终点 - 概念演示</title>

<style>

body { margin: 0; overflow: hidden; font-family: Arial; }

#container { position: relative; }

#ui {

position: absolute;

top: 10px;

left: 10px;

color: white;

background: rgba(0,0,0,0.5);

padding: 10px;

border-radius: 5px;

}

#message {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: red;

font-size: 24px;

background: rgba(0,0,0,0.8);

padding: 20px;

border-radius: 10px;

display: none;

}

</style>

</head>

<body>

</div>

</div>

// 核心变量

let camera, scene, renderer, controls;

let objects = [];

let keys = 0;

const totalKeys = 3;

let health = 100;

let isGameOver = false;

// 初始化场景

function init() {

scene = new THREE.Scene();

scene.background = new THREE.Color(0x000000);

scene.fog = new THREE.Fog(0x000000, 5, 15);

// 创建光源（有限的手电筒）

const flashlight = new THREE.SpotLight(0xffffff, 2);

flashlight.angle = 0.3;

flashlight.penumbra = 0.2;

flashlight.position.set(0, 0, 0);

scene.add(flashlight);

// 创建环境光（非常暗）

const ambientLight = new THREE.AmbientLight(0x111111);

scene.add(ambientLight);

// 创建相机

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(10, 2, 10);

// 创建渲染器

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById('container').appendChild(renderer.domElement);

// 创建迷宫墙壁

const mazeLayout = [

"XXXXXXXXXXXXXXXXXXXX",

"X X X",

"X XXX X X X XXX XX X",

"X X X X X X X X",

"X X XXX X XXX X XX X",

"X X X X X",

"X XXXXXXXXXXXXX XX X",

"X K X X X",

"X XXXXX X X XXX XX X",

"X X X X X X X",

"X XXX X X XXX X XX X",

"X X X X X X X",

"X X XXX XXXXXXX XX X",

"X X X X",

"X XXXXXXXXXXXXX XX X",

"X K X X",

"X XXXXX X XXXXXXXX X",

"X X X K X",

"X XXX X XXXXXXXXXX X",

"XXXXXXXXXXXXXXXXXXXX"

];

const geometry = new THREE.BoxGeometry(1, 2, 1);

const wallMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 });

for (let z = 0; z < mazeLayout.length; z++) {

for (let x = 0; x < mazeLayout[z].length; x++) {

if (mazeLayout[z][x] === 'X') {

const wall = new THREE.Mesh(geometry, wallMaterial);

wall.position.set(x - mazeLayout[z].length/2, 0, z - mazeLayout.length/2);

scene.add(wall);

objects.push(wall);

} else if (mazeLayout[z][x] === 'K') {

createKey(x - mazeLayout[z].length/2, z - mazeLayout.length/2);

}

// 创建地面

const groundGeometry = new THREE.PlaneGeometry(100, 100);

const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x222222 });

const ground = new THREE.Mesh(groundGeometry, groundMaterial);

ground.rotation.x = -Math.PI / 2;

scene.add(ground);

// 创建终点门

const doorGeometry = new THREE.BoxGeometry(2, 3, 0.2);

const doorMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });

const door = new THREE.Mesh(doorGeometry, doorMaterial);

door.position.set(0, 1.5, -mazeLayout.length/2 + 1);

door.userData = { isDoor: true };

scene.add(door);

objects.push(door);

// 创建移动的障碍物（简易怪物）

createMovingObstacle(0, 0);

createMovingObstacle(5, -5);

createMovingObstacle(-5, 5);

// 设置指针锁定控制

controls = new THREE.PointerLockControls(camera, document.body);

scene.add(controls.getObject());

// 事件监听

document.addEventListener('click', function() {

controls.lock();

});

document.addEventListener('keydown', onKeyDown);

// 开始动画循环

animate();

}

function createKey(x, z) {

const keyGeometry = new THREE.SphereGeometry(0.3);

const keyMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD700 });

const key = new THREE.Mesh(keyGeometry, keyMaterial);

key.position.set(x, 1, z);

key.userData = { isKey: true };

scene.add(key);

objects.push(key);

}

function createMovingObstacle(x, z) {

const obstacleGeometry = new THREE.ConeGeometry(0.5, 2, 8);

const obstacleMaterial = new THREE.MeshPhongMaterial({ color: 0xFF0000 });

const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);

obstacle.position.set(x, 1, z);

obstacle.userData = {

isObstacle: true,

speed: 0.02,

direction: 1

};

scene.add(obstacle);

objects.push(obstacle);

}

function onKeyDown(event) {

if (isGameOver) return;

const speed = 0.1;

const direction = new THREE.Vector3();

if (event.code === 'KeyW') direction.z -= speed;

if (event.code === 'KeyS') direction.z += speed;

if (event.code === 'KeyA') direction.x -= speed;

if (event.code === 'KeyD') direction.x += speed;

controls.moveRight(direction.x);

controls.moveForward(direction.z);

// 碰撞检测

checkCollisions();

}

function checkCollisions() {

const playerPosition = controls.getObject().position;

objects.forEach(object => {

const distance = playerPosition.distanceTo(object.position);

if (object.userData.isKey && distance < 1) {

// 收集钥匙

scene.remove(object);

objects = objects.filter(obj => obj !== object);

keys++;

document.getElementById('keyCount').textContent = keys;

} else if (object.userData.isDoor && distance < 2 && keys >= totalKeys) {

// 游戏胜利

showMessage("恭喜！你找到了终点！但这真的是终点吗？");

isGameOver = true;

} else if (object.userData.isObstacle && distance < 1.5) {

// 碰到障碍物

health -= 10;

document.getElementById('health').textContent = health;

if (health <= 0) {

showMessage("实验失败... 按F5重新开始");

isGameOver = true;

}

});

}

function showMessage(text) {

const messageEl = document.getElementById('message');

messageEl.textContent = text;

messageEl.style.display = 'block';

}

function animate() {

requestAnimationFrame(animate);

// 更新障碍物移动

objects.forEach(object => {

if (object.userData.isObstacle) {

object.position.x += object.userData.speed * object.userData.direction;

if (Math.abs(object.position.x) > 8) {

object.userData.direction *= -1;

}

});

// 更新手电筒位置

const flashlight = scene.children.find(child => child instanceof THREE.SpotLight);

if (flashlight) {

flashlight.position.copy(controls.getObject().position);

flashlight.rotation.copy(controls.getObject().rotation);

}

renderer.render(scene, camera);

}

// 处理窗口大小变化

window.addEventListener('resize', function() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

// 启动游戏

init();

</script>

</body></html>