我是HTML和JavaScript编码语言的初学者。这是我第一次制作一个简单的HTML游戏而且我差不多完成了它。然而,我想限制播放器按下他们可以按的按钮数量。我决定使用3个按钮。
现在......我有两个朋友,他们都非常擅长编码。
一位朋友建议我做一个for循环。
另一位朋友建议限制按钮的点击次数。
但我觉得有一种不同的方式。
你们的人建议什么?
我的代码:
<!DOCTYPE html>
<html>
<head>
<title>THE MINI GAME</title>
<style>
body {
background-color: #ccbebd;
}
</style>
</head>
<body>
<p>GUESS THE NUMBER BUTTON...</p>
<p>Win by guessing the right number button.</p>
<p>IF YOU GUESSED 3 TIMES... YOU LOSE THE GAME.</p>
<p>Restart if you encounter problems.</p>
<p>IS IT...</p>
<p id="demo">WRONG</p>
<p>OR</p>
<p id="welp">RIGHT</p>
<input type="button" value="THIS 1?"onclick="mySin(); oneClick(this);">
<br>
<input type="button" value="MAYBE...2."onclick="myAin(); oneClick(this);">
<br>
<input type="button" value="AH HA! 3!"onclick="myVin(); oneClick(this);">
<br>
<input type="button" value="YES. 4."onclick="myAia(); oneClick(this);">
<br>
<input type="button" value="HIGH 5?"onclick="myGin(); oneClick(this);">
<br>
<input type="button" value="TRY...6."onclick="myEin(); oneClick(this);">
<br>
<input type="button" value="OH! 7."onclick="myLin(); oneClick(this);">
<br>
<input type="button" value="NAH. IT COULD BE 8."onclick="myLife()">
<br>
<input type="button" value="9?"onclick="myFin(); oneClick(this);">
<br>
<input type="button" value="MAYBE...10?!?!"onclick="myZin(); oneClick(this);">
<script>
function oneClick(oButton) {
if (typeof oButton.once != 'undefined')
alert('' + oButton.value + ' has already been pressed. Choose another button.');
else {
oButton.once = true;
oButton.style.color = '#f44542';
}
}
function mySin(){
var x = document.getElementById("welp");
x.style.fontSize = "18px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "78px";
y.style.color = "red";
document.body.style.backgroundColor = "lightgrey";
}
function myAin(){
var x = document.getElementById("welp");
x.style.fontSize = "20px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "80px";
y.style.color = "red";
document.body.style.backgroundColor = "pink";
}
function myVin(){
var x = document.getElementById("welp");
x.style.fontSize = "22px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "82px";
y.style.color = "red";
document.body.style.backgroundColor = "lightpink";
}
function myAia(){
var x = document.getElementById("welp");
x.style.fontSize = "24px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "84px";
y.style.color = "red";
document.body.style.backgroundColor = "magenta";
}
function myGin(){
var x = document.getElementById("welp");
x.style.fontSize = "26px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize= "86px";
y.style.color = "red";
document.body.style.backgroundColor = "lightmagenta";
}
function myEin(){
var x = document.getElementById("welp");
x.style.fontSize = "28px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "88px";
y.style.color = "red";
document.body.style.backgroundColor = "purple";
}
function myLin(){
var x = document.getElementById("welp");
x.style.fontSize = "30px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "90px";
y.style.color = "red";
document.body.style.backgroundColor = "light";
}
function myLife(){
var x = document.getElementById("welp");
x.style.fontSize = "80px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "20px";
y.style.color = "red";
document.body.style.backgroundColor = "lightgreen";
}
function myFin(){
var x = document.getElementById("welp");
x.style.fontSize = "32px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "92px";
y.style.color = "red";
document.body.style.backgroundColor = "lightred";
}
function myZin(){
var x = document.getElementById("welp");
x.style.fontSize = "34px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "94px";
y.style.color = "red";
document.body.style.backgroundColor = "lightcrimson";
}
</script>
</body>
</html>
您可以添加计数器并检查oneClick函数中的计数器
var count = 0, maxAttempts = 3;
function oneClick(oButton) {
count++
if(count >= maxAttempts){
//enter lose logic here
alert("YOU LOSE")
return
}
if (typeof oButton.once != 'undefined'){
alert('' + oButton.value + ' has already been pressed. Choose another button.');
}
else {
oButton.once = true;
oButton.style.color = '#f44542';
}
}
还可以为每个按钮添加一个检查:
<!DOCTYPE html>
<html>
<head>
<title>THE MINI GAME</title>
<style>
body {
background-color: #ccbebd;
}
</style>
</head>
<body>
<p>GUESS THE NUMBER BUTTON...</p>
<p>Win by guessing the right number button.</p>
<p>IF YOU GUESSED 3 TIMES... YOU LOSE THE GAME.</p>
<p>Restart if you encounter problems.</p>
<p>IS IT...</p>
<p id="demo">WRONG</p>
<p>OR</p>
<p id="welp">RIGHT</p>
<input type="button" value="THIS 1?"onclick="mySin(); oneClick(this);">
<br>
<input type="button" value="MAYBE...2."onclick="myAin(); oneClick(this);">
<br>
<input type="button" value="AH HA! 3!"onclick="myVin(); oneClick(this);">
<br>
<input type="button" value="YES. 4."onclick="myAia(); oneClick(this);">
<br>
<input type="button" value="HIGH 5?"onclick="myGin(); oneClick(this);">
<br>
<input type="button" value="TRY...6."onclick="myEin(); oneClick(this);">
<br>
<input type="button" value="OH! 7."onclick="myLin(); oneClick(this);">
<br>
<input type="button" value="NAH. IT COULD BE 8."onclick="myLife()">
<br>
<input type="button" value="9?"onclick="myFin(); oneClick(this);">
<br>
<input type="button" value="MAYBE...10?!?!"onclick="myZin(); oneClick(this);">
<script>
var counter = 0;
function oneClick(oButton) {
if (counter !== 3) {
if (typeof oButton.once != 'undefined')
alert('' + oButton.value + ' has already been pressed. Choose another button.');
else {
oButton.once = true;
oButton.style.color = '#f44542';
}
counter++;
}
}
function mySin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "18px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "78px";
y.style.color = "red";
document.body.style.backgroundColor = "lightgrey";
counter++;
}
}
function myAin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "20px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "80px";
y.style.color = "red";
document.body.style.backgroundColor = "pink";
counter++;
}
}
function myVin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "22px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "82px";
y.style.color = "red";
document.body.style.backgroundColor = "lightpink";
counter++;
}
}
function myAia() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "24px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "84px";
y.style.color = "red";
document.body.style.backgroundColor = "magenta";
counter++;
}
}
function myGin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "26px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "86px";
y.style.color = "red";
document.body.style.backgroundColor = "lightmagenta";
counter++;
}
}
function myEin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "28px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "88px";
y.style.color = "red";
document.body.style.backgroundColor = "purple";
counter++;
}
}
function myLin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "30px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "90px";
y.style.color = "red";
document.body.style.backgroundColor = "light";
counter++;
}
}
function myLife() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "80px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "20px";
y.style.color = "red";
document.body.style.backgroundColor = "lightgreen";
counter++;
}
}
function myFin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "32px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "92px";
y.style.color = "red";
document.body.style.backgroundColor = "lightred";
counter++;
}
}
function myZin() {
if (counter !== 3) {
var x = document.getElementById("welp");
x.style.fontSize = "34px";
x.style.color = "green";
var y = document.getElementById("demo");
y.style.fontSize = "94px";
y.style.color = "red";
document.body.style.backgroundColor = "lightcrimson";
counter++;
}
}
</script>
</body>
</html>
完整解决方案
function styleElement(styles) { // Style element in general
var el = document.getElementById(styles[0]);
el.style.fontSize = styles[1];
el.style.color = styles[2];
}
function stylize(styles1, styles2, bodyBgColor) { // Style element1, element2 and body background color
styleElement(styles1);
styleElement(styles2);
document.body.style.backgroundColor = bodyBgColor;
}
function getRandColor() {
var hex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
color = "#";
for (var i = 0; i < 6; i += 1) {
color += hex[Math.floor(Math.random() * hex.length)];
}
return color;
}
function getRandInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function removeEvents(event, nodelist, f) {
for (var i = 0; i < nodelist.length; i += 1) {
nodelist[i].removeEventListener(event, f);
}
}
var buttons = document.querySelectorAll(".guess"),
len = buttons.length,
rand = Math.floor(Math.random() * len) + 1,
count = 0,
maxAttempts = 3;
function init() {
if (typeof(this.once) !== "undefined") {
alert("Button has already been pressed!");
} else {
this.once = true;
count += 1;
}
var i = +this.innerHTML.replace(/\D/, "");
if (i === rand) {
this.style.color = "green";
stylize(["wrong", "18px", getRandColor()], ["right", "78px",
"green"
], getRandColor());
alert("Yes, this is the right one!");
removeEvents("click", buttons, init);
return;
} else {
this.style.color = "red";
stylize(["wrong", getRandInt(25, 50) + "px", getRandColor()], ["right", getRandInt(18, 25) + "px", getRandColor()], getRandColor());
}
if (count === maxAttempts) {
alert("You lose");
removeEvents("click", buttons, init);
return;
}
}
for (var i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener("click", init);
}
button.guess {
display: block;
margin: 5px 0;
}
<p>GUESS THE NUMBER BUTTON...</p>
<p>Win by guessing the right number button.</p>
<p>IF YOU GUESSED 3 TIMES... YOU LOSE THE GAME.</p>
<p>Restart if you encounter problems.</p>
<p>IS IT...</p>
<p id="wrong">WRONG</p>
<p>OR</p>
<p id="right">RIGHT</p>
<button class="guess">1?</button>
<button class="guess">2?</button>
<button class="guess">3?</button>
<button class="guess">4?</button>
<button class="guess">5?</button>
<button class="guess">6?</button>
<button class="guess">7?</button>
<button class="guess">8?</button>
<button class="guess">9?</button>
<button class="guess">10?</button>