先上图
代码如下 直接运行即可 欢迎各位大佬提意见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
outline: unset;
font-family: Menlo;
}
body {
background-color: rgb(235, 234, 198);
}
.shadow {
box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
}
.container {
width: 800px;
background-color: rgb(194, 214, 238);
border-radius: 20px;
margin: auto;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.container > * {
margin: 20px;
}
.btn-group {
display: flex;
justify-content: space-around;
padding: 10px;
}
button {
padding: 12px 10px;
border-radius: 4px;
border: none;
box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
}
#answer {
font-size: 18px;
color: rgb(6, 19, 133);
display: inline-block;
width: 80px;
text-align: center;
}
.middle {
display: flex;
justify-content: space-between;
box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.main {
width: 63%;
}
.desc {
width: 35%;
}
#history {
height: 500px;
border: 1px dashed #ccc;
box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
}
.history-item {
text-align: center;
font-size: 40px;
color: #2c6030;
letter-spacing: 30px;
gin-right: 40px;
}
.history-result {
color: tomato;
letter-spacing: 10px;
}
.footer {
margin: auto;
text-align: center;
margin: 20px;
}
#answerInput {
outline: unset;
padding: 12px 10px;
margin-right: 20px;
width: 33px;
}
</style>
</head>
<body>
<div class="container">
<div class="btn-group">
<div class="show-answer">
<span id="answer">****</span>
<button id="showAnswer" onclick="showAnswer()">显示答案</button>
</div>
<button onclick="restart()">重新开始</button>
</div>
<div class="middle">
<div class="main">
<div id="history"></div>
</div>
<div class="desc">
玩法说明： <br />
1A：<br />
代表有一个数字猜对并且位置正确 <br />
1B：<br />代表有一个数字对但是位置不正确 <br />
如：<br />
答案为 1234 猜测为 1246 <br />
1 和 2 猜对了,且位置正确<br />
所以为 2A <br />
4 数字正确但位置不对<br />
所以为 1B <br />
所以显示结果为 2A1B
<br />
<br />
<br />
答案为1-9组成的不重复的四位数
</div>
</div>
<div class="footer">
<input id="answerInput" type="text" />
<button onclick="judgeRest()">检查答案</button>
<span id="res"></span>
</div>
</div>
<script>
let number
const initNum = (len = 4) => {
const arr = []
while (arr.length < len) {
const num = ~~(Math.random() * 10)
if (!arr.includes(num) && num > 0) {
arr.push(num)
}
}
return arr
}
const showAnswer = flag => {
const showAnswerBtn = document.getElementById('showAnswer')
const answerEl = document.getElementById('answer')
if (flag === false) {
showAnswerBtn.innerText = '显示答案'
answerEl.innerText = '****'
return
}
if (showAnswerBtn.innerText === '显示答案') {
showAnswerBtn.innerText = '隐藏答案'
answerEl.innerText = number.toString().replace(/,/g, ' ')
} else {
showAnswerBtn.innerText = '显示答案'
answerEl.innerText = '****'
}
}
const judgeRest = () => {
const str = document.getElementById('answerInput').value
const inputReg = /^[1-9]{4}$/
const isRepeat = new Set(str).size !== str.length
if (!inputReg.test(str) || isRepeat) {
alert(`请检查您的输入，输入的值只能为 1~9组成的不重复的4位数`)
return
}
const strArr = str.split('')
let numA = 0
let numB = 0
strArr.map((num, index) => {
num = ~~num
if (number.includes(num)) {
if (number.indexOf(num) === index) {
numA++
} else {
numB++
}
}
})
if (numA === 4) {
const SUCCESSTIP =
'牛逼，猜对了，但你还是单身狗，没人陪你玩游戏...不如再玩一局吧。'
if (confirm(SUCCESSTIP)) {
initNewGame()
}
return
}
setHistory(`${
numA}A${
numB}B`)
}
const setHistory = (str = '') => {
const historyBox = document.getElementById('history')
const answerInputEl = document.getElementById('answerInput')
if (str) {
historyBox.innerHTML += `<p class="history-item">
<span class="history-text">${
answerInputEl.value}</span>
<span class="history-result">${
str}</span>
</p>`
} else {
historyBox.innerHTML = ''
}
document.getElementById('answerInput').value = ''
}
const restart = () => {
if (confirm('确定要重新开始游戏吗？')) {
initNewGame()
}
}
const initNewGame = () => {
number = initNum()
showAnswer(false)
setHistory('')
document.getElementById('answerInput').value = ''
}
initNewGame()
</script>
</body>
</html>