Javascript 创建简单易懂的排行榜

我想知道如何在我的html/js代码中编写一个简单的排行榜，并在游戏结束时给出分数。我有一个级别、分数和clickcount分数要注册

我对数据库和服务器之类的东西没有任何知识，所以我真的想保持它的“简单”，因为我也想了解我输入的内容

window.addEventListener（“加载”，函数（）{
//常数
var游戏宽度=640；
var GAME_高度=360；
//继续比赛
var gameLive=true；
//当前水平
风险等级=1；
//每次点击次数
var-clickCount=0；
//得分
var得分=0；
//敌人
变量=[{
x:100，//x坐标
y:100，//y坐标
速度：2，//速度单位为Y
w:40，//宽度
h:40/好的
},
{
x:200，
y:0，
速度:2,，
w:40，
h:40
},
{
x:330，
y:100，
速度:3,，
w:40，
h:40
},
{
x:450，
y:100，
斯皮蒂：-3，
w:40，
h:40
}
];
//玩家对象
变量播放器={
x:10，
y:160，
speedX:2.5，
isMoving:false，//跟踪玩家是否移动
w:40，
h:40
};
//目标对象
var目标={
x:580，
y:160，
w:50，
h:36
}
//瓦尔宗德瓦尔德酒店
var img={}；
var movePlayer=函数（）{
单击计数+=1；
player.isMoving=true；
document.getElementById（'clickCount'）。innerHTML=clickCount；
}
var stopPlayer=函数（）{
player.isMoving=false；
}
//抓住画布和上下文
var canvas=document.getElementById（“mycanvas”）；
var ctx=canvas.getContext（“2d”）；
//事件侦听器以移动播放机
canvas.addEventListener（'mousedown'，movePlayer）；
canvas.addEventListener（'mouseup'，stopPlayer）；
canvas.addEventListener（'touchstart'，movePlayer）；
canvas.addEventListener（'touchend'，stopPlayer）；
//img负载
var load=function（）{
img.player=新图像（）；
img.player.src='images/ping.png'；
img.background=新图像（）；
img.background.src='images/sea.png'；
img.敌军=新图像（）；
img.敌军.src='images/敌军.png'；
img.goal=新图像（）；
img.goal.src='images/fish.png'；
};
//更新逻辑
var update=函数（）{
//看看你是否赢了这场比赛
如果（检查碰撞（球员、目标））{
//级别+1
级别++；
//控制台水平仪
控制台日志（级别）；
//让球员回到原位
player.x=10；
player.y=160；
//使敌人的速度提高1
//使敌人的速度提高1
敌人。forEach（功能（敌人）{
如果（速度>0）{
敌人；
}否则{
敌人；
}
});
}
//更新播放器
if（player.isMoving）{
player.x=player.x+player.speedX；
分数+=1；
}
forEach（函数（元素、索引）{
//检查是否与播放器发生碰撞
if（检查碰撞（玩家、元素））{
//停止游戏
gameLive=false；
//提醒关卡/积分/游戏结束/并单击计数
警报（“游戏结束！”+“\n”+“\n”+”等级：“+等级+”\n“+”分数：“+分数+”\n“+”点击计数：“+”+点击计数）；
//重新加载页面
window.location=“”；
};
//调动敌人
元素y+=元素y；
//检查边界
如果（元素y=游戏高度-50）{
元素y=游戏高度-50；
元素*=-1；
}
});
};
//在屏幕上显示游戏
var draw=function（）{
//清理画布
ctx.clearRect（0，0，游戏宽度，游戏高度）；
//画背景
ctx.drawImage（img.background，0,0）；
//平局球员
ctx.drawImage（img.player，player.x，player.y）；
//招兵买马
forEach（函数（元素、索引）{
ctx.drawImage（img.敌军，element.x，element.y）；
});
//平局
ctx.drawImage（img.goal，goal.x，goal.y）；
//用于查看画布中的标高
//色点
ctx.fillStyle=“#339900”；
//字体点
ctx.font=“60px Michroma”；
//水平淋浴
ctx.fillText（第10、55级）；
//点阵雨
ctx.font=“15px Michroma”；
ctx.fillText（分数585,30）；
};
//每秒执行多次
var步骤=函数（）{
更新（）；
draw（）；
如果（gameLive）{
window.requestAnimationFrame（步骤）；
}
};
//检查两个矩形之间的碰撞
var checkCollision=函数（rect1，rect2）{
var closeOnWidth=Math.abs（rect1.x-rect2.x）与脚本集成的快速数据库设置可以是Google的Firebase数据库




例如，在运行Firebase web门户以设置帐户和项目后，您可以在JS文件中使用以下内容将记录写入数据库：

var config = {
    apiKey: "yourApiKey",
    authDomain: "yourProjectId.firebaseapp.com",
    databaseURL: "https://yourDatabaseName.firebaseio.com"
};
firebase.initializeApp(config);

// Get a reference to the database service
var database = firebase.database();

function writeUserData(userName, clickCount, score) {
    firebase.database().ref('highscores/' + name).set({
    userName: userName,
    clickCount: clickCount,
    score: score
    });
}

嗯，出于某种原因，这是真的nothing@JaimyVanGyseghem你遵守Firebase文档上的所有说明了吗？你不能只是在答案中复制和粘贴代码；你必须学会如何使用Firebase数据库来了解如何从中保存和加载数据。嘿，大卫！你给我的链接中的每一步我都做了，我看不到当我打开webbrowser时，它上有新的东西