2 Replies Latest reply on Jan 16, 2014 2:44 AM by tonytamb

    Canvas - controlling object with js keypress function

    tonytamb Level 1

      Hi,

       

      Using Flash CC and a HTML5 Canvas I am trying to control a ball (instance name ball_mc) on stage with the arrow keys using JS. Tried a few variations, but no luck. Any suggestions?

      ty

       

      this.addEventListener("keypress", keyDownHandler.bind(this), true);

       

      function keyDownHandler(event) {

       

                // get which key the user pressed

                var key = event.which;

       

                switch (key) {

                               case 37: // left key

       

                                              // move the ball 1 left by subtracting 1 from ballX

       

                   this.ball_mc.x -= 1;

       

                   break;

       

                               case 39: // right key

       

                       // move the ball 1 right by adding 1 to ballX

                       this.ball_mc.x += 1;

       

                        break;

       

                }

        • 1. Re: Canvas - controlling object with js keypress function
          Sangeeta J Yelamali Employee Moderator

          Hi,

           

          You can try the following code .This will help you acheive the desired movement on key down .

           

          document.onkeydown = keyHandler.bind(this);

           

          function keyHandler(event) {

           

                      var e = event||window.event;

                      

                     switch (e.keyCode) {

                                   case 37: this.ball_mc.x-= 1;

           

                                                       break;

           

                                   case 39: this.ball_mc.x += 1;

           

                                                       break;

                          

                         

           

                                          }

          }

                                                                     

             

                     

          Thanks,

          Sangeeta      

          • 2. Re: Canvas - controlling object with js keypress function
            tonytamb Level 1

            Thanks a lot! That worked!

             

            Instead of var e = event||window.event I used var e = window.event;

             

            I added the up and down keys as well. Works well, however there is a problem:

             

            I'd like to press two keys at the same time, i.e. UP and LEFT together to get a vertical and horizontal movement at the same time. The code below only can do one key, i.e. movement at one time.

             

            When I did this in AS3 using the "Move with arrow keys" code snippet to get started it did just this. In that code snippet there are three seperate functions. one Eventlistener on the ball_mc, one to check KEY_DOWN and one to check KEY_UP setting a keypressed variable to true or false. I guess I have to do a similar thing with JS. Any suggestions?

            ty!

             

            --------------

            document.onkeydown = keyHandler.bind(this);

             

            function keyHandler(event) {

              //var e = event || window.event;

              var e = window.event;

             

               switch (e.keyCode) {

                        case 37:

                                                 this.ball_mc.x += -2;

                                                 break;

                                  case 39:

                                                this.ball_mc.x += 2;

                                                 break;

                         case 38:

                              this.ball_mc.y += -2;

                              break;

                         case 40:

                              this.ball_mc.y += 2;

                              break;

                                    }

            }