HTML5 keyboard listening principle: capture monsters Game + code

HTML5 keyboard listening principle: capture monsters Game + code

HTML5 games are compiled by capturing monsters and using Canvas and other HTML5 skills. The following describes the implementation steps:

1. Create a game canvas:

. Code

1. Var canvas = document. createElement ("canvas ");
2. Var ctx = canvas. getContext ("2d ");
3. Canvas. width = 512;
4. Canvas. height = 480;
5. Document. body. appendChild (canvas );

   The first thing we need to do is to create a canvas element. I am doing this in JavaScript, instead of using HTML to demonstrate how to do it easily. Once we have the element we get a reference, set its size and it is attached to the body of the document. Front-end framework sharing

   2. Images included:

   . Code
   1. Var bgReady = false;
   2. Var bgImage = new Image ();
   3. BgImage. onload = function (){
   4. BgReady = true;
   5. };
   6. BgImage. src = "images/background.png ";

      We load some images. I think it is as simple as possible to do this, so it is just an image, not a good class or thing wrapped up. Use bgReady to let the canvas know when it is safe to draw it.

      3. Game objects:

      . Code
      1. Var hero = {// hero
      2. Speed: 256, // 256 pixels per second
      3. X: 0,
      4. Y: 0
      5. };
      6. Var monster = {// monster
      7. X: 0,
      8. Y: 0
      9. };
      10. Var monstersCaught = 0; // catch several monsters

          4. Player input: front-end framework sharing

          . Code
          1. // Process keyboard input
          2. Var keysDown = {};
          3. AddEventListener ("keydown", function (e ){
          4. KeysDown [e. keyCode] = true;
          5. }, False );
          7. AddEventListener ("keyup", function (e ){
          8. Delete keysDown [e. keyCode];
          9. }, False );

             5. New games

             . Code
             1. // When a monster is captured, it must be executed
             2. Var reset = function (){
             3. Hero. x = canvas. width/2;
             4. Hero. y = canvas. height/2;
             5. // Make the monster appear somewhere in the scene (randomization)
             6. Monster. x = 32 + (Math. random () * (canvas. width-64 ));
             7. Monster. y = 32 + (Math. random () * (canvas. height-64 ));
             8. };

                6. Update objects:

                . Code
                1. Var update = function (modifier)
                2. {
                3. If (38 in keysDown) {// up
                4. Hero. y-= hero. speed * modifier;
                5. }
                6. If (40 in keysDown) {// down
                7. Hero. y + = hero. speed * modifier;
                8. }
                9. If (37 in keysDown) {// left
                10. Hero. x-= hero. speed * modifier;
                11. }
                12. If (39 in keysDown ){//
                13. Hero. x + = hero. speed * modifier;
                14. }
                15. // Are they touching?
                16. If (
                17. Hero. x <= (monster. x + 32)
                18. & Amp; monster. x <= (hero. x + 32)
                19. & Hero. y <= (monster. y + 32)
                20. & Amp; monster. y <= (hero. y + 32)
                21. ){
                22. ++ MonstersCaught;
                23. Reset ();
                24. }
                25. };

                    7. Rendering object: frontend Resource Sharing

                    . Code
                    1. Var render = function (){
                    2. If (bgReady ){
                    3. Ctx. drawImage (bgImage, 0, 0 );
                    4. }
                    6. If (heroReady ){
                    7. Ctx. drawImage (heroImage, hero. x, hero. y );
                    8. }
                    10. If (monsterReady ){
                    11. Ctx. drawImage (monsterImage, monster. x, monster. y );
                    12. }
                    14. // Score
                    15. Ctx. fillStyle = "rgb (250,250,250 )";
                    16. Ctx. font = "24px Helvetica ";
                    17. Ctx. textAlign = "left ";
                    18. Ctx. textBaseline = "top ";
                    19. Ctx. fillText ("gob1_caught:" + monstersCaught, 32, 32 );
                    20. };

                        8. Main game cycle:

                        . Code
                        1. Var main = function (){
                        2. Var now = Date. now ();
                        3. Var delta = now-then;
                        4. Update (delta/1000 );
                        5. Render ();
                        6. Then = now;
                        7. };

                           9. Start the game:

                           . Code
                           1. Reset ();
                           2. Var then = Date. now ();
                           3. SetInterval (main, 1 );