<!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>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.container {
width: 700px;
margin: 0 auto;
background-image: url('images/3.webp'); /* 替换为你的图片路径 */
background-size: cover; /* 图片覆盖整个背景 */
background-repeat: no-repeat; /* 不重复图片 */
}
.numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.number {
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
font-size: 16px;
width: 100px;
position: relative;
overflow: hidden;
}
.number .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/100');
background-size: cover;
cursor: pointer;
}
.number.revealed .overlay {
display: none; /* 点击后隐藏遮挡层 */
}
.winning-number {
background-color: #ffcccc; /* 中奖号码背景颜色 */
color: red; /* 中奖号码文字颜色 */
font-weight: bold; /* 中奖号码加粗 */
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #0056b3;
}
.total-prize, .current-prize, .winning-percentage {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.probability-control {
margin-top: 20px;
font-size: 16px;
}
.probability-control input {
width: 60px;
padding: 5px;
font-size: 16px;
}
.winning-record {
margin-top: 20px;
font-size: 16px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
background-color: #f9f9f9;
}
.winning-record p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>彩票刮刮乐游戏</h1>
<p>中奖号码:<span id="winningNumber"></span></p>
<div class="probability-control">
<label for="winningProbability">中奖概率(0-1):</label>
<input type="number" id="winningProbability" min="0" max="1" step="0.01" value="0.1">
</div>
<div class="total-prize">累计奖金:<span id="totalPrize">0</span>元</div>
<div class="current-prize">当前中奖的总金额:<span id="currentPrize">0</span>元</div>
<button class="button" onclick="playGame()">开始游戏</button>
<button class="button" onclick="resetGame()">重新开始</button>
<button class="button" onclick="revealAll()">一键刮开</button>
<div class="numbers" id="numbersContainer"></div>
<div class="winning-record" id="winningRecord"></div>
</div>
<script>
let totalPrize = 0; // 累计奖金
let totalGames = 0; // 总游戏次数
let winningGames = 0; // 中奖次数
let winningProbability = 0.1; // 中奖概率,默认 10%
// 监听中奖概率输入框
document.getElementById("winningProbability").addEventListener("input", function () {
winningProbability = parseFloat(this.value);
if (winningProbability < 0) winningProbability = 0;
if (winningProbability > 1) winningProbability = 1;
});
// 生成随机号码
function generateRandomNumbers(count, min, max, winningNumber, winningProbability) {
const numbers = [];
// 根据概率决定是否包含中奖号码
const shouldIncludeWinningNumber = Math.random() < winningProbability;
// 生成非中奖号码
while (numbers.length < count) {
let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
if (randomNumber !== winningNumber || !shouldIncludeWinningNumber) {
numbers.push(randomNumber);
}
}
// 如果需要包含中奖号码,则随机替换一个号码为中奖号码
if (shouldIncludeWinningNumber) {
const randomIndex = Math.floor(Math.random() * count);
numbers[randomIndex] = winningNumber;
}
return numbers;
}
// 生成金额
function generateAmounts(count, maxAmount, lowProbability) {
const amounts = [];
for (let i = 0; i < count; i++) {
if (Math.random() * 100 < lowProbability) {
amounts.push(Math.floor(Math.random() * 100) + 1); // 1-100
} else {
amounts.push(Math.floor(Math.random() * (maxAmount - 100)) + 101); // 101-1000
}
}
return amounts;
}
// 检查是否中奖
function checkWinning(numbers, amounts, winningNumber, index, numberDiv) {
const winningRecordDiv = document.getElementById("winningRecord");
if (numberDiv.clicked) return; // 如果已经点击过,则不再处理
if (numbers[index] === winningNumber) {
// 显示中奖信息
const winningMessage = `<p style="color: red">恭喜你中奖了!中奖号码:${winningNumber},金额:${amounts[index]}元</p>`;
// 记录中奖信息
winningRecordDiv.innerHTML += `<p>${winningMessage}</p>`;
// 更新累计奖金
totalPrize += amounts[index];
document.getElementById("totalPrize").innerText = totalPrize;
// 更新当前中奖的总金额
document.getElementById("currentPrize").innerText = amounts[index];
// 标记中奖号码
numberDiv.classList.add("winning-number");
}
numberDiv.clicked = true; // 标记为已点击
}
// 开始游戏
function playGame() {
// 选出中奖号码
const winningNumber = Math.floor(Math.random() * 99) + 1;
// 随机选出五十个号码。
const numbers = generateRandomNumbers(50, 1, 99, winningNumber, winningProbability);
const amounts = generateAmounts(50, 1000, 99);
// 显示中奖号码
document.getElementById("winningNumber").innerText = winningNumber;
// 显示生成的号码及其金额
const numbersContainer = document.getElementById("numbersContainer");
numbersContainer.innerHTML = "";
for (let i = 0; i < numbers.length; i++) {
const numberDiv = document.createElement("div");
numberDiv.className = "number";
numberDiv.innerHTML = `
<div class="overlay"></div>
<span>${numbers[i]}(${amounts[i]})</span>
`;
numberDiv.clicked = false; // 初始化点击状态
numberDiv.addEventListener("click", function () {
this.classList.add("revealed"); // 点击后显示
checkWinning(numbers, amounts, winningNumber, i, this); // 检查是否中奖
});
numbersContainer.appendChild(numberDiv);
}
// 重置结果和中奖记录
document.getElementById("winningRecord").innerHTML = "";
document.getElementById("currentPrize").innerText = 0;
}
// 重新开始游戏
function resetGame() {
totalPrize = 0; // 重置累计奖金
totalGames = 0; // 重置总游戏次数
winningGames = 0; // 重置中奖次数
document.getElementById("totalPrize").innerText = totalPrize;
document.getElementById("currentPrize").innerText = 0;
document.getElementById("winningRecord").innerHTML = "";
document.getElementById("numbersContainer").innerHTML = "";
document.getElementById("winningNumber").innerText = "";
playGame();
}
// 去掉所有遮挡物并计算结果
function revealAll() {
const numbersContainer = document.getElementById("numbersContainer");
const numberDivs = numbersContainer.getElementsByClassName("number");
const winningNumber = parseInt(document.getElementById("winningNumber").innerText);
for (let i = 0; i < numberDivs.length; i++) {
const numberDiv = numberDivs[i];
numberDiv.classList.add("revealed"); // 移除遮挡层
// 检查是否中奖
const number = parseInt(numberDiv.querySelector("span").innerText.split("(")[0]);
const amount = parseInt(numberDiv.querySelector("span").innerText.split("(")[1].split(")")[0]);
if (number === winningNumber) {
totalPrize += amount;
numberDiv.classList.add("winning-number");
}
}
// 更新累计奖金
document.getElementById("totalPrize").innerText = totalPrize;
// 显示中奖记录
const winningRecordDiv = document.getElementById("winningRecord");
winningRecordDiv.innerHTML = "";
for (let i = 0; i < numberDivs.length; i++) {
const numberDiv = numberDivs[i];
const number = parseInt(numberDiv.querySelector("span").innerText.split("(")[0]);
const amount = parseInt(numberDiv.querySelector("span").innerText.split("(")[1].split(")")[0]);
if (number === winningNumber) {
const winningMessage = `<p style="color: red">恭喜你中奖了!中奖号码:${winningNumber},金额:${amount}元</p>`;
winningRecordDiv.innerHTML += `<p>${winningMessage}</p>`;
}
}
}
</script>
</body>
</html>