当前位置：首页 > news >正文

自制猜数字游戏源码（手机端）

news 来源：原创 2025/5/4 10:14:57

index.html

<!DOCTYPE html>
<html><head><link href="css/index.css" rel="stylesheet" type="text/css"><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><script src="js/index.js"></script><title>WebCat</title></head><body>	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><center><input class="btn" id="input" type="number"/><button class="btn" id="guess" onclick="guess()"></button><br><button class="btn2" id="new" onclick="new_number()"></button><div id="message" class="text">未开始</div></center></body>
</html>

index.css

body{background-color:#1c1b29;
}
#input{height:40pt;width:250pt;font-size:20pt;margin-bottom:10px;
}
.text{color:#fff;margin-top:10px;font-size:2em;	background-color:#1c1b29;
}
.btn{width:250pt;height:50pt;border:none;transform:translate(0,0);box-shadow:0 1.25em 2.18em rgba(0,0,0,0.3);overflow:hidden;border-radius:0.31em;}
.btn:before{content:"";height:100%;width:100%;position:absolute;top:0;left:0;background:repeating-linear-gradient(to right,#fd004c 5.24em,#fe9000 10.5em,#fff020 15.74em,#3edf4b 21em,#3363ff 31.5em,#fd004c 37.5em);background-size:125em;
}
.btn:after{content:"猜数字";position:absolute;background-color:#1c1b29;height:85%;width:97%;top:7.5%;left:1.5%;border-radius:0.2em;color:white;font-family:"Poppins",sans-serif;font-size:1.5em;letter-spacing:0.3em;display:grid;font-weight:bold;place-items:center;
}
.btn:hover:before{background-position:-106.25em 0;transition:10s linear;
}
.btn2{display:none;width:25em;height:5em;border:none;transform:translate(0,0);box-shadow:0 1.25em 2.18em rgba(0,0,0,0.3);overflow:hidden;border-radius:0.31em;}
.btn2:before{content:"";height:100%;width:100%;position:absolute;top:0;left:0;background:repeating-linear-gradient(to right,#fd004c 5.24em,#fe9000 10.5em,#fff020 15.74em,#3edf4b 21em,#3363ff 31.5em,#fd004c 37.5em);background-size:125em;
}
.btn2:after{content:"再来一局";position:absolute;background-color:#1c1b29;height:85%;width:97%;top:7.5%;left:1.5%;border-radius:0.2em;color:white;font-family:"Poppins",sans-serif;font-size:1.5em;letter-spacing:0.3em;display:grid;font-weight:bold;place-items:center;
}
.btn2:hover:before{background-position:-106.25em 0;transition:10s linear;
}

index.js

var secretNumber = Math.floor(Math.random() * 100) + 1;
var attempts = 0;
function new_number() {secretNumber = Math.floor(Math.random() * 100) + 1;attempts = 0;document.getElementById("guess").style.display="block";document.getElementById("message").innerHTML = "";document.getElementById("new").style.display="none";
}
function guess() {var guess = document.getElementById("input").value;attempts++;if (isNaN(guess) || guess < 1 || guess > 100) {document.getElementById("message").innerHTML = "请重新输入";return;}if (guess == secretNumber) {document.getElementById("message").innerHTML = "猜对了";document.getElementById("guess").style.display="none";document.getElementById("new").style.display="block";} else if (guess < secretNumber) {document.getElementById("message").innerHTML = "太小了";} else {document.getElementById("message").innerHTML = "太大了";}
}