JS Mini Game

JavaScript
1

Hello. I have a browser-based game and I want to include in it a “Mini games” to train stats.
these games will be based on PHP, and JS.
These “mini games” are very simple, but I have no clue how to do this since I never been in this business before.
My goal, for the first mini game, is to make a mini game that challanges the user to click X Times on a key in the keyboard (such as “K”) in a limited time.
If the player passes, he will gain attack stat (just one query).
How do I start?

Thanks in advance…

2

@theunreal ;

Here is the summarize steps.

  1. Draw the layout of your game
  2. Draw the flowchart of the game
  3. Design the DataBase model.
  4. Design the Objects
  5. Write the table rules (DB)
  6. Write the detail functions/feature of the games.

Divide and conquer is the key.

I think it’s best to show your layout first to us.

I’m not sure if you are serious with this, but at least I show you the general steps.

3

This would be done using JavaScript.
You can use one of the keypress events (e.g. onkeydown) to track how many times the user has hit a certain key, then use setTimeout to check their score after a specified period of time.

Correspondingly, I’ve moved your thread to the JS forum and altered the title slightly.

Let me know if you need any help implementing the details.

4

Here you go:

No database for this game (I already have database with user staff etc, I will just have to update some rows in the user table)

I’m really goot with PHP but I have no idea how to impelement the JS part, thats why I need your help.

5

Hi there,

So, I made a little demo script to get you started.
You’ll want to listen for the keyup event, as otherwise someone could just keep a key pressed and rack up a high score.

Have a look at this and see if you can adapt it to your needs (you’ll want to look at setTimeout to limit the time the user has to press a key, as well as the [URL=“http://api.jquery.com/off/”].off() method to remove the event listener after a certain period of time).
Let us know how you get on.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery on keyUp</title>
  </head>
  
  <body>
    <p>Total keypresses: <span id="totalKeypresses">0</span><p>
    <p id="result"></p>
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      var totalKeypresses = 0;
      var keyCodes = {
        48: "0",
        49: "1",
        50: "2",
        51: "3",
        52: "4",
        53: "5",
        54: "6",
        55: "7",
        56: "8",
        57: "9",
        58: "0",
        65: "a",
        66: "b",
        67: "c",
        68: "d",
        69: "e",
        70: "f",
        71: "g",
        72: "h",
        73: "i",
        74: "j",
        75: "k",
        76: "l",
        77: "m",
        78: "n",
        79: "o",
        80: "p",
        81: "q",
        82: "r",
        83: "s",
        84: "t",
        85: "u",
        86: "v",
        87: "w",
        88: "x",
        89: "y",
        90: "z"
      }
      
      $("body").on("keyup", function(e){
        $("#result").text("Key recognized: " + keyCodes[e.keyCode]);
        
        totalKeypresses++;
        $("#totalKeypresses").text(totalKeypresses);
      });
    </script>
  </body>
</html>