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

<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基础知识。

我的解决方案需要您稍微熟悉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:这允许我们读取和写入本地文件
body-parser:这允许我们从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)
})
})

GETendpoint读取服务器上json文件的内容，然后返回相关信息(在本例中是分数和名称)

最后我们将在端口3000上启动服务器

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

这就是我们在后端需要的所有信息。现在我们可以在将显示给用户的前端页面上工作了。

我们在前端端需要2个函数，第一个将检索存储在服务器上的当前分数。第二个将更新存储在服务器上的分数。我已经完成了它们如下

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>

相关内容

最新更新

热门标签：