时间戳

首页 > 解决方案 > 如何使用 javascript 创建数字猜谜游戏并做出反应？

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

问题描述

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

我有一些这样的代码

索引.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>

样式.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!

标签： javascripthtmlcssreactjs

解决方案

在 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;

如您所见，构建和逻辑都在一个地方，这使得在您的应用程序中实现逻辑变得容易。您可以将样式添加到 style.css 文件中并像我一样导入它。只需给您的标签 aclassName以在 css 中访问它们。我希望我能帮助你。如果您还有其他问题，请回复:)

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

推荐阅读