Discussion :

[lefou123456]

Bonjour !

Je suis en train de développer un jeu d'échecs dans une page web, à l'aide d'un canvas (pour l'instant je fait plus un jeu de dames mais bon...)
Tout fonctionne comme je le veux sur un ordinateur (la sélection des cases et l'affichage des mouvements possibles), cela dit sur mobile je suis face à un petit problème.
Lors de l'update du canvas, pendant un cours instant un voile bleu s'affiche et je ne comprends pas vraiment à quoi c'est dû .
Au départ, lors de chaque update je redésinnais tous les éléments du plateau, je pensais que le chargement était trop conséquent et donc visible sur les téléphones, mais après
avoir implémenté une selection d'éléments à redessiner, le phénomène persiste et là, je ne vois plus quoi faire

voici le projet sur github ainsi que la page web : https://github.com/Louis700/Chess-game ; https://louis700.github.io/Chess-game/

Merci de l'attention

[lefou123456]

J'utilise un pattern decorator :
Lors d'un clique, après avoir changé l'état de toutes les cases concernées, j'appelle board.draw() puis celle-ci va appeler la méthode draw() de toutes les cases dans l'array board.squaresToUpdate
qui celle-ci vont se déssiner et appeler la méthode draw() du pion si elles en contiennent un !

Je vois pas vraiment d'où ça peut venir, ça fait un an que j'utilise des canvas partout et c'est la première fois que je vois ça

[lefou123456]

Je crois que j'ai compris !
Il semblerais que lorsqu'on clique avec le téléphone, tout le canvas est sélectionné !
Maintenant je dois comprendre comment empêcher ça... Peut être avec un peu de css ?

[lefou123456]

J'ai essayé d'appliquer ces propriétés au canvas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.noSelect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
}

Mais aucun changement, alors que ça marche parfaitement avec le texte...
C'est peut être pas l'origine du problème

[lefou123456]

Problème réglé !

C'est la propriété CSS cursor: pointer qui me jouait des tours, si je l'enlève: plus de voile bleu !