动物园规则怪谈游戏
2026-04-04 12:05:49
发布于：上海
4阅读
0回复
0点赞
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动物园规则怪谈 | 手绘生存游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a0a;
color: #eae2d5;
font-family: 手写体, 宋体, serif;
padding: 15px;
line-height: 1.8;
}
.game-box {
max-width: 800px;
margin: 0 auto;
border: 3px solid #443b2f;
background: #12100e;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 30px #221a11;
}
/* 顶部SAN值UI */
.san-ui {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding: 10px;
border: 2px dashed #665544;
}
.san-text {
font-size: 18px;
color: #ffc996;
}
.san-bar {
flex: 1;
height: 25px;
background: #201810;
border: 2px solid #554433;
border-radius: 4px;
overflow: hidden;
}
.san-fill {
height: 100%;
width: 100%;
background: linear-gradient(#ff7755, #aa3322);
transition: all 0.5s ease;
}
/* 手绘画布区域 */
#drawCanvas {
width: 100%;
height: 280px;
background: #0e0c0a;
border: 2px solid #554433;
margin-bottom: 20px;
}
/* 剧情文本 */
.story-text {
font-size: 17px;
padding: 15px;
border: 1px solid #332a20;
margin-bottom: 20px;
min-height: 100px;
white-space: pre-line;
}
/* 按钮选择 */
.btn-group {
display: grid;
gap: 12px;
}
.game-btn {
padding: 12px;
background: #2b2218;
border: 2px solid #665544;
color: #eae2d5;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
transition: 0.3s;
}
.game-btn:hover {
background: #443322;
border-color: #ffc996;
}
/* 规则弹窗 */
.rule-btn {
margin-bottom: 15px;
padding: 8px 15px;
background: #3a2e20;
border: 1px solid #887766;
color: #ffddbb;
cursor: pointer;
}
.rule-pop {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #1a1510;
border: 3px solid #776655;
padding: 25px;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
z-index: 999;
}
.close-rule {
margin-top: 15px;
padding: 6px 12px;
background: #553322;
border: none;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="game-box">
<!-- SAN值UI -->
<div class="san-ui">
<span class="san-text">理智 SAN：</span>
<div class="san-bar">
<div class="san-fill" id="sanFill"></div>
</div>
<span class="san-text" id="sanNum">100</span>
</div>
<!-- 查看规则按钮 -->
<button class="rule-btn" onclick="showRule()">📜 查看动物园守则</button>
<!-- 手绘游戏画布 -->
<canvas id="drawCanvas"></canvas>
<!-- 剧情文字 -->
<div class="story-text" id="storyBox">
你误入深夜封闭的动物园，四周漆黑，风声诡异。
请牢记规则，保持理智，想办法活下去...
</div>
<!-- 选择按钮 -->
<div class="btn-group" id="btnBox">
<button class="game-btn" onclick="choose(1)">前往大象园区</button>
<button class="game-btn" onclick="choose(2)">前往兔子园区</button>
<button class="game-btn" onclick="choose(3)">留在原地翻看规则</button>
</div>
</div>
<!-- 规则弹窗 -->
<div class="rule-pop" id="rulePop">
<h3>🐘 动物园游客守则（手绘版）</h3>
<p>1. 兔子不会主动靠近游客，看见白兔盯着你，请立刻离开。</p>
<p>2. 大象园区看见白色大象，立刻闭眼3秒，不要直视。</p>
<p>3. 绝对不要捡起地上的兔子玩偶。</p>
<p>4. SAN值过低时，你会分不清动物和人。</p>
<p>5. 保安穿蓝色衣服，看见黑色衣服的人，远离！</p>
<p>6. 想逃生：坚守规则，不贪好奇，远离兔子。</p>
<button class="close-rule" onclick="hideRule()">关闭守则</button>
</div>
<script>
// 游戏全局变量
let san = 100;
let stage = 0;
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 更新SAN值UI
function updateSan() {
document.getElementById('sanNum').innerText = san;
document.getElementById('sanFill').style.width = san + '%';
// SAN低变色
if(san < 30) {
document.getElementById('sanFill').style.background = '#881111';
} else if(san < 60) {
document.getElementById('sanFill').style.background = '#bb4422';
}
}
// 手绘绘制：场景+人物+诡异元素
function drawScene(type) {
ctx.clearRect(0,0,canvas.width,canvas.height);
// 底色暗背景
ctx.fillStyle = '#0a0806';
ctx.fillRect(0,0,canvas.width,canvas.height);
// 手绘线条风格
ctx.lineWidth = 2;
ctx.strokeStyle = '#554433';
// 通用：绘制玩家小人（手绘）
ctx.fillStyle = '#d8c8b8';
// 头
ctx.beginPath();
ctx.arc(canvas.width/2, 120, 25, 0, Math.PI*2);
ctx.fill();
ctx.stroke();
// 身体
ctx.fillRect(canvas.width/2 -15, 145, 30, 50);
ctx.strokeRect(canvas.width/2 -15, 145, 30, 50);
switch(type){
case 0: // 初始场景
drawText("漆黑动物园入口", 30);
// 远处模糊树影
ctx.strokeStyle='#332a20';
drawTree(80,100);
drawTree(canvas.width-80,100);
break;
case 1: // 大象区
drawText("大象园区——隐约有白色影子", 30);
// 手绘大象轮廓
ctx.strokeStyle='#776655';
ctx.beginPath();
ctx.ellipse(200,180,60,40,0,0,Math.PI*2);
ctx.stroke();
// 诡异白象虚影
ctx.globalAlpha=0.3;
ctx.fillStyle='#eeeeee';
ctx.ellipse(350,160,50,35,0,0,Math.PI*2);
ctx.fill();
ctx.globalAlpha=1;
break;
case 2: // 兔子区
drawText("兔子园区——红眼白兔在看你", 30);
// 手绘白兔
ctx.fillStyle='#f0f0f0';
drawRabbit(180,200);
drawRabbit(420,190);
// 红眼
ctx.fillStyle='#ff2222';
ctx.beginPath();
ctx.arc(170,185,4,0,Math.PI*2);
ctx.arc(190,185,4,0,Math.PI*2);
ctx.fill();
break;
case 3: // 安全看书
drawText("你蹲在路边翻看规则，暂时安全", 30);
// 手绘书本
ctx.fillStyle='#998877';
ctx.fillRect(canvas.width/2-40,220,80,50);
ctx.strokeRect(canvas.width/2-40,220,80,50);
break;
case 4: // 结局崩溃
drawText("SAN归零——你分不清人和动物了...", 25);
ctx.fillStyle='#991111';
ctx.fillText("被园区同化", canvas.width/2-60,80);
break;
case 5: // 结局逃生
drawText("你遵守规则，找到出口成功逃离！",25);
ctx.fillStyle='#22aa55';
ctx.fillText("完美结局·活下去", canvas.width/2-70,80);
break;
}
}
// 辅助手绘：树
function drawTree(x,y){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y+80);
ctx.stroke();
ctx.arc(x,y,30,0,Math.PI*2);
ctx.stroke();
}
// 辅助手绘：兔子
function drawRabbit(x,y){
ctx.beginPath();
ctx.ellipse(x,y,20,25,0,0,Math.PI*2);
ctx.fill();
// 耳朵
ctx.moveTo(x-8,y-20);ctx.lineTo(x-12,y-50);ctx.stroke();
ctx.moveTo(x+8,y-20);ctx.lineTo(x+12,y-50);ctx.stroke();
}
// 画布写字
function drawText(str,size){
ctx.font = `${size}px 手写体`;
ctx.fillStyle='#ffddbb';
ctx.textAlign='center';
ctx.fillText(str, canvas.width/2, 40);
}
// 规则弹窗
function showRule(){document.getElementById('rulePop').style.display='block';}
function hideRule(){document.getElementById('rulePop').style.display='none';}
// 选择分支逻辑
function choose(num){
const story = document.getElementById('storyBox');
const btn = document.getElementById('btnBox');
stage++;
if(num===1){
// 大象区
drawScene(1);
san -= 15;
story.innerText = "你来到大象园区，看见一头诡异的白色大象。\n守则说不能直视白象！";
btn.innerHTML = `
<button class="game-btn" onclick="choose(11)">闭眼遵守规则</button>
<button class="game-btn" onclick="choose(12)">盯着白象看</button>
`;
}else if(num===2){
// 兔子区
drawScene(2);
san -= 25;
story.innerText = "兔子园区的白兔盯着你的眼睛，红光刺眼。\n千万不要靠近兔子！";
btn.innerHTML = `
<button class="game-btn" onclick="choose(21)">立刻逃跑离开</button>
<button class="game-btn" onclick="choose(22)">伸手逗兔子</button>
`;
}else if(num===3){
// 看规则回血
drawScene(3);
san += 10;
if(san>100) san=100;
story.innerText = "你仔细熟读守则，冷静下来。\n理智小幅恢复，准备重新选择方向。";
btn.innerHTML = `
<button class="game-btn" onclick="choose(1)">去大象区</button>
<button class="game-btn" onclick="choose(2)">去兔子区</button>
`;
}
// 大象区分支
if(num===11){
san += 20;
drawScene(5);
story.innerText = "你严格遵守规则闭眼3秒，白象消失。\n你找到园区后门，成功逃生！【完美结局】";
btn.innerHTML = `<button class="game-btn" onclick="restart()">重新开始</button>`;
}
if(num===12){
san -= 40;
story.innerText = "你直视白象，大脑开始混乱...";
}
// 兔子区分支
if(num===21){
san += 15;
drawScene(5);
story.innerText = "你果断逃离兔子区，避开污染，找到出口逃生！";
btn.innerHTML = `<button class="game-btn" onclick="restart()">重新开始</button>`;
}
if(num===22){
san -= 50;
story.innerText = "你触碰了兔子，诡异感吞噬你的理智...";
}
// SAN值判定死亡
if(san <= 0){
san = 0;
drawScene(4);
story.innerText = "你的理智彻底归零，永远留在了诡异动物园...【坏结局】";
btn.innerHTML = `<button class="game-btn" onclick="restart()">重新开始</button>`;
}
updateSan();
}
// 重新开局
function restart(){
san = 100;
stage = 0;
updateSan();
drawScene(0);
document.getElementById('storyBox').innerText = "你误入深夜封闭的动物园，四周漆黑，风声诡异。\n请牢记规则，保持理智，想办法活下去...";
document.getElementById('btnBox').innerHTML = `
<button class="game-btn" onclick="choose(1)">前往大象园区</button>
<button class="game-btn" onclick="choose(2)">前往兔子园区</button>
<button class="game-btn" onclick="choose(3)">留在原地翻看规则</button>
`;
}
// 初始化游戏
window.onload = function(){
drawScene(0);
updateSan();
// 适配画布大小
window.addEventListener('resize',()=>{
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
drawScene(0);
});
}
</script>
</body>
</html>
这里空空如也
有帮助，赞一个