捡石子游戏网页代码

B站影视 电影资讯 2025-03-29 08:28 1

摘要:游戏规则:三堆石子分别为3、5、7个。两人轮流从任意一堆取走任意数目的石子,取最后一颗石子者输。

捡石子游戏(取最后一颗者输)

body {

font-family: Arial, sans-serif;

max-width: 800px;

margin: 0 auto;

padding: 20px;

text-align: center;

}

.game-container {

margin: 30px 0;

}

.pile {

display: inline-block;

margin: 0 20px;

vertical-align: top;

}

.stones {

display: flex;

flex-wrap: wrap;

justify-content: center;

width: 100px;

min-height: 100px;

margin: 10px 0;

padding: 10px;

border: 2px solid #333;

border-radius: 5px;

}

.stone {

width: 20px;

height: 20px;

margin: 3px;

background-color: #8B4513;

border-radius: 50%;

}

button {

margin: 10px;

padding: 8px 15px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

button:disabled {

background-color: #cccccc;

cursor: not-allowed;

}

.controls {

margin: 20px 0;

}

input {

width: 50px;

padding: 5px;

margin: 0 5px;

}

.message {

margin: 20px 0;

padding: 10px;

font-weight: bold;

border-radius: 4px;

}

.player-turn {

background-color: #e6f7ff;

}

.game-over {

background-color: #ffebee;

}

捡石子游戏

游戏规则:三堆石子分别为3、5、7个。两人轮流从任意一堆取走任意数目的石子,取最后一颗石子者输。

堆1

选择此堆

堆2

选择此堆

堆3

选择此堆

从堆中取走:

确认

取消

玩家1的回合

重新开始

let piles = [3, 5, 7]; // 三堆石子的初始数量

let currentPlayer = 1; // 当前玩家(1或2)

let selectedPile = 0; // 当前选中的堆(0表示未选中)

// 初始化游戏

function initGame {

updateStonesDisplay;

document.getElementById('message').className = 'message player-turn';

document.getElementById('message').textContent = `玩家${currentPlayer}的回合`;

selectedPile = 0;

document.getElementById('controls').style.display = 'none';

}

// 更新石子显示

function updateStonesDisplay {

for (let i = 0; i

const stonesContainer = document.getElementById(`stones${i+1}`);

stonesContainer.innerHTML = '';

for (let j = 0; j

const stone = document.createElement('div');

stone.className = 'stone';

stonesContainer.appendChild(stone);

}

}

}

// 选择堆

function selectPile(pileNum) {

if (piles[pileNum-1] === 0) {

alert('这堆已经没有石子了!');

return;

}

selectedPile = pileNum;

document.getElementById('selected-pile').textContent = pileNum;

document.getElementById('take-count').max = piles[pileNum-1];

document.getElementById('take-count').value = 1;

document.getElementById('controls').style.display = 'block';

}

// 取消选择

function cancelSelection {

selectedPile = 0;

document.getElementById('controls').style.display = 'none';

}

// 取石子

function takeStones {

const takeCount = parseInt(document.getElementById('take-count').value);

const pileIndex = selectedPile - 1;

if (takeCount piles[pileIndex]) {

alert('请输入有效的石子数量!');

return;

}

// 取石子

piles[pileIndex] -= takeCount;

// 检查游戏是否结束

const totalStones = piles[0] + piles[1] + piles[2];

if (totalStones === 0) {

// 游戏结束,当前玩家输

document.getElementById('message').className = 'message game-over';

document.getElementById('message').textContent = `游戏结束!玩家${currentPlayer}取了最后一颗石子,玩家${currentPlayer}输了!`;

selectedPile = 0;

document.getElementById('controls').style.display = 'none';

return;

}

// 切换玩家

currentPlayer = currentPlayer === 1 ? 2 : 1;

// 更新显示

updateStonesDisplay;

document.getElementById('message').className = 'message player-turn';

document.getElementById('message').textContent = `玩家${currentPlayer}的回合`;

selectedPile = 0;

document.getElementById('controls').style.display = 'none';

}

// 重置游戏

function resetGame {

piles = [3, 5, 7];

currentPlayer = 1;

initGame;

}

// 初始化游戏

window.onload = initGame;

来源:白猫游戏

相关推荐