8 Replies - 1227 Views - Last Post: 21 February 2019 - 01:37 PM Rate Topic: -----

#1 Lumpychips   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 19

How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 12:38 PM

I was wondering how I could write in my html/js code a simple leaderboard with the score at the end of the game. I have a level, score and a clickcount score that I want to register.

I don't have any knowledge with databases and server and such, so I really want to keep it 'simple' because I also want to understand what I am typing.


Here is my Javascript code:

 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();
});




Thanks for all the help!

Is This A Good Question/Topic? 0
  • +

Replies To: How to create a leaderboard with Javascript/HTML

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15215
  • View blog
  • Posts: 60,897
  • Joined: 12-June 08

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 12:43 PM

... ah.. so is there a database in play? How are you planning on persisting this data?
Was This Post Helpful? 0
  • +
  • -

#3 Lumpychips   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 19

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 12:48 PM

No database yet, i only have this alert system that gives you the information if you died. But i would like to give that information into a leaderboard. Thanks for the reply!
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15215
  • View blog
  • Posts: 60,897
  • Joined: 12-June 08

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 12:52 PM

A leader board would imply persistent storage. You would definitely need to look at a database.. or, I guess, in a pinch writing to a text file.
Was This Post Helpful? 0
  • +
  • -

#5 Lumpychips   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 19

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 12:53 PM

Hmmm, what would you recomment? How do i start a database and link it to my Javascript/HTML file? Thanksfor the help #4 modi123_1! I appreciate it!
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15215
  • View blog
  • Posts: 60,897
  • Joined: 12-June 08

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 12:56 PM

Your webhosting should have a DB... or if you have XAMP/WAMP/LAMP/MAMP installed so would be a DB like Maria or Mysql.

You would need a server side language like php, ruby, python, perl, asp.net, etc to deal with getting data to and from the db.
Was This Post Helpful? 0
  • +
  • -

#7 Lumpychips   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 19

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 01:10 PM

I installed MAMP a while back but didnt know how to work with it to make a db for the leadrboard. Any requests on tutorials or something? (only have knowledge from html/css/js so its all pretty new to put a db in it)
Was This Post Helpful? 0
  • +
  • -

#8 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15215
  • View blog
  • Posts: 60,897
  • Joined: 12-June 08

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 01:16 PM

Check the php tutorials in the link at the top of the page. PRetty sure there's a 'db interaction' in there.
Was This Post Helpful? 0
  • +
  • -

#9 Lumpychips   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 19

Re: How to create a leaderboard with Javascript/HTML

Posted 21 February 2019 - 01:37 PM

Will check that out, thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1