html 如何为游戏创建云变量(高分

k10s72fa 于 2022-12-21 发布在其他

关注(0)|答案(1)|浏览(121)

<script>
// I want to create a cloud variable (high score)
// But I don't know how. 
var click = 0;
document.getElementById("High_score").innerHTML = cloud_varible;
function btn(){
click ++;
document.getElementById("p").innerHTML = click;
}
if (clicks < cloud_varible){
clicks = cloud_varible
document.getElementById("High_score").innerHTML = cloud_varible;
}
</script>
<button id="btn" onclick="btn();">click</button>
<p id="p">clicks: </p>
<p id="High_score"></p>

我看过各种网站，但似乎没有一个能解决我的问题。我有JavaScript的中级基础知识。HTML的中级高级知识和CSS的中级知识以及PHP的基础知识。

Html

来源：https://stackoverflow.com/questions/74828521/how-do-would-i-create-a-cloud-varible-high-score-for-a-game

1条答案

按热度按时间

fruv7luv1#

我对这个问题的解决方案的看法需要您稍微熟悉一下Node。
我们要做的是创建一点后端逻辑来存储我们的分数。当你谈论“云”时，它实际上只是一台可以从任何地方访问的计算机。我们将使用Node和Express（一个常见的组合）来创建一个小型API，以读写本地JSON文件，该文件包含球员姓名以及他们的分数
首先让我们了解一下后端结构

const express = require("express");
var fs = require("fs")
const cors = require('cors')
var bodyParser = require('body-parser')

Express：这使得API和端点创建变得超级快速和简单
FS：这允许我们读写本地文件
主体解析器：这使我们可以从HTML页面读取传入数据

const app = express();
app.use(express.json())
app.use(cors())
app.use(bodyParser.urlencoded({extended: false}));

以上是设置express来使用我们想要的所有中间件
现在让我们看看我们的小型API的端点，我们将有2个端点。一个用于更新分数，一个用于获取当前的高分。要更新分数，我们将使用POST端点

app.post("/updateScore",(req,res) =>{
    console.log(req.body)
    obj = {
            highscore:req.body.highscore,
            playerName:req.body.playerName
    }
    fs.writeFile("score.json",JSON.stringify(obj),() =>{
        console.log("writing file")
    })
})

在这个POST端点中，我们以json对象的形式获取一些值。这个对象包含了球员的名字和他们的分数。然后我们将得到的分数和名字写入一个json文件。这个文件被保存在服务器的本地存储中，以便阅读
接下来是GET端点

app.get("/score", (req,res) => {
    console.log()
    fs.readFile("./score.json","utf-8",(err,data)=>{
        console.log("ReadingFile")
        parsedData = JSON.parse(data)
        console.log(parsedData)
        res.json(parsedData)
    })
})

GET端点读取服务器上json文件的内容，然后发送回相关信息（在本例中是分数和名称）
最后，我们将在端口3000上启动服务器

app.listen("3000", () => {
    console.log(`Server listening on 3000`);
  });

这就是我们在后台需要的所有信息。现在我们可以在前端页面上工作，将显示给您的用户。
我们需要两个函数在前端，第一个将检索存储在服务器上的当前分数。第二个将更新存储在服务器上的分数。我已经完成了他们如下

function getHighScore(){
      fetch("http://localhost:3000/score")
      .then((res)=>{
        return(res.json())
      })
      .then((res) => {
        console.log(res)
        document.getElementById("highScore").innerText = res.playerName + ": " + res.highscore
        return(res)
      })
    }

上面的函数向我们之前设置的端点发出GET请求，然后从该端点获取响应并相应地更新HTML

function setHighScore(name, score){
      fetch("http://localhost:3000/updateScore",{
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({
          playerName: name,
          highscore: score
        })
      })
      .then(()=>{
        console.log("Here")
        getHighScore()
      })
    }

上面的函数向我们的端点表单发出了一个POST请求。这次它向服务器提供了相关信息，以相应地更新存储的分数。需要注意的是，在我们更新服务器上的高分后，我们也希望显示这个分数，你会注意到我们在承诺的末尾也调用了getHighScore()函数。
最后一步是将所有内容放在HTML文档中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gift</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="main">
    <div>
      High Score:
    </div>
    <div id="highScore">
      0
    </div>
    <div>
      <button onclick="setHighScore('Josh',5)">Set New Score</button>
    </div>
  </div>
  <script>
    function getHighScore(){
      fetch("http://localhost:3000/score")
      .then((res)=>{
        return(res.json())
      })
      .then((res) => {
        console.log(res)
        document.getElementById("highScore").innerText = res.playerName + ": " + res.highscore
        return(res)
      })
    }
    function setHighScore(name, score){
      fetch("http://localhost:3000/updateScore",{
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({
          playerName: name,
          highscore: score
        })
      })
      .then(()=>{
        console.log("Here")
        getHighScore()
      })
    }
    getHighScore()
  </script>   
</body>

</html>

赞(0）回复(0）举报 2022-12-21

我来回答

html 如何为游戏创建云变量(高分

1条答案

相关问题

热门标签

最新问答