一个你永远赢不了的游戏
看似稳赚的游戏，实则必输的套路
以下是HTML代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>大富翁</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
body{background:#f5f7fa;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:15px 0;}
.board-box{
position:relative;
width:94vw;
max-width:500px;
height:calc(94vw * 11 / 16);
max-height:340px;
background:#ffffff;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.12);
overflow:hidden;
}
.cell{
position:absolute;
background:#5D9CEC;
color:#fff;
border-radius:10px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
transition:all .2s ease;
user-select:none;
box-shadow:0 3px 6px rgba(0,0,0,.1);
font-weight:bold;
text-align:center;
padding:4px 2px;
min-width:32px;
min-height:38px;
}
.cell.active{
background:#FF7675;
transform:scale(1.15);
box-shadow:0 8px 20px rgba(255,118,117,.45);
z-index:10;
}
.cell .num{
font-size:calc(2.8vw + 4px);
margin-bottom:1px;
line-height:1.2;
}
.cell .en{
font-size:calc(1.2vw + 2px);
opacity:.95;
line-height:1.1;
word-break:break-all;
width:90%;
}
.ctrl-box{
margin-top:18px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
width:94vw;
max-width:500px;
}
#diceWrap{
display:flex;
align-items:center;
gap:12px;
justify-content:center;
}
#diceTray{display:flex;gap:8px;}
.die{
width:36px;
height:36px;
background:#fff;
border:2px solid #5D9CEC;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
color:#2C3E50;
box-shadow:0 3px 6px rgba(0,0,0,.12);
font-size:16px;
}
#sumBox{
width:50px;
height:50px;
background:#FF7675;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:bold;
box-shadow:0 4px 10px rgba(255,118,117,.4);
}
#dirBox{
display:flex;
gap:10px;
margin:5px 0;
}
.dir-btn{
padding:6px 18px;
border-radius:20px;
border:2px solid #5D9CEC;
font-size:14px;
cursor:pointer;
font-weight:bold;
background:#fff;
color:#5D9CEC;
transition:all .2s;
}
.dir-btn.active{
background:#5D9CEC;
color:#fff;
}
#tip{
font-size:15px;
color:#4A6572;
padding:8px 15px;
border-radius:10px;
background:#e8f4fc;
width:100%;
text-align:center;
line-height:1.4;
}
button{
padding:14px 35px;
background:#5D9CEC;
color:#fff;
border:none;
border-radius:12px;
font-size:18px;
cursor:pointer;
box-shadow:0 6px 15px rgba(93,156,236,.5);
width:100%;
font-weight:bold;
}
button:active{
transform:translateY(3px);
box-shadow:0 3px 8px rgba(93,156,236,.3);
}
/* 统计区域样式 */
.stats-box{
display:flex;
justify-content:space-between;
width:100%;
gap:10px;
margin-top:10px;
}
.stat-item{
flex:1;
background:#fff;
padding:10px;
border-radius:10px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.stat-label{
font-size:12px;
color:#666;
margin-bottom:5px;
}
.stat-value{
font-size:18px;
font-weight:bold;
color:#2C3E50;
}
.positive{color:#27AE60;}
.negative{color:#E74C3C;}
/* 规则弹窗样式 */
.modal-overlay{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
visibility:hidden;
transition:all .3s ease;
}
.modal-overlay.show{
opacity:1;
visibility:visible;
}
.modal-content{
background:#fff;
border-radius:16px;
padding:25px 20px 20px;
width:90vw;
max-width:420px;
max-height:80vh;
overflow-y:auto;
transform:scale(.9);
transition:transform .3s ease;
}
.modal-overlay.show .modal-content{
transform:scale(1);
}
.modal-title{
font-size:20px;
font-weight:bold;
color:#2C3E50;
text-align:center;
margin-bottom:15px;
}
.modal-body{
font-size:14px;
color:#4A6572;
line-height:1.6;
}
.modal-body h4{
color:#5D9CEC;
margin:12px 0 6px;
font-size:15px;
}
.modal-body ul{
margin-left:18px;
}
.modal-body li{
margin-bottom:4px;
}
.modal-footer{
text-align:center;
margin-top:20px;
}
.modal-btn{
padding:10px 28px;
background:#5D9CEC;
color:#fff;
border:none;
border-radius:20px;
font-size:15px;
cursor:pointer;
font-weight:bold;
}
</style>
</head>
<body>
<!-- 棋盘 -->
<div class="board-box" id="gameBoard"></div>
<!-- 下方控制区-->
<div class="ctrl-box">
<div id="diceWrap">
<div id="diceTray">
<span class="die" id="d1">?</span>
<span class="die" id="d2">?</span>
<span class="die" id="d3">?</span>
<span class="die" id="d4">?</span>
<span class="die" id="d5">?</span>
</div>
<div id="sumBox">?</div>
</div>
<!-- 方向选择按钮 -->
<div id="dirBox">
<div class="dir-btn active" id="clockwise" onclick="setDir('clockwise')">顺时针 ↻</div>
<div class="dir-btn" id="anticlockwise" onclick="setDir('anticlockwise')">逆时针 ↺</div>
</div>
<div id="tip">点击「摇骰子」开始游戏 | 默认：顺时针</div>
<button onclick="roll5()">🎲 摇骰子</button>
<!-- 统计区域 -->
<div class="stats-box">
<div class="stat-item">
<div class="stat-label">本轮摇骰次数</div>
<div class="stat-value" id="rollCount">0/10</div>
</div>
<div class="stat-item">
<div class="stat-label">10次盈亏统计</div>
<div class="stat-value" id="profitLoss">¥0</div>
</div>
</div>
</div>
<!-- 游戏规则弹窗 -->
<div class="modal-overlay" id="ruleModal">
<div class="modal-content">
<div class="modal-title">🎮 游戏规则</div>
<div class="modal-body">
<h4>📌 基本玩法</h4>
<ul>
<li>点击「摇骰子」开始游戏，系统会掷出5颗骰子</li>
<li>根据5颗骰子的总和作为起点数字，在棋盘上行走</li>
<li>例子1+2+2+4+1=10，从10开始走10步，10本身为第一步</li>
<li>可选择顺时针或逆时针方向行走</li>
</ul>
<h4>💰 豹子奖励</h4>
<ul>
<li>5个1：¥2000</li>
<li>5个2：¥2000</li>
<li>5个3：¥4000</li>
<li>5个4：¥4000</li>
<li>5个5：¥6000</li>
<li>5个6：¥6000</li>
</ul>
<h4>📊 盈亏统计</h4>
<ul>
<li>每10次摇骰为一轮，自动计算盈亏总和</li>
<li>走到棋盘上的金钱格可获得对应金额</li>
<li>部分格子为负收益，会减少资金</li>
<li>10次完成后清零，开始新一轮统计</li>
</ul>
<h4>🎯 游戏目标</h4>
<ul>
<li>通过策略和运气，在10次摇骰内获得最大收益</li>
<li>挑战不同的行走方向，寻找最优路径</li>
</ul>
</div>
<div class="modal-footer">
<button class="modal-btn" onclick="closeRuleModal()">我知道了</button>
</div>
</div>
</div>
<script>
/* ========== 顺时针 26 格闭环数据 ========== */
const seq=[
// 顶行 9（从左到右）
{n:10,en:"¥1000"},{n:17,en:"¥400"},{n:12,en:"¥1200"},{n:15,en:"¥200"},{n:14,en:"¥1000"},
{n:13,en:"¥600"},{n:16,en:"¥1200"},{n:11,en:"¥200"},{n:18,en:"¥1000"},
// 右列 4（从上到下）
{n:9,en:"¥500"},{n:20,en:"¥1400"},{n:7,en:"¥100"},{n:22,en:"¥1000"},
// 底行 9（从右到左）
{n:5,en:"¥400"},{n:24,en:"¥1400"},{n:29,en:"¥300"},{n:26,en:"¥1200"},
{n:27,en:"-¥600"},{n:28,en:"¥1600"},{n:25,en:"¥300"},{n:30,en:"¥6000"},{n:23,en:"¥200"},
// 左列 4（从下到上）
{n:6,en:"¥1400"},{n:21,en:"¥300"},{n:8,en:"¥1200"},{n:19,en:"¥300"}
];
const TOTAL=seq.length;
const $=q=>document.querySelector(q);
// 全局变量：行走方向，默认顺时针
let walkDir = 'clockwise';
// 统计变量
let rollCount = 0;
let totalProfit = 0;
let currentSessionProfits = [];
/* ===== 页面加载时显示规则弹窗 ===== */
window.addEventListener('load',()=>{
initBoard();
// 延迟显示规则弹窗，确保页面渲染完成
setTimeout(()=>{
showRuleModal();
},300);
});
/* ===== 显示/隐藏规则弹窗 ===== */
function showRuleModal(){
$('#ruleModal').classList.add('show');
}
function closeRuleModal(){
$('#ruleModal').classList.remove('show');
}
/* ===== 初始化长方形棋盘 ===== */
function initBoard(){
const board=$('#gameBoard');
board.querySelectorAll('.cell').forEach(c=>c.remove());
const W=board.clientWidth,H=board.clientHeight;
const gap=5;
const colCount=9, rowCount=6;
const cellW=(W - gap*(colCount + 1))/colCount;
const cellH=(H - gap*(rowCount + 1))/rowCount;
const cellSizeW = cellW;
const cellSizeH = cellH;
let idx=0;
/* 1. 顶行 9格：第0行，从左到右 */
for(let c=0;c<colCount;c++){
const x=gap + c*(cellSizeW + gap);
const y=gap;
board.appendChild(createCell(idx++,x,y,cellSizeW,cellSizeH));
}
/* 2. 右列 4格：第1-4行，最后一列 */
for(let r=1;r<=4;r++){
const x=gap + (colCount-1)*(cellSizeW + gap);
const y=gap + r*(cellSizeH + gap);
board.appendChild(createCell(idx++,x,y,cellSizeW,cellSizeH));
}
/* 3. 底行 9格：第5行，从右到左 */
for(let c=colCount-1;c>=0;c--){
const x=gap + c*(cellSizeW + gap);
const y=gap + (rowCount-1)*(cellSizeH + gap);
board.appendChild(createCell(idx++,x,y,cellSizeW,cellSizeH));
}
/* 4. 左列 4格：第4-1行，第一列 */
for(let r=4;r>=1;r--){
const x=gap;
const y=gap + r*(cellSizeH + gap);
board.appendChild(createCell(idx++,x,y,cellSizeW,cellSizeH));
}
function createCell(i,x,y,w,h){
const div=document.createElement('div');
div.className='cell';
div.dataset.idx=i;
div.innerHTML=`<div class="num">${seq[i].n}</div><div class="en">${seq[i].en}</div>`;
div.style.left=`${x}px`;
div.style.top=`${y}px`;
div.style.width=`${w}px`;
div.style.height=`${h}px`;
return div;
}
}
/* ===== 窗口缩放适配 ===== */
window.addEventListener('resize',()=>{
clearTimeout(window.resizeTimer);
window.resizeTimer=setTimeout(initBoard,100);
});
/* ===== 切换行走方向 ===== */
function setDir(dir){
walkDir = dir;
$('#clockwise').classList.remove('active');
$('#anticlockwise').classList.remove('active');
$(`#${dir}`).classList.add('active');
$('#tip').innerText = `当前方向：${dir==='clockwise'?'顺时针 ↻':'逆时针 ↺'}，点击摇骰子开始`;
}
/* ===== 更新统计显示 ===== */
function updateStats(){
$('#rollCount').textContent = `${rollCount}/10`;
const profitElement = $('#profitLoss');
profitElement.textContent = `¥${totalProfit}`;
if(totalProfit >= 0){
profitElement.classList.remove('negative');
profitElement.classList.add('positive');
} else {
profitElement.classList.remove('positive');
profitElement.classList.add('negative');
}
}
/* ===== 5骰摇骰子逻辑 ===== */
function roll5(){
const faces=[];
for(let i=0;i<5;i++){
const f=Math.floor(Math.random()*6)+1;
faces.push(f);
$(`#d${i+1}`).textContent=f;
}
const sum=faces.reduce((a,b)=>a+b,0);
$('#sumBox').textContent = sum;
const isBao=faces.every(v=>v===faces[0]);
if(isBao){
let reward = 0;
switch(faces[0]){
case 1: reward = 2000; break;
case 2: reward = 2000; break;
case 3: reward = 4000; break;
case 4: reward = 4000; break;
case 5: reward = 6000; break;
case 6: reward = 6000; break;
}
currentSessionProfits.push(reward);
totalProfit += reward;
rollCount++;
setTimeout(()=>{
alert(`🎉 恭喜你摇到豹子${faces[0]}！获得¥${reward}！`);
updateStats();
checkSessionReset();
},200);
return;
}
walkFrom(sum);
}
/* ===== 检查是否需要重置会话 ===== */
function checkSessionReset(){
if(rollCount >= 10){
setTimeout(()=>{
alert(`📊 10次摇骰完成！本轮总盈亏：¥${totalProfit}`);
rollCount = 0;
totalProfit = 0;
currentSessionProfits = [];
updateStats();
$('#tip').innerText = '新一轮开始！点击「摇骰子」继续游戏';
},500);
}
}
/* ===== 顺/逆时针行走逻辑 ===== */
function walkFrom(startNum){
let idx=seq.findIndex(o=>o.n===startNum);
if(idx===-1){
alert('该数字不在棋盘上，请重新摇骰子！');
return;
}
document.querySelectorAll('.cell').forEach(c=>c.classList.remove('active'));
const steps=startNum-1;
const dirText = walkDir==='clockwise'?'顺时针':'逆时针';
$('#tip').textContent=`起点 ${startNum}，${dirText} 走 ${steps} 步 | 骰子总和：${startNum}`;
for(let i=0;i<=steps;i++){
setTimeout(()=>{
document.querySelectorAll('.cell').forEach(c=>c.classList.remove('active'));
const target=document.querySelector(`.cell[data-idx="${idx}"]`);
if(target) target.classList.add('active');
const o=seq[idx];
$('#tip').innerHTML=`当前：<b>${o.n}</b> ${o.en} | ${dirText} | 骰子总和：${startNum}`;
if(i === steps){
const profit = extractProfit(o.en);
currentSessionProfits.push(profit);
totalProfit += profit;
rollCount++;
updateStats();
setTimeout(()=>{
checkSessionReset();
},500);
}
if(walkDir === 'clockwise'){
idx=(idx+1)%TOTAL;
}else{
idx=(idx-1 + TOTAL)%TOTAL;
}
},i*180);
}
}
/* ===== 从字符串中提取盈亏金额 ===== */
function extractProfit(enStr){
const match = enStr.match(/[+-]?¥(\d+)/);
if(match){
return parseInt(match[1]) * (enStr.includes('-') ? -1 : 1);
}
return 0;
}
</script>
</body>
</html>游戏规则： 📌 基本玩法 点击「摇骰子」开始游戏，系统会掷出5颗骰子 根据5颗骰子的总和作为起点数字，在棋盘上行走 行走步数 = 起点数字 - 1 可选择顺时针或逆时针方向行走 💰 豹子奖励 5个1：¥2000 5个2：¥2000 5个3：¥4000 5个4：¥4000 5个5：¥6000 5个6：¥6000 📊 盈亏统计 每10次摇骰为一轮，自动计算盈亏总和 走到棋盘上的金钱格可获得对应金额 部分格子为负收益，会减少资金 10次完成后清零，开始新一轮统计 🎯 游戏目标 通过策略和运气，在10次摇骰内获得最大收益 挑战不同的行走方向，寻找最优路径
今天这个游戏，希望你能举一反三，警惕生活中其他类似游戏。如果你实在分辨不了，那只用记住下面这句话：不管是庄家还是商家，只要对方敢放出一种游戏规则邀请你参与，那这套规则就必定做到了算无遗策。这种情况下，你最后都不可能占到任何便宜。所以，你要做的就是对它们说一个字：滚。