All geek questions in one place

How to limit the number of buttons that a player can click in a simple HTML game?

I am new to HTML and JavaScript programming languages. This is my first time making a simple HTML game, and I am almost done with it. However, I want to limit the player to how many buttons they can click. I decided to use 3 buttons.

Now ... I have two friends of mine who are seriously suitable for coding.

One of my friends suggested I make a for loop.

Another friend suggested restricting the button click.

But I feel that there is another way.

What are you offering?

My code is:

<!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>
Run codeHide result
+4
source share
3 answers

You can add a counter and check the counter in your oneClick function

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';
   }
}
0
source

:

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

0

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>
Hide result
0
source

Source: https://habr.com/ru/post/1690991/

More articles:


All Articles