Battleship V1.0.2

Just a little update to the app. Here it is now:

BattleshipV1.0.2.png

In this version, I’ve focused mainly on the design – making subtle changes here and there.

  • Firstly I made the background color lighter
  • Shadow for the ‘board’
  • Placed the message area below the input field

I’ve also used a table to keep the input field and the button aligned

Leaderboard: The Plan

I’m going to use a table here too, with “Username” and “Score” as headers. Then in each table data goes the corresponding…well…data. And the flow is as follows:

  • User is forced to input a username blurring all the game area
  • User inputs a username, thanked and the blur is removed.
  • After all the ships have been sunk, these things should happen:
    • User is offered to play the game again, initiating a page refresh
    • The input field gets disabled
    • The user’s username and score is displayed in the leaderboard

How to make the leaderboard

I’m thinking the leaderboard is a combination of JavaScript and PHP. After a user inputs a username it gets stored in the database and it gets retrieved after the game is over. The username is then added to an unordered list by using the appendChild() function of JavaScript.

The same goes with the score. It should be wrapped in a span, get posted in the database and gets displayed on the leaderboard.