基于js和html的骰子游戏

介绍:

  • 1.游戏者选择“大”时,三个骰子点数之和为11-18时,游戏者获胜。
  • 2.游戏者选择“小”时,三个骰子点数之和为3-10时,游戏者获胜。
  • 3.如果游戏者选择具体点数,则根据三个骰子的点数计算,如果与游戏者下注的点数相同,则游戏者获胜。
  • 4.玩家可以设置总数量,每次开始游戏,如果玩家胜利,总数量增加当前数量*倍率,反正减少。

html代码:




    
	
    骰子游戏
    
    
   
   


    

骰子游戏

  • 1.游戏者选择“大”时,三个骰子点数之和为11-18时,游戏者获胜。
  • 2.游戏者选择“小”时,三个骰子点数之和为3-10时,游戏者获胜。
  • 3.如果游戏者选择具体点数,则根据三个骰子的点数计算,如果与游戏者下注的点数相同,则游戏者获胜。
  • 4.玩家可以设置总数量,每次开始游戏,如果玩家胜利,总数量增加当前数量*倍率,反正减少

    总数量:

当前数量:

       倍率:

js代码(size.js)

document.getElementById('btn-big').addEventListener('click', function() {
    playGame('big');
});

document.getElementById('btn-small').addEventListener('click', function() {
    playGame('small');
});

document.getElementById('btn-guess').addEventListener('click', function() {
    const guessNumber = parseInt(document.getElementById('input-number').value, 10);
    if(guessNumber && guessNumber >= 3 && guessNumber <= 18) {
        playGame(guessNumber);
    } else {
        alert('请输入一个有效的数字(3-18之间)!');
    }
});

function playGame(choice) {
    const walletAmount = parseFloat(document.getElementById('wallet-amount').value);
    const betAmount = parseFloat(document.getElementById('bet-amount').value);
    const multiplier = parseFloat(document.getElementById('multiplier').value);
  
    if (isNaN(walletAmount) || isNaN(betAmount) || isNaN(multiplier)) {
        alert('请输入有效的数值!');
        return;
    }
  
    if (walletAmount <= 0) {
        alert('钱包金额不能小于等于零!');
        return;
    }

    const diceResults = rollDice();
    const total = diceResults.reduce((a, b) => a + b);

    let result;
    let newWalletAmount;

    if (typeof choice === 'string') {
        if (choice === 'big' && total >= 11 && total <= 18) {
            result = '恭喜你,你赢了!';
		    resultColor = 'red';
			resultWeight = 'bold';
            newWalletAmount = walletAmount + (betAmount * multiplier);
        } else if (choice === 'small' && total >= 3 && total <= 10) {
            result = '恭喜你,你赢了!';
			resultColor = 'red';
			resultWeight = 'bold';
            newWalletAmount = walletAmount + (betAmount * multiplier);
        }  else {
            result = '很遗憾,你输了';
			resultColor = 'black';
			resultWeight = 'bold';
            newWalletAmount = walletAmount - (betAmount * multiplier);
        }
    } else {
        if (total === choice) {
            result = '恭喜你,你赢了!';
			resultColor = 'red';
			resultWeight = 'bold';
            newWalletAmount = walletAmount + (betAmount * multiplier);
        } else {
            result = '很遗憾,你输了';
			resultColor = 'black';
			resultWeight = 'bold';
            newWalletAmount = walletAmount - (betAmount * multiplier);
        }
    }


    if (newWalletAmount < 0) {
        // alert('很遗憾,你的钱包金额不足!');
        // return;
    }

    const resultElement = document.getElementById('result');
	//字体颜色
	resultElement.style.color = resultColor;
	resultElement.style.fontWeight = resultWeight;
    resultElement.innerText = `骰子点数: ${diceResults.join(', ')} 总数: ${total}. ${result}`;
  
    document.getElementById('wallet-amount').value = newWalletAmount.toFixed(2);
}

function displayDiceResults(results, element, index, total) {
    if (index < results.length) {
        setTimeout(() => {
            if (index === results.length - 1) {
                element.innerText += `${results[index]} `;
                element.innerText += `总数: ${total}. `;
            } else {
                element.innerText += `${results[index]}, `;
            }
            
            displayDiceResults(results, element, index + 1, total);
        }, 500);
    }
}

// 其他部分保持不变

function rollDice() {
    return [1, 2, 3].map(() => Math.floor(Math.random() * 6) + 1);
}

基于js和html的骰子游戏_第1张图片

基于js和html的骰子游戏_第2张图片

基于js和html的骰子游戏_第3张图片

你可能感兴趣的:(游戏,javascript,html5)