web-dev-qa-db-fra.com

Quel est le meilleur moyen de créer des événements clés dans le canevas HTML5?

Suggérez le meilleur moyen de créer des événements clés pour le canevas HTML5. Je ne préfère aucune bibliothèque, mais si vous pensez que c'est la meilleure solution, répondez-y. Merci d'avance!

javascripthtml5canvaskeyboard
14
user1441816

Cela retournera le code clé:

<canvas id="myCanvas" width="200" height="100" style="background:green"></canvas>
<script type="text/javascript">
window.addEventListener('keydown',this.check,false);

function check(e) {
    alert(e.keyCode);
}
</script>

Si vous souhaitez une démonstration de différentes choses en fonction de la clé:

function check(e) {
    var code = e.keyCode;
    //Up arrow pressed
    if (code == 38)
        alert("You pressed the Up arrow key");
    else
        alert("You pressed some other key I don't really care about.");
}

Ou si vous avez une longue liste de clés à utiliser, faites-le en cas de problème:

function check(e) {
    var code = e.keyCode;
    switch (code) {
        case 37: alert("Left"); break; //Left key
        case 38: alert("Up"); break; //Up key
        case 39: alert("Right"); break; //Right key
        case 40: alert("Down"); break; //Down key
        default: alert(code); //Everything else
    }
}
16
Rhyono

Si vous souhaitez définir la gestion des événements de clé sur le <canvas> lui-même (et non sur window ou document), définissez un tabindex sur l'élément <canvas>. Notez que le canevas devra être mis au point pour capturer les événements clés.

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>

Voici comment cela se fait sur le site Processing.js .

Si vous ne souhaitez pas qu'une bordure apparaisse lorsque vous cliquez sur la toile, définissez son style sur outline: none.

8
Brian Duncan

J'écris un jeu de toile, et j'utilise le .addEventListener par défaut et déplace à travers le event.keyCodes qui l'accompagne. De plus, je n'écoute pas les événements clés sur l'élément Canvas, mais placez simplement l'auditeur dans la fenêtre.

window.addEventListener('keyup',keyUpListener,false);
window.addEventListener('keydown',keyDownListener,false);
1
Polyov

Utilisation de la classe:

var CONTROL = MOBILE_CONTROL();

Regardez cette classe:

function MOBILE_CONTROL (){

      this.X =  null;
      this.Y =  null;
      this.LAST_X_POSITION = null;
      this.LAST_Y_POSITION = null;
      this.MULTI_TOUCH = 'NO';
      this.MULTI_TOUCH_X1 = null;  
      this.MULTI_TOUCH_X2 = null;
      this.MULTI_TOUCH_X3 = null;
      this.MULTI_TOUCH_X4 = null;
      this.MULTI_TOUCH_X5 = null;
      this.MULTI_TOUCH_Y1 = null;
      this.MULTI_TOUCH_Y2 = null;
      this.MULTI_TOUCH_Y3 = null;
      this.MULTI_TOUCH_Y4 = null;
      this.MULTI_TOUCH_Y5 = null;
      this.MULTI_TOUCH_X6 = null;  
      this.MULTI_TOUCH_X7 = null;
      this.MULTI_TOUCH_X8 = null;
      this.MULTI_TOUCH_X9 = null;
      this.MULTI_TOUCH_X10 = null;
      this.MULTI_TOUCH_Y6 = null;
      this.MULTI_TOUCH_Y7 = null;
      this.MULTI_TOUCH_Y8 = null;
      this.MULTI_TOUCH_Y9 = null;
      this.MULTI_TOUCH_Y10 = null;
      this.MULTI_TOUCH_INDEX = 1;
      this.SCREEN = [window.innerWidth , window.innerHeight]; 
      this.SCREEN.W = this.SCREEN[0];
      this.SCREEN.H = this.SCREEN[1];
      //Application general
      this.AUTOR = "Nikola Lukic";
      this.APPLICATION_NAME = "mobile multi touch , system plugin for visual js .";


    }

    var CONTROL = new MOBILE_CONTROL();


    document.addEventListener('touchstart', function(event) 
    { 

    if (CONTROL.MULTI_TOUCH == 'NO') {
        var touch = event.touches[0];
        CONTROL.X = touch.pageX;
        CONTROL.Y = touch.pageY;
        console.log('TOUCH START AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );

    }
    else if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(CONTROL.MULTI_TOUCH_INDEX)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
      CONTROL.MULTI_TOUCH_INDEX = CONTROL.MULTI_TOUCH_INDEX + 1;


      }
    }
    CONTROL.MULTI_TOUCH = 'YES';

    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener('touchmove', function(event) 
    { 
    var touch = event.touches[0];
    CONTROL.X = touch.pageX;
    CONTROL.Y = touch.pageY;
    console.log('TOUCH MOVE AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    //#############
     if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(i)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
    }}
    //#############
    event.preventDefault();
    },false);
    //////////////////////////////////////////////////////// 
    document.addEventListener('touchend', function(event) 
    { 
    CONTROL.LAST_X_POSITION = CONTROL.X;  
    CONTROL.LAST_Y_POSITION = CONTROL.Y; 
    CONTROL.MULTI_TOUCH = 'NO';
    CONTROL.MULTI_TOUCH_INDEX = 1;
    CONTROL.MULTI_TOUCH_X1 = null;
    CONTROL.MULTI_TOUCH_X2 = null;
    CONTROL.MULTI_TOUCH_X3 = null;
    CONTROL.MULTI_TOUCH_X4 = null;
    CONTROL.MULTI_TOUCH_X5 = null;
    CONTROL.MULTI_TOUCH_X6 = null;
    CONTROL.MULTI_TOUCH_X7 = null;
    CONTROL.MULTI_TOUCH_X8 = null;
    CONTROL.MULTI_TOUCH_X9 = null;
    CONTROL.MULTI_TOUCH_X10 = null;
    CONTROL.MULTI_TOUCH_Y1 = null;
    CONTROL.MULTI_TOUCH_Y2 = null;
    CONTROL.MULTI_TOUCH_Y3 = null;
    CONTROL.MULTI_TOUCH_Y4 = null;
    CONTROL.MULTI_TOUCH_Y5 = null;
    CONTROL.MULTI_TOUCH_Y6 = null;
    CONTROL.MULTI_TOUCH_Y7 = null;
    CONTROL.MULTI_TOUCH_Y8 = null;
    CONTROL.MULTI_TOUCH_Y9 = null;
    CONTROL.MULTI_TOUCH_Y10 = null;
    console.log('LAST TOUCH POSITION AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener("touchcancel", function(event) 
    { 
    console.log('BREAK - LAST TOUCH POSITION AT:(X' + CONTROL.X + '(,(' + CONTROL.Y + ')' );
    }, false);
    ////////////////////////////////////////////////////////
0
Nikola Lukic