SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: JS Mini Game

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    79
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    JS Mini Game

    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. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    933
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    79
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by solidcodes View Post
    @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.
    Here you go:

    image.png

    image.png

    image.png

    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.
    Owner of uReviews & MovieDB - Movie Database

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by theunreal View Post
    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?
    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.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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 .off() method to remove the event listener after a certain period of time).
    Let us know how you get on.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •