Question

我正在尝试使用JavaScript和HTML制作简单的游戏。

游戏包括在屏幕上有两个带有随机数字的按钮，然后单击较小的按钮。

最后，您将获得结果。

我遇到的麻烦是获取JavaScript中生成的随机数以在按钮上打印，然后将数据从按钮返回到JavaScript。

var number = prompt('Choose Your Difficulty, Easy, Normal, Or Hard?');
var number = number.toUpperCase(); //Chooses difficulty


if (number === 'EASY')//easy difficulty
{
 var difficulty = 20;
}else if (number === 'NORMAL')//normal difficulty
{
 var difficulty = 100;
}else if(number === 'HARD')//hard difficulty
{
 var difficulty = 1000;
}else
{
  alert('Please Enter A Valid Answer')//if value is not valid
}

var number1 = Math.floor((Math.random()* difficulty) + 1);//random number 1 

var number2 = Math.floor((Math.random()* difficulty) + 1);//random number 2

//----------------------Code i found but im not sure now to use it--------------

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener("click", function() {
   alert("did something");
});

 //-----------------------------------------------------------------------------

button {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: salmon;
  border: none;
}
button:hover {
  background: lightsalmon;
}

<!DOCTYPE html>
  <html>
  <head>
    <title>
      Speed Game
    </title>
    
      <link href="css/styles.css" rel="stylesheet"
          type="text/css">
    
     <script src="../script/script.js"></script>
  </head>
    
    <body>
    
      <button id= "button">
  Do Something!
</button>
      
    </body>
  </html>

我该如何解决这个问题？

Answer 1

首先，欢迎来到编程世界！

第二，这是您想要的游戏。我已经使用函数完成了所有操作，因此理解它应该很容易。

尝试先玩几局！

这个概念确实非常简单，因此，在玩了一点之后，请看一下代码，然后尝试自己找出来！

import tkinter as tk

primary = tk.Tk()
primary.title("primary")
primary.geometry("200x200+500+300")

secondary = tk.Toplevel(primary)
secondary.title("secondary")
secondary.wm_geometry("300x300+100+100")

# hack lines: makes it so you can immediately
# close out of secondary without also closing
# out of primary. without these lines of code,
# primary will also close along with secondary
# unless you first click on primary.
primary.lift(secondary)
secondary.lift(primary)

primary.mainloop()

var number;
var difficulty = 0;

var randomNumOne; 
var randomNumTwo;

var buttonOne = document.getElementById("buttonOne");
var buttonTwo = document.getElementById("buttonTwo");

var tempButton;


function requestDifficulty(){
  number = prompt('Choose Your Difficulty, Easy, Normal, Or Hard?');
  number = number.toUpperCase(); 
  setDifficulty();
}

function setDifficulty(){
  if (number === 'EASY'){
    difficulty = 20;
    startGame();
  }else if (number === 'NORMAL'){
    difficulty = 100;
    startGame();
  }else if(number === 'HARD'){
    difficulty = 1000;
    startGame();
  }else{
  alert('Please Enter A Valid Answer');
    requestDifficulty()
  }
}
function startGame(){
  randomNumOne = Math.floor((Math.random()* difficulty) + 1); 
  randomNumTwo = Math.floor((Math.random()* difficulty) + 1);
  buttonOne.innerHTML = randomNumOne;
  buttonTwo.innerHTML = randomNumTwo;
}

function getResults(pressedButton){
  tempButton = pressedButton;
  if(tempButton == "buttonOne"){
    if(randomNumOne < randomNumTwo){
      alert("Correct!")
    }else{
      alert("False!")
    }
  }else if(tempButton == "buttonTwo"){
    if(randomNumTwo < randomNumOne){
      alert("Correct!")
    }else{
      alert("False!")
    }
  }
  
}

requestDifficulty();

button {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: salmon;
  border: none;
}
button:hover {
  background: lightsalmon;
}

将变量从JavaScript传递到HTML，将HTML按钮输入传递到JavaScript

1 个答案: