Fatal编程技术网
  • javascript/
  • 如何使用javascript创建数字猜测游戏并做出反应？

如何使用javascript创建数字猜测游戏并做出反应？

javascript html css reactjs

如何使用javascript创建数字猜测游戏并做出反应？,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,所以，我需要创建一个React web应用程序，其中包括两个视图，其中一个是简单的数字猜测游戏。我在电脑上安装了npx，并创建了一个react应用程序，其中包含所有默认文件（app.js、index.js等）。然而，我不知道如何在没有html文件的情况下编写代码 我有一些这样的代码 index.html <html lang="en"> <head> <meta charset="UTF-8"> <

所以，我需要创建一个React web应用程序，其中包括两个视图，其中一个是简单的数字猜测游戏。我在电脑上安装了npx，并创建了一个react应用程序，其中包含所有默认文件（app.js、index.js等）。然而，我不知道如何在没有html文件的情况下编写代码

我有一些这样的代码

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link re="stylesheet" href="App.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <p>Guess a number between 1 - 100.</p>
        <p id="outputtext">Enter a number below</p>
        <input type= "text" id="userInput"><button id="btn">Enter</button>
    </div>

    <script src="App.js"></script>
</body>
</html>


文件
猜一个介于1到100之间的数字


在下面输入一个数字

进入
style.css

  background-color: #0E2431;
  border: 5px solid #F5E4C3;
  height: 275px;
  width: 750px;
  margin: auto;
  text-align: center;
}

p{
  color: white;
  font-size: 24px;
}

#input {
  width: 100px;
  margin: 25px auto;
}

#btn {
  margin: 25px auto auto 5px;
}```

game.js
``` let btn = document.getElementById('btn');
    let output = document.getElementById('outputtext');

    let number = [Math.floor(Math.random()*100)]

    btn.addEventListener('click', function(){
      let input = document.getElementById('userInput').value;
      if (input == number){
        output.innerHTML = 'You guessed right, your number was ${number}'
      } else if (input < number){
        output.innerHTML = "You guessed too low!"
      };
      if (input > number){
        output.innerHTML = "You guessed too high!"
      }
});```

But i don't know how i am able to recreate this in react, as there is no html file. Need help with this!

背景色：#0E2431；
边框：5px实心#F5E4C3；
高度：275px；
宽度：750px；
保证金：自动；
文本对齐：居中；
}
p{
颜色：白色；
字体大小：24px；
}
#输入{
宽度：100px；
保证金：25像素自动；
}
#btn{
利润率：25px自动5px；
}```
game.js
```设btn=document.getElementById（'btn'）；
让output=document.getElementById（'outputtext'）；
设number=[Math.floor（Math.random（）*100）]
btn.addEventListener（'click'，function（）{
让输入=document.getElementById（'userInput'）。值；
如果（输入==数字）{
output.innerHTML='您猜对了，您的号码是${number}'
}else if（输入<数字）{
output.innerHTML=“你猜得太低了！”
};
如果（输入>数字）{
output.innerHTML=“你猜得太高了！”
}
});```
但我不知道如何在react中重新创建它，因为没有html文件。需要帮忙！
在ReactJs中，我们使用一种类似于HTML的语法，称为JSX。在JSX中，您与HTML有一些区别，但它们都很小

您必须将jsx代码包装在父组件中（如div）

在App.js文件中，声明一个类，该类将作为组件：

//in App.js
import React from 'react'
import './style.css'
class App extends React.Component{
    constructor(props){
        super(props) //overrides the default props
        this.state = {
            number: 0,
            output: "Enter a number below",
            input: "",
        }//the so-called state is just all the variables you document needs
    }
    //Here is your game.js logic
    game = () => {
        this.setState({number: Math.floor(Math.random()*100)})
        if (input == number){
        this.setState({output:String('You guessed right, your number was ${number}')})
        } 
        else if (input < number){
        this.setState({output: "You guessed too low!"})
        }
        if (input > number){
            this.setState({output: "You guessed too high!"})
        }
    }
    handleChange = event => {
        this.setState({[event.target.name]: event.target.value})
    }
    render(){
        return(
            <div>
                 <p>Guess a number between 1 - 100.</p>
                 <p id="outputtext" value = {this.state.output} name = "output">{this.state.output}</p>
                 <input type= "text" id="userInput" name = "input" onChange = {this.handleChange} value = {this.state.input}>
                 <button id="btn" onClick = {this.game}>Enter</button>
            </div>
        )
    }
}
export default App;

//在App.js中
从“React”导入React
导入“./style.css”
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）//覆盖默认道具
此.state={
编号:0，
输出：“在下面输入一个数字”，
输入：“，
}//所谓的状态就是您记录所需的所有变量
}
//这是您的game.js逻辑
游戏=（）=>{
this.setState（{number:Math.floor（Math.random（）*100）}）
如果（输入==数字）{
this.setState（{output:String（'您猜对了，您的号码是${number}'））
} 
else if（输入<数字）{
this.setState（{output:“你猜得太低了！”）
}
如果（输入>数字）{
this.setState（{output:“你猜得太高了！”）
}
}
handleChange=事件=>{
this.setState（{[event.target.name]：event.target.value}）
}
render（）{
返回(
猜一个介于1到100之间的数字


{this.state.output}

进入
)
}
}
导出默认应用程序；
正如您所见，构建和逻辑都在一个地方，使得在应用程序中实现逻辑变得很容易。您可以将样式添加到style.css文件中，并像我所做的那样导入它。只需给你的标签一个
className
就可以在css中访问它们。我希望我能帮助你。如果您还有其他问题，请回答：）

正如您所见，在jsx中引用函数时不需要大括号。

Hi Ricardos！如果您以前从未接触过React，我建议您在开始任何项目之前先阅读文档。非常感谢，我做到了，接下来，我该如何处理game.js？我该把密码放在哪里？好的。我已经实现了你的逻辑。看一看。有问题吗？请告诉我。