Question

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

我对数据库和服务器等一无所知，所以我真的想保持它“简单”，因为我也想了解自己在输入什么。

window.addEventListener("load", function() {

  //constants
  var GAME_WIDTH = 640;
  var GAME_HEIGHT = 360;

  //keep the game going
  var gameLive = true;

  //current level
  var level = 1;

  //Count per click
  var clickCount = 0;

  //Score
  var score = 0;

  //enemies
  var enemies = [{
      x: 100, //x coordinate
      y: 100, //y coordinate
      speedY: 2, //speed in Y
      w: 40, //width
      h: 40 //heght
    },
    {
      x: 200,
      y: 0,
      speedY: 2,
      w: 40,
      h: 40
    },
    {
      x: 330,
      y: 100,
      speedY: 3,
      w: 40,
      h: 40
    },
    {
      x: 450,
      y: 100,
      speedY: -3,
      w: 40,
      h: 40
    }
  ];

  //the player object
  var player = {
    x: 10,
    y: 160,
    speedX: 2.5,
    isMoving: false, //keep track whether the player is moving or not
    w: 40,
    h: 40
  };

  //the goal object
  var goal = {
    x: 580,
    y: 160,
    w: 50,
    h: 36
  }
  // var zonder waarde
  var img = {};

  var movePlayer = function() {
    clickCount += 1;
    player.isMoving = true;
    document.getElementById('clickCount').innerHTML = clickCount;

  }

  var stopPlayer = function() {
    player.isMoving = false;
  }


  //grab the canvas and context
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");

  //event listeners to move player
  canvas.addEventListener('mousedown', movePlayer);
  canvas.addEventListener('mouseup', stopPlayer);
  canvas.addEventListener('touchstart', movePlayer);
  canvas.addEventListener('touchend', stopPlayer);

  //img load
  var load = function() {
    img.player = new Image();
    img.player.src = 'images/ping.png';

    img.background = new Image();
    img.background.src = 'images/sea.png';

    img.enemy = new Image();
    img.enemy.src = 'images/enemy.png';

    img.goal = new Image();
    img.goal.src = 'images/fish.png';
  };

  //update the logic
  var update = function() {



    //check if you've won the game
    if (checkCollision(player, goal)) {

      // level +1
      level++;
      // level in console 
      console.log(level);

      // get player back in position
      player.x = 10;
      player.y = 160;
      //increase the speed of the enemies by 1

      //increase the speed of the enemies by 1
      enemies.forEach(function(enemies) {
        if (enemies.speedY > 0) {
          enemies.speedY++;
        } else {
          enemies.speedY--;
        }
      });

    }

    //update player
    if (player.isMoving) {
      player.x = player.x + player.speedX;
      score += 1;
    }


    enemies.forEach(function(element, index) {

      //check for collision with player
      if (checkCollision(player, element)) {
        //stop the game
        gameLive = false;

        // alert for the level/ points/game over/ and click count
        alert('Game Over!' + "\n" + "\n" + "Level: " + level + "\n" + "Score: " + score + '\n' + "Click count:" + " " + clickCount);

        //reload page
        window.location = "";
      };

      //move enemy
      element.y += element.speedY;

      //check borders
      if (element.y <= 10) {
        element.y = 10;
        //element.speedY = element.speedY * -1;
        element.speedY *= -1;
      } else if (element.y >= GAME_HEIGHT - 50) {
        element.y = GAME_HEIGHT - 50;
        element.speedY *= -1;
      }

    });
  };

  //show the game on the screen
  var draw = function() {

    //clear the canvas
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

    //draw background
    ctx.drawImage(img.background, 0, 0);

    //draw player
    ctx.drawImage(img.player, player.x, player.y);

    //draw enemies
    enemies.forEach(function(element, index) {
      ctx.drawImage(img.enemy, element.x, element.y);
    });

    //draw goal
    ctx.drawImage(img.goal, goal.x, goal.y);

    //for seeing the level in canvas

    //color points
    ctx.fillStyle = "#339900";
    //font points
    ctx.font = "60px Michroma";
    //level shower
    ctx.fillText(level, 10, 55);
    //point shower
    ctx.font = "15px Michroma";
    ctx.fillText(score, 585, 30);
  };

  //gets executed multiple times per second
  var step = function() {

    update();
    draw();

    if (gameLive) {
      window.requestAnimationFrame(step);
    }
  };

  //check the collision between two rectangles
  var checkCollision = function(rect1, rect2) {

    var closeOnWidth = Math.abs(rect1.x - rect2.x) <= Math.max(rect1.w, rect2.w);
    var closeOnHeight = Math.abs(rect1.y - rect2.y) <= Math.max(rect1.h, rect2.h);
    return closeOnWidth && closeOnHeight;

  }

  //initial kick
  load();
  step();
});

<div id="centerCanvas">
  <canvas id="mycanvas" width="640" height="360"></canvas>
</div>

<div id="clickCount"><span>0</span></div>

Answer 1

与脚本集成的快速数据库设置可以是Google的Firebase数据库。

Add Firebase to your Javascript Project

Installation & Setup of Database in Javascript

How to Structure Your Databse

作为示例，通过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
    });
}

用分数创建一个简单的排行榜

1 个答案: