小贝子编程

如何限制玩家可以在简单的HTML游戏中按下按钮的数量



我是HTML和JavaScript编码语言的初学者。这是我第一次制作一个简单的HTML游戏，而我几乎已经完成了。但是，我想限制播放器可以按多少按钮。我决定使用3个按钮。

现在...我有两个我的两个朋友都非常擅长编码。

一个朋友建议我应该做一个循环。

另一个朋友建议限制按钮上的点击。

但是我觉得有不同的方法。

你们建议什么？

我的代码：

<!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>

工作示例：https：//jsfiddle.net/zo74pqxk/

完整解决方案 

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium