Faire des boutons de jeux pour web-mobile

Version imprimable

Voir 40 message(s) de cette discussion en une page

11/12/2022, 13h43
DevWebMobile

Je m'aperçois encore de deux petites subtilités de chrome smartphone low-entry:

- Si un objet a des touchevent ça désactive les mouseEvent, donc il faut vraiment tout faire avec le touchevent (je parle dans le cas d'un paddle hein, pas pour des jeux à clics).

- Le paddle doit être affiché dans le canvas, sur les smartphone low-entry ça ne fonctionne pas avec des objets DOM car ils ne gèrent pas deux touchmove sur deux objets différents. (en prime ,afficher des choses par dessus le canvas consomme plus de ressources cpu-gpu, donc l'affichage du paddle doit se faire avec les sprites du jeu). Il faut donc vraiment deux interfaces & affichages différents selon le contexte desktop/smartphone.

- Le bouton fullscreen doit être sur l'event touchEnd, sur touchStart il y'a un bug d'affichage, le canvas est mal dimensionné, je ne sais pas pourquoi.

- Quand le jeu n'est pas en fullscreen les boutons peuvent restés bloqués en "on" quand le doigt quitte le canvas. Il est donc bon d'actionner le fullscreen par défaut dès que le joueur clique "start".

Maintenant la difficulté va être au niveau du design des formes géométriques invisibles sous la croix qui détectent la "collision" avec le centre du pouce. Si je raisonne bêtement avec une grille 3x3 ça n'est pas bon car le pouce va trop facilement taper dans les cases diagonale. Il ne faut pas raisonner avec un joystick croix mais un joystick rond puisque c'est bien ce qui correspond aux x/y renvoyés par les event touch.

A priori je vais tester d'abord comme ça:

- Un cercle extérieur pour définir quand le pouce est sorti de la manette (que je pense faire un peu plus large)
- Un cercle central qui définit la zone morte, le pouce doit d'éloigner du centre pour actionner les directions.
- 4 droites y=2x, y=x/2, y=-x/2, y=-2x, ce qui fait que les zones diagonales sont un peu plus petites que les zones aa.

Bon, mais je ne peux pas dire si mon algo est ergonomique tant que je ne l'ai pas testé avec mon pouce.
12/12/2022, 10h12
DevWebMobile

Je n'aime pas non plus mon second schéma. Les diagonales sont encore trop faciles d'accès.

Je griffonne d'autres possibilités.
12/12/2022, 10h25
DevWebMobile

Je sais que pour faire du vrai boulot de pro il faut un "touchpad" spécifique à chaque jeu, mais les jeux web c'est facturé environ 1500€ donc dans ce milieu il faut être productif... Donc sachant qu'on fait plutôt des pacman que des street fighter je ne vais pas trop m'attarder sur les diagonales (dont je risque de ne jamais faire usage, en fait).

Donc pour l'instant je vais tester ça sur mon pad 128x128:

- droites y=x et y=-x pour tester haut/bas/gauche/droite
- un carré de zone morte 16x16 au milieu
- 4 cassés 16x16 dans les coins pour faire les touch diagonale

Je vous montrerai le test si j'ai fini ce soir.
12/12/2022, 12h30
DevWebMobile

1 pièce(s) jointe(s)

Au lieu de vous faire mal au crâne avec mon charabia de prog graphique c'est mieux de scanner mes dessins.

Pièce jointe 630546
12/12/2022, 13h00
DevWebMobile

Ca ne me plaît pas il va encore y'avoir des ambiguités sur X/Y.

Je commence à me demander si ça serait pas plus malin de faire un codage de collision standard, avec une grille.
12/12/2022, 13h23
DevWebMobile

Bon allez, testons des maths crétins,

L = 0001 = 1
R = 0010 = 2
U = 0100 = 4
D = 1000 = 8

LU = 0101 = 5
LD = 1001 = 9
RU = 0110 = 6
RD = 1010 = 10

Le tableau javascript doit donc ressembler à un truc comme ça:

const CROSS = [
5, 5, 4, 4, 4, 4, 6, 6,
5, 5 ,4, 4, 4, 4, 6, 6,
1, 1 ,0, 4, 4, 0, 2, 2,
1, 1, 1, 0, 0, 2, 2, 2,
1, 1, 1, 0, 0, 2, 2, 2,
1, 1 ,0, 8, 8, 0, 2, 2,
9, 9, 8, 8, 8, 8,10,10,
9, 9, 8, 8, 8, 8,10,10
];

Voilà... je teste et je regarde ce que ça donne...
12/12/2022, 13h41
DevWebMobile

Non en fait mon idée était nulle va encore y'avoir des ambiguités X/Y...

Je vais déjà essayer le truc avec 2 cercles et 4 droites, c'est le plus simple au niveau visuel et maths.

Dès fois j'ai l'impression que développeur est un boulot à peu près aussi chiant que footballeur.

Je remercie les smartphone pour tout le bien qu'ils font à la société avec les cadeaux surprise dans les bateaux (covid, frelons, etc)
12/12/2022, 13h57
DevWebMobile

De toutes façons Lundi personne a envie de bosser.

bon... la croix m'a l'air de fonctionner... je vous laisse tester.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
// canvas dimensions
var SW = 240;
var SH = 160;
 
// render zone
var CONTAINER = null;
var CAN = null;
var CTX2D = null;
 
// colors
const CO = ['#0000FF', '#FF0000'];
 
// left buttons zone: 8-directions cross
 
const CROSS_RAD = 32;
const CROSS_X = CROSS_RAD;
const CROSS_Y = SH - CROSS_RAD;
var CROSS_ON = 0;
 
var LEFT_ON = 0;
var RIGHT_ON = 0;
var UP_ON = 0;
var DOWN_ON = 0;
 
// right buttons zone: A B
const AB_W = 32 * 2;
const AB_X = SW - AB_W;
const AB_H = 32 * 2;
const AB_Y = CROSS_Y - AB_H / 2;
var AB_ON = 0;
 
// fullscreen button
const FULLSCREEN_RECT = {left: SW - 16, width: 16, top: 0, height: 16};
 
// show txt
function trace(s)
{
    document.getElementById('tracer').innerHTML += s + '<br/>';
}
 
// coordinates relative to canvas
function Cx(x)
{
    return x * CAN.width / CONTAINER.offsetWidth;
}
function Cy(y)
{
    return y * CAN.height / CONTAINER.offsetHeight;
}
 
function DrawButtons()
{
    // cross
 
    CTX2D.fillStyle = CO[ LEFT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - CROSS_RAD, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ RIGHT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X + 8, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ UP_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y - CROSS_RAD, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ DOWN_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y + 8, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    // AB
 
    CTX2D.fillStyle = CO[ AB_ON ];
    CTX2D.beginPath();
    CTX2D.rect(AB_X, AB_Y, AB_W, AB_H);
    CTX2D.closePath();
    CTX2D.fill();
}
 
function main()
{
    //alert("main");
 
    CONTAINER = document.getElementById('container');
 
    CAN = document.createElement('canvas');
    CAN.width = SW;
    CAN.height = SH;
    CAN.style.backgroundColor = '#000000';
    CAN.style.width = "100%";
    CAN.style.height = "100%";
    CONTAINER.appendChild(CAN);
 
    CTX2D = CAN.getContext('2d');
    CTX2D.strokeStyle = '#FFFFFF';
    CTX2D.fillRect(0, 0, SW, SH);
 
    // draw fullscreen button
 
    CTX2D.fillStyle = CO[0];
    CTX2D.beginPath();
    CTX2D.rect(FULLSCREEN_RECT.left, FULLSCREEN_RECT.top, FULLSCREEN_RECT.width, FULLSCREEN_RECT.height);
    CTX2D.closePath();
    CTX2D.fill();
 
    // touch events
 
    CAN.ontouchstart = OnTouchStart;
    CAN.ontouchend = OnTouchEnd;
    CAN.ontouchmove = OnTouchMove;
 
    // start video routine
    window.requestAnimationFrame(VideoRoutine);
}
 
function VideoRoutine(e)
{
    DrawButtons();
 
    window.requestAnimationFrame(VideoRoutine);
}
 
function Touch(e, on)
{
    e.preventDefault();
 
    const tl = e.changedTouches;
    const r = e.target.getBoundingClientRect();
    const halfWidth = Cx((r.right - r.left) / 2);
 
    //let inLeft = 0, inRight = 0;
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - r.left);
        const y = Cy(tl[i].clientY - r.top);
 
        if (x < halfWidth)
        {
            // left: test against cross
 
 
            // test point / circle
 
            const dx = x - CROSS_X;
            const dy = y - CROSS_Y;
            const dist = Math.sqrt(dx * dx + dy * dy);
 
            CROSS_ON = 0 + ( dist <= CROSS_RAD && dist >= CROSS_RAD/4);
 
            UP_ON = DOWN_ON = LEFT_ON = RIGHT_ON = 0;
 
            if ( CROSS_ON && on )
            {
                // test against lines
 
                const A = dy >=  dx/2;
                const B = dy >=  dx*2;
                const C = dy >= -dx*2;
                const D = dy >= -dx/2;
 
                DOWN_ON = 0+( A && D );
                UP_ON = 0+( !A && !D );
                LEFT_ON = 0+( !C && B );
                RIGHT_ON =  0+( C && !B );
 
            }
 
        }
        else
        {
            // right: test against AB
 
            AB_ON = 0;
 
            if (on)
            {
 
                // test point / AABB
 
                const dx = x - AB_X;
                const dy = y - AB_Y;
 
                AB_ON = 0 + (dx >= 0 && dx <= AB_W && dy >= 0 && dy <= AB_H);
 
            }
 
        }
 
    }
 
}
 
function OnTouchStart(e)
{
    Touch(e, 1);
}
 
function OnTouchEnd(e)
{
    Touch(e, 0);
    OnMouseUp(e);
}
 
function OnTouchMove(e)
{
    Touch(e, 1);
}
 
function ToggleFullScreen()
{
    if (!document.fullscreen)
    {
        CONTAINER.requestFullscreen();
    } else
    {
        document.exitFullscreen();
    }
 
}
 
function OnMouseUp(e)
{
    const rec = e.target.getBoundingClientRect();
    const tl = e.changedTouches;
    const fsr = FULLSCREEN_RECT;
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - rec.left);
        const y = Cy(tl[i].clientY - rec.top);
 
        // check fullscreen button
 
        const dx = x - fsr.left;
        const dy = y - fsr.top;
 
        if (dx >= 0 && dx < fsr.width && dy >= 0 && dy < fsr.height)
        {
            ToggleFullScreen();
        }
    }
 
}

Bon... testé les boutons A B, ça m'a l'air de fonctionner aussi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
// canvas dimensions
var SW = 240;
var SH = 160;
 
// render zone
var CONTAINER = null;
var CAN = null;
var CTX2D = null;
 
// colors
const CO = ['#0000FF', '#FF0000'];
 
// left buttons zone: 8-directions cross
 
const CROSS_RAD = 32;
const CROSS_X = CROSS_RAD;
const CROSS_Y = SH - CROSS_RAD;
 
var LEFT_ON = 0;
var RIGHT_ON = 0;
var UP_ON = 0;
var DOWN_ON = 0;
 
// right buttons zone: A B
 
const AB_RAD = CROSS_RAD;
const AB_X = SW-AB_RAD;
const AB_Y = CROSS_Y;
 
var A_ON = 0;
var B_ON = 0;
 
// fullscreen button
const FULLSCREEN_RECT = {left: SW - 16, width: 16, top: 0, height: 16};
 
// show txt
function trace(s)
{
    document.getElementById('tracer').innerHTML += s + '<br/>';
}
 
// coordinates relative to canvas
function Cx(x)
{
    return x * CAN.width / CONTAINER.offsetWidth;
}
function Cy(y)
{
    return y * CAN.height / CONTAINER.offsetHeight;
}
 
function DrawButtons()
{
    // cross
 
    CTX2D.fillStyle = CO[ LEFT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - CROSS_RAD, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ RIGHT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X + 8, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ UP_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y - CROSS_RAD, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ DOWN_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y + 8, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    // AB
 
    CTX2D.fillStyle = CO[ A_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X-AB_RAD/2, AB_Y+AB_RAD/2, AB_RAD/2, 0, Math.PI*2);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ B_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X+AB_RAD/2, AB_Y-AB_RAD/2, AB_RAD/2, 0, Math.PI*2);
    CTX2D.closePath();
    CTX2D.fill();
 
}
 
function main()
{
 
    CONTAINER = document.getElementById('container');
 
    CAN = document.createElement('canvas');
    CAN.width = SW;
    CAN.height = SH;
    CAN.style.backgroundColor = '#000000';
    CAN.style.width = "100%";
    CAN.style.height = "100%";
    CONTAINER.appendChild(CAN);
 
    CTX2D = CAN.getContext('2d');
    CTX2D.strokeStyle = '#FFFFFF';
    CTX2D.fillRect(0, 0, SW, SH);
 
    // draw fullscreen button
 
    CTX2D.fillStyle = CO[0];
    CTX2D.beginPath();
    CTX2D.rect(FULLSCREEN_RECT.left, FULLSCREEN_RECT.top, FULLSCREEN_RECT.width, FULLSCREEN_RECT.height);
    CTX2D.closePath();
    CTX2D.fill();
 
    // touch events
 
    CAN.ontouchstart = OnTouchStart;
    CAN.ontouchend = OnTouchEnd;
    CAN.ontouchmove = OnTouchMove;
 
    // start video routine
    window.requestAnimationFrame(VideoRoutine);
}
 
function VideoRoutine(e)
{
    DrawButtons();
 
    window.requestAnimationFrame(VideoRoutine);
}
 
function Touch(e, on)
{
    e.preventDefault();
 
    const tl = e.changedTouches;
    const r = e.target.getBoundingClientRect();
    const halfWidth = Cx((r.right - r.left) / 2);
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - r.left);
        const y = Cy(tl[i].clientY - r.top);
 
        if (x < halfWidth)
        {
            // left: test against cross
 
            const dx = x - CROSS_X;
            const dy = y - CROSS_Y;
            const dist = Math.sqrt(dx * dx + dy * dy);
 
            UP_ON = DOWN_ON = LEFT_ON = RIGHT_ON = 0;
 
            // test again circles
            if ( dist <= CROSS_RAD && dist >= CROSS_RAD/4 && on )
            {
                // test against lines
 
                const A = dy >=  dx/2;
                const B = dy >=  dx*2;
                const C = dy >= -dx*2;
                const D = dy >= -dx/2;
 
                DOWN_ON = 0+( A && D );
                UP_ON = 0+( !A && !D );
                LEFT_ON = 0+( !C && B );
                RIGHT_ON =  0+( C && !B );
 
            }
 
        }
        else
        {
            // right: test against AB
 
            const dx = x - AB_X;
            const dy = y - AB_Y;
 
            A_ON = B_ON = 0;
 
            if (on && dx >= -AB_RAD && dx <= AB_RAD && dy >= -AB_RAD && dy <= AB_RAD )
            {
 
                // test lines
 
                A_ON = 0+( dy >= -AB_RAD/2 + dx );
                B_ON = 0+( dy <=  AB_RAD/2 + dx );
 
            }
 
        }
 
    }
 
    // conversion to key events
 
}
 
function OnTouchStart(e)
{
    Touch(e, 1);
}
 
function OnTouchEnd(e)
{
    Touch(e, 0);
    OnMouseUp(e);
}
 
function OnTouchMove(e)
{
    Touch(e, 1);
}
 
function ToggleFullScreen()
{
    if (!document.fullscreen)
    {
        CONTAINER.requestFullscreen();
    } else
    {
        document.exitFullscreen();
    }
}
 
function OnMouseUp(e)
{
    const rec = e.target.getBoundingClientRect();
    const tl = e.changedTouches;
    const fsr = FULLSCREEN_RECT;
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - rec.left);
        const y = Cy(tl[i].clientY - rec.top);
 
        // check fullscreen button
 
        const dx = x - fsr.left;
        const dy = y - fsr.top;
 
        if (dx >= 0 && dx < fsr.width && dy >= 0 && dy < fsr.height)
        {
            ToggleFullScreen();
        }
    }
 
}

Avant de cocher "résolu" il faut que je valide mon script en testant un truc qui bouge, voir si c'est maniable ou si mon calcul est tout pourri.
La suite .....
Bon j'ai un foirage en non-fullscreen quand les doigts sortent du canvas. Faut que je teste les event touch sur document.
La suite .....
Bon alors si je mets les events sur document ça fait sauter preventDefault()... pff...

Ok j'ai trouvé il faut faire des addEventListener avec {passive:false}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
// canvas dimensions
var SW = 240;
var SH = 160;
 
// render zone
var CONTAINER = null;
var CAN = null;
var CTX2D = null;
 
// colors
const CO = ['#0000FF', '#FF0000'];
 
// left buttons zone: 8-directions cross
 
const CROSS_RAD = 32;
const CROSS_X = CROSS_RAD;
const CROSS_Y = SH - CROSS_RAD;
 
var LEFT_ON = 0;
var RIGHT_ON = 0;
var UP_ON = 0;
var DOWN_ON = 0;
 
// right buttons zone: A B
 
const AB_RAD = CROSS_RAD;
const AB_X = SW-AB_RAD;
const AB_Y = CROSS_Y;
 
var A_ON = 0;
var B_ON = 0;
 
// fullscreen button
const FULLSCREEN_RECT = {left: SW - 16, width: 16, top: 0, height: 16};
 
// show txt
function trace(s)
{
    document.getElementById('tracer').innerHTML += s + '<br/>';
}
 
// coordinates relative to canvas
function Cx(x)
{
    return x * CAN.width / CONTAINER.offsetWidth;
}
function Cy(y)
{
    return y * CAN.height / CONTAINER.offsetHeight;
}
 
function DrawButtons()
{
    // cross
 
    CTX2D.fillStyle = CO[ LEFT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - CROSS_RAD, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ RIGHT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X + 8, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ UP_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y - CROSS_RAD, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ DOWN_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y + 8, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    // AB
 
    CTX2D.fillStyle = CO[ A_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X-AB_RAD/2, AB_Y+AB_RAD/2, AB_RAD/2, 0, Math.PI*2);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ B_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X+AB_RAD/2, AB_Y-AB_RAD/2, AB_RAD/2, 0, Math.PI*2);
    CTX2D.closePath();
    CTX2D.fill();
 
}
 
function main()
{
 
    CONTAINER = document.getElementById('container');
 
    CAN = document.createElement('canvas');
    CAN.width = SW;
    CAN.height = SH;
    CAN.style.backgroundColor = '#000000';
    CAN.style.width = "100%";
    CAN.style.height = "100%";
    CONTAINER.appendChild(CAN);
 
    CTX2D = CAN.getContext('2d');
    CTX2D.strokeStyle = '#FFFFFF';
    CTX2D.fillRect(0, 0, SW, SH);
 
    // draw fullscreen button
 
    CTX2D.fillStyle = CO[0];
    CTX2D.beginPath();
    CTX2D.rect(FULLSCREEN_RECT.left, FULLSCREEN_RECT.top, FULLSCREEN_RECT.width, FULLSCREEN_RECT.height);
    CTX2D.closePath();
    CTX2D.fill();
 
    // touch events
 
    document.addEventListener('touchstart',OnTouchStart,{passive:false});
    document.addEventListener('touchend',OnTouchEnd,{passive:false});
    document.addEventListener('touchmove',OnTouchMove,{passive:false});
 
    // start video routine
    window.requestAnimationFrame(VideoRoutine);
}
 
function VideoRoutine(e)
{
    DrawButtons();
 
    window.requestAnimationFrame(VideoRoutine);
}
 
function Touch(e, on)
{
    e.preventDefault();
    e.stopImmediatePropagation();
 
    const tl = e.changedTouches;
    const r = CAN.getBoundingClientRect();
    const halfWidth = Cx((r.right - r.left) / 2);
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - r.left);
        const y = Cy(tl[i].clientY - r.top);
 
        if (x < halfWidth)
        {
            // left: test against cross
 
            const dx = x - CROSS_X;
            const dy = y - CROSS_Y;
            const dist = Math.sqrt(dx * dx + dy * dy);
 
            UP_ON = DOWN_ON = LEFT_ON = RIGHT_ON = 0;
 
            // test again circles
            if ( dist <= CROSS_RAD && dist >= CROSS_RAD/4 && on )
            {
                // test against lines
 
                const A = dy >=  dx/2;
                const B = dy >=  dx*2;
                const C = dy >= -dx*2;
                const D = dy >= -dx/2;
 
                DOWN_ON = 0+( A && D );
                UP_ON = 0+( !A && !D );
                LEFT_ON = 0+( !C && B );
                RIGHT_ON =  0+( C && !B );
 
            }
 
        }
        else
        {
            // right: test against AB
 
            const dx = x - AB_X;
            const dy = y - AB_Y;
 
            A_ON = B_ON = 0;
 
            if (on && dx >= -AB_RAD && dx <= AB_RAD && dy >= -AB_RAD && dy <= AB_RAD )
            {
 
                // test lines
 
                A_ON = 0+( dy >= -AB_RAD/2 + dx );
                B_ON = 0+( dy <=  AB_RAD/2 + dx );
 
            }
 
        }
 
    }
 
    // conversion to key events
 
}
 
function OnTouchStart(e)
{
    Touch(e, 1);
}
 
function OnTouchEnd(e)
{
    Touch(e, 0);
    OnMouseUp(e);
}
 
function OnTouchMove(e)
{
    Touch(e, 1);
}
 
function ToggleFullScreen()
{
    if (!document.fullscreen)
    {
        CONTAINER.requestFullscreen();
    } else
    {
        document.exitFullscreen();
    }
}
 
function OnMouseUp(e)
{
    const rec = e.target.getBoundingClientRect();
    const tl = e.changedTouches;
    const fsr = FULLSCREEN_RECT;
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - rec.left);
        const y = Cy(tl[i].clientY - rec.top);
 
        // check fullscreen button
 
        const dx = x - fsr.left;
        const dy = y - fsr.top;
 
        if (dx >= 0 && dx < fsr.width && dy >= 0 && dy < fsr.height)
        {
            ToggleFullScreen();
        }
    }
 
}

12/12/2022, 17h59
DevWebMobile

Bon... maintenant faudrait que je teste le truc avec un bonhomme qui saute et qui donne des coups de poing et des coups de pied.

Pour ça faut que je crée des events pseudo OnKeyDown/OnKeyUp avec un pseudo tableau de touches. Mais là je suis fatigué je crois que je le ferai demain.
12/12/2022, 18h20
NoSmoking

Citation:

onpointerenter/onpointerover fonctionne avec la souris mais pas le touch

les event pointer ne permettent pas d'indifférencier souris et touch, ce sont bien deux input device différents

j'y arrive pas là je crois que je vais me contenter des events touch

Non il suffit de mettre dans le CSS touch-action:none; sur l'élément que tu veux traiter.

Citation:

J'ai repris le premier test en réduisant la zone de droite à 128x128 histoire de réduire au max le risque du bug,

C'est original comme approche ;)

Citation:

...

bon j'ai décroché de la lecture de ton suivi ... de plus tu tires souvent de mauvaises conclusions :aie:

Citation:

Ok j'ai trouvé il faut faire des addEventListener avec {passive:false}

oui mais bon ... pas bien compris ... mais j'ai plutôt l'impression que tu pêches dans la vision globale de ce que tu veux faire !

Citation:

Bon... maintenant faudrait que je teste le truc avec un bonhomme qui saute et qui donne des coups de poing et des coups de pied.

Bon courage !!!

Citation:

Pour ça faut que je crée des events pseudo OnKeyDown/OnKeyUp avec un pseudo tableau de touches.

A quoi te servent donc ta « croix » et tes deux « poussoirs » :koi:

Décidément j'ai du mal à suivre ...
13/12/2022, 12h14
DevWebMobile

Citation:

Envoyé par NoSmoking

A quoi te servent donc ta « croix » et tes deux « poussoirs » :koi:

Décidément j'ai du mal à suivre ...

Je me suis bêtement inspiré de la gameboy parce qu'il fallait bien que je démarre par quelque chose. Je sais que faire un genre de boussole aurait été mieux adapté qu'une croix pour les jeux smartphone, mais les jeux web doivent aussi être jouables sur desktop avec le clavier donc il faut qu'au final le programme raisonne avec des touches.

Je sais que je débute et que mon code n'est pas un bon exemple. Si tu as des meilleurs exemples de gameboy pad en touch javascript je suis preneur.

Bon, j'ai réussi à faire un rectangle qui marche, qui saute, qui donne des coups de poings et des coups de pied.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="main.js"></script>
        <script src="Game.js"></script>
    </head>
    <body onLoad="main()">
        <div align="center">
 
            <div id="container" style="width:480px;height:320px;background-color:#0000FF;" ></div>
 
            <div id="tracer"></div>
 
        </div>
    </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
// canvas dimensions
var SW = 240;
var SH = 160;
 
// render zone
var CONTAINER = null;
var CAN = null;
var CTX2D = null;
 
// colors
const CO = ['#0000FF', '#FF0000'];
 
// left buttons zone: 8-directions cross
 
const CROSS_RAD = 32;
const CROSS_X = CROSS_RAD;
const CROSS_Y = SH - CROSS_RAD;
var LEFT_ON = 0;
var RIGHT_ON = 0;
var UP_ON = 0;
var DOWN_ON = 0;
 
// right buttons zone: A B
 
const AB_RAD = CROSS_RAD;
const AB_X = SW-AB_RAD;
const AB_Y = CROSS_Y;
var A_ON = 0;
var B_ON = 0;
 
// fullscreen button
const FULLSCREEN_RECT = {left: SW - 16, width: 16, top: 0, height: 16};
 
// deprecated keycodes
const KEY_CODES = {
    ArrowUp:38,
    ArrowDown:40,
    ArrowLeft:37,
    ArrowRight:39,
    d:68,
    f:70
};
 
// show txt
function trace(s)
{
    document.getElementById('tracer').innerHTML += s + '<br/>';
}
 
// coordinates relative to canvas
function Cx(x)
{
    return x * CAN.width / CONTAINER.offsetWidth;
}
function Cy(y)
{
    return y * CAN.height / CONTAINER.offsetHeight;
}
 
function DrawButtons()
{
    // cross
 
    CTX2D.fillStyle = CO[ LEFT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - CROSS_RAD, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ RIGHT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X + 8, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ UP_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y - CROSS_RAD, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ DOWN_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y + 8, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    // AB
 
    CTX2D.fillStyle = CO[ A_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X-AB_RAD/2, AB_Y+AB_RAD/2, AB_RAD/2, 0, Math.PI*2);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ B_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X+AB_RAD/2, AB_Y-AB_RAD/2, AB_RAD/2, 0, Math.PI*2);
    CTX2D.closePath();
    CTX2D.fill();
 
}
 
function DrawRyu()
{
    const ryu = Game.ryu;
 
    CTX2D.fillStyle = '#FFFFFF';
    CTX2D.beginPath();
 
    // body
    CTX2D.rect( ryu.x-ryu.hW, ryu.y-ryu.hH, ryu.hW*2, ryu.hH*2);
    // punch
    if ( ryu.punchDelay )
    {
        CTX2D.rect( ryu.x+ryu.flipX*32-ryu.hW, ryu.y-24, ryu.hW*2, 16 );
    }
    if ( ryu.kickDelay )
    {
        CTX2D.rect( ryu.x+ryu.flipX*32-ryu.hW, ryu.y+8, ryu.hW*2, 16 );
    }    
 
    CTX2D.closePath();
    CTX2D.fill();
 
    // punch
 
}
 
function main()
{
    CONTAINER = document.getElementById('container');
 
    CAN = document.createElement('canvas');
    CAN.width = SW;
    CAN.height = SH;
    CAN.style.backgroundColor = '#000000';
    CAN.style.width = "100%";
    CAN.style.height = "100%";
    CONTAINER.appendChild(CAN);
 
    CTX2D = CAN.getContext('2d');
 
    // touch events
 
    document.addEventListener('touchstart',OnTouchStart,{passive:false});
    document.addEventListener('touchend',OnTouchEnd,{passive:false});
    document.addEventListener('touchmove',OnTouchMove,{passive:false});
 
    //CAN.onmouseup = OnMouseUp; only works in desktop mode, cannot be mixed with touch events
 
    Game.init();
 
    // start video routine
    window.requestAnimationFrame(VideoRoutine);
}
 
function VideoRoutine(e)
{
    Game.routine();
 
    // refresh background
 
    CTX2D.fillStyle = '#000000';
    CTX2D.fillRect(0, 0, SW, SH);
 
    // draw fullscreen button
 
    CTX2D.fillStyle = CO[0];
    CTX2D.beginPath();
    CTX2D.rect(FULLSCREEN_RECT.left, FULLSCREEN_RECT.top, FULLSCREEN_RECT.width, FULLSCREEN_RECT.height);
    CTX2D.closePath();
    CTX2D.fill();
 
    // draw Ryu
 
    DrawRyu();
 
    // draw paddle buttons
 
    DrawButtons();
 
    window.requestAnimationFrame(VideoRoutine);
}
 
function Touch(e, on)
{
    e.preventDefault();
    e.stopImmediatePropagation();
 
    // prepare key events
 
    let lastLeft = LEFT_ON;
    let lastRight = RIGHT_ON;
    let lastUp = UP_ON;
    let lastDown = DOWN_ON;
    let lastA = A_ON;
    let lastB = B_ON;
 
    // geometry test to update bools
 
    const tl = e.changedTouches;
    const r = CAN.getBoundingClientRect();
    const halfWidth = Cx((r.right - r.left) / 2);
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - r.left);
        const y = Cy(tl[i].clientY - r.top);
 
        if (x < halfWidth)
        {
            // left: test against cross
 
            const dx = x - CROSS_X;
            const dy = y - CROSS_Y;
            const dist = Math.sqrt(dx * dx + dy * dy);
 
            UP_ON = DOWN_ON = LEFT_ON = RIGHT_ON = 0;
 
            // test again circles
            if ( dist <= CROSS_RAD && dist >= CROSS_RAD/4 && on )
            {
                // test against lines
 
                const A = dy >=  dx/2;
                const B = dy >=  dx*2;
                const C = dy >= -dx*2;
                const D = dy >= -dx/2;
 
                DOWN_ON = 0+( A && D );
                UP_ON = 0+( !A && !D );
                LEFT_ON = 0+( !C && B );
                RIGHT_ON =  0+( C && !B );
 
            }
 
        }
        else
        {
            // right: test against AB
 
            const dx = x - AB_X;
            const dy = y - AB_Y;
 
            A_ON = B_ON = 0;
 
            if (on && dx >= -AB_RAD && dx <= AB_RAD && dy >= -AB_RAD && dy <= AB_RAD )
            {
 
                // test lines
 
                A_ON = 0+( dy >= -AB_RAD/2 + dx );
                B_ON = 0+( dy <=  AB_RAD/2 + dx );
 
            }
 
        }
 
    }
 
    // conversion to key events
 
    let ke = null;
 
    // cross
 
    ke = {keyCode:KEY_CODES['ArrowLeft'],key:'ArrowLeft'};
    if ( !lastLeft && LEFT_ON )
    {
        OnKeyDown( ke );
    }
    if ( lastLeft && !LEFT_ON )
    {
        OnKeyUp( ke );
    }
 
    ke = {keyCode:KEY_CODES['ArrowRight'],key:'ArrowRight'};
    if ( !lastRight && RIGHT_ON )
    {
        OnKeyDown( ke );
    }
    if ( lastRight && !RIGHT_ON )
    {
        OnKeyUp( ke );
    }
 
    ke = {keyCode:KEY_CODES['ArrowUp'],key:'ArrowUp'};
    if ( !lastUp && UP_ON )
    {
        OnKeyDown( ke );
    }
    if ( lastUp && !UP_ON )
    {
        OnKeyUp( ke );
    }
 
    ke = {keyCode:KEY_CODES['ArrowDown'],key:'ArrowDown'};
    if ( !lastDown && DOWN_ON )
    {
        OnKeyDown( ke );
    }
    if ( lastDown && !DOWN_ON )
    {
        OnKeyUp( ke );
    }
 
    // AB
 
    ke = {keyCode:KEY_CODES['d'],key:'d'};
    if ( !lastA && A_ON )
    {
        OnKeyDown( ke );
    }
    if ( lastA && !A_ON )
    {
        OnKeyUp( ke );
    }
 
    ke = {keyCode:KEY_CODES['f'],key:'f'};
    if ( !lastB && B_ON )
    {
        OnKeyDown( ke );
    }
    if ( lastB && !B_ON )
    {
        OnKeyUp( ke );
    }
 
}
 
// "key" events
 
function resolveKeyCode( e )
{
    if ( e.keyCode !== undefined )
    {
        return e.keyCode;
    }
    else if ( e.key !== undefined )
    {
        return KEY_CODES[e.key];
    }
}
function OnKeyDown( e )
{
    Game.onKeyDown( resolveKeyCode(e) );
}
function OnKeyUp( e )
{
    Game.onKeyUp( resolveKeyCode(e) );
    OnMouseUp(e);
}
 
function OnTouchStart(e)
{
    Touch(e, 1);
}
 
function OnTouchEnd(e)
{
    Touch(e, 0);
    OnMouseUp(e);
}
 
function OnTouchMove(e)
{
    Touch(e, 1);
}
 
function ToggleFullScreen()
{
    if (!document.fullscreen)
    {
        CONTAINER.requestFullscreen();
    } else
    {
        document.exitFullscreen();
    }
}
 
function OnMouseUp(e)
{
    const rec = e.target.getBoundingClientRect();
    const tl = e.changedTouches;
    const fsr = FULLSCREEN_RECT;
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - rec.left);
        const y = Cy(tl[i].clientY - rec.top);
 
        // check fullscreen button
 
        const dx = x - fsr.left;
        const dy = y - fsr.top;
 
        if (dx >= 0 && dx < fsr.width && dy >= 0 && dy < fsr.height)
        {
            ToggleFullScreen();
        }
    }
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// static class to simulate a pseudo-game
 
function Game (){}
 
// key table
Game.keyBuffer = new ArrayBuffer(256);
Game.keyTable = new Uint8Array(Game.keyBuffer);
 
Game.ryu = {
    x:SW/2,
    y:SH/2,
    speedY:0,
    hW:16,
    hH:32,
    flipX:1,
    onFloor:0,
    punchDelay:0,
    kickDelay:0
};
 
Game.floorY = 140;
 
Game.init = function()
{
 
};
 
Game.routine = function()
{
    const ryu = Game.ryu;
 
    // move Ryu along X-Axis
 
    const speedX = 2 * ( Game.keyTable[39]-Game.keyTable[37] );
    if ( speedX > 0 )
    {
        ryu.flipX = 1;
    }
    if ( speedX < 0 )
    {
        ryu.flipX = -1;
    }
 
    ryu.x += speedX ;
    if ( ryu.x < ryu.hW )
    {
        ryu.x = ryu.hW;
    }
    if ( ryu.x > SW-ryu.hW )
    {
        ryu.x = SW-ryu.hW;
    }
 
    // gravity
    if (!ryu.onFloor)
    {
        ryu.speedY ++;
        ryu.y += ryu.speedY;
    }
    if ( ryu.y + ryu.hH >= Game.floorY )
    {
        ryu.y = Game.floorY - ryu.hH;
        ryu.onFloor = 1;
    }
 
    // punch-kick delays
 
    if ( ryu.punchDelay > 0 )
    {
        ryu.punchDelay--;
    }
    if ( ryu.kickDelay > 0 )
    {
        ryu.kickDelay--;
    }
 
};
 
Game.onKeyDown = function(i)
{
    Game.keyTable[i]=1;
 
    const ryu = Game.ryu;
 
    // start jump
 
    if ( i === 38 )
    {
        ryu.speedY = -12;
        ryu.onFloor = 0;
    }
 
    // start kick or punch
 
    if ( i === 68 )
    {
        ryu.kickDelay = 16;
    }
    if ( i === 70 )
    {
        ryu.punchDelay = 16;
    }
 
};
 
Game.onKeyUp = function(i)
{
    Game.keyTable[i]=0;
};

Maintenant pour finir ce test il faut que je programme l'alternance desktop/smartphone histoire que ça soit également géré par les touches du clavier.

Je vous donne le code du test final, on ne sait jamais, si ça peut intéresser des gens qui cherchent à faire le même genre de trucs. Mon code n'est pas un exemple, c'est vraiment juste une improvisation de tests d'alternance desktop/smartphone, j'ai juste trouvé quelques idées. Mais pour intégrer ça dans un environnement de jeu opérant il faut tout reprogrammer en suivant la structure de votre framework.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
 
        <script src="main.js"></script>
        <script src="Game.js"></script>
    </head>
    <body onLoad="main()">
        <div align="center">
 
            <div id="container" style="width:720px;height:480px;background-color:#0000FF;" >
                <canvas id="screen" width="240" height="160" style="width:100%;height:100%;background-color:#000000"></canvas>
            </div>
 
            <div id="tracer" style="font-size:72px;"></div>
 
        </div>
    </body>
</html>

Script main.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
// detect touch screen
var TOUCH = false;
 
// canvas dimensions
var SW = 240;
var SH = 160;
 
// render zone
var CONTAINER = null;
var CAN = null;
var CTX2D = null;
 
// colors
const CO = ['#0000FF', '#FF0000'];
 
// left buttons zone: 8-directions cross
const CROSS_RAD = 32;
const CROSS_X = CROSS_RAD;
const CROSS_Y = SH - CROSS_RAD;
var LEFT_ON = 0;
var RIGHT_ON = 0;
var UP_ON = 0;
var DOWN_ON = 0;
 
// right buttons zone: A B
const AB_RAD = CROSS_RAD;
const AB_X = SW - AB_RAD;
const AB_Y = CROSS_Y;
var A_ON = 0;
var B_ON = 0;
 
// fullscreen button
const FULLSCREEN_RECT = {left: SW - 32, width: 32, top: 0, height: 32};
 
// deprecated keycodes
const KEY_CODES = {
    ArrowUp: 38,
    ArrowDown: 40,
    ArrowLeft: 37,
    ArrowRight: 39,
    d: 68,
    f: 70
};
 
// show txt
function trace(s)
{
    document.getElementById('tracer').innerHTML += s + '<br/>';
}
 
// coordinates relative to canvas
function Cx(x)
{
    return x * CAN.width / CONTAINER.offsetWidth;
}
function Cy(y)
{
    return y * CAN.height / CONTAINER.offsetHeight;
}
 
function DrawButtons()
{
    // cross
 
    CTX2D.fillStyle = CO[ LEFT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - CROSS_RAD, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ RIGHT_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X + 8, CROSS_Y - 8, CROSS_RAD - 8, 16);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ UP_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y - CROSS_RAD, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ DOWN_ON ];
    CTX2D.beginPath();
    CTX2D.rect(CROSS_X - 8, CROSS_Y + 8, 16, CROSS_RAD - 8);
    CTX2D.closePath();
    CTX2D.fill();
 
    // AB
 
    CTX2D.fillStyle = CO[ A_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X - AB_RAD / 2, AB_Y + AB_RAD / 2, AB_RAD / 2, 0, Math.PI * 2);
    CTX2D.closePath();
    CTX2D.fill();
 
    CTX2D.fillStyle = CO[ B_ON ];
    CTX2D.beginPath();
    CTX2D.arc(AB_X + AB_RAD / 2, AB_Y - AB_RAD / 2, AB_RAD / 2, 0, Math.PI * 2);
    CTX2D.closePath();
    CTX2D.fill();
 
}
 
function DrawRyu()
{
    const ryu = Game.ryu;
 
    CTX2D.fillStyle = '#FFFFFF';
    CTX2D.beginPath();
 
    // body
    CTX2D.rect(ryu.x - ryu.hW, ryu.y - ryu.hH, ryu.hW * 2, ryu.hH * 2);
 
    // punch-kick
    if (ryu.punchDelay)
    {
        CTX2D.rect(ryu.x + ryu.flipX * 32 - ryu.hW, ryu.y - 24, ryu.hW * 2, 16);
    }
    if (ryu.kickDelay)
    {
        CTX2D.rect(ryu.x + ryu.flipX * 32 - ryu.hW, ryu.y + 8, ryu.hW * 2, 16);
    }
 
    CTX2D.closePath();
    CTX2D.fill();
 
}
 
function main()
{
    TOUCH = ("ontouchmove" in document.documentElement);
 
    CONTAINER = document.getElementById('container');
    CAN = document.getElementById('screen');
    CTX2D = CAN.getContext('2d');
 
    // touch events
 
    if (TOUCH)
    {
        document.addEventListener('touchstart', OnTouchStart, {passive: false});
        document.addEventListener('touchend', OnTouchEnd, {passive: false});
        document.addEventListener('touchmove', OnTouchMove, {passive: false});
    }
    else
    {
        CAN.onmouseup = OnMouseUp;
        document.onkeydown = OnKeyDown;
        document.onkeyup = OnKeyUp;
    }
 
    Game.init();
 
    // start video routine
    window.requestAnimationFrame(VideoRoutine);
}
 
function VideoRoutine(e)
{
    Game.routine();
 
    // refresh background
 
    CTX2D.fillStyle = '#000000';
    CTX2D.fillRect(0, 0, SW, SH);
 
    // draw fullscreen button
    CTX2D.fillStyle = CO[0];
    CTX2D.beginPath();
    CTX2D.rect(FULLSCREEN_RECT.left, FULLSCREEN_RECT.top, FULLSCREEN_RECT.width, FULLSCREEN_RECT.height);
    CTX2D.closePath();
    CTX2D.fill();
 
    // draw Ryu
    DrawRyu();
 
    // draw paddle buttons or keys manual
    if ( TOUCH ) 
    {
        DrawButtons();        
    }
    else
    {
        CTX2D.font = "16px lucida console";
        CTX2D.fillStyle ='#0000FF';
        CTX2D.fillText(" Move:  arrows", 0, SH-48);
        CTX2D.fillText(" Punch: F", 0, SH-32);
        CTX2D.fillText(" Kick:  D", 0, SH-16);
    }
    window.requestAnimationFrame(VideoRoutine);
}
 
function Touch(e, on)
{
    e.preventDefault();
    e.stopImmediatePropagation();
 
    // prepare key events
 
    let lastLeft = LEFT_ON;
    let lastRight = RIGHT_ON;
    let lastUp = UP_ON;
    let lastDown = DOWN_ON;
    let lastA = A_ON;
    let lastB = B_ON;
 
    // geometry test to update bools
 
    const tl = e.changedTouches;
    const r = CAN.getBoundingClientRect();
    const halfWidth = Cx((r.right - r.left) / 2);
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - r.left);
        const y = Cy(tl[i].clientY - r.top);
 
        if (x < halfWidth)
        {
            // left: test against cross
 
            const dx = x - CROSS_X;
            const dy = y - CROSS_Y;
            const dist = Math.sqrt(dx * dx + dy * dy);
 
            UP_ON = DOWN_ON = LEFT_ON = RIGHT_ON = 0;
 
            // test again circles
            if (dist <= CROSS_RAD && dist >= CROSS_RAD / 4 && on)
            {
                // test against lines
 
                const A = dy >= dx / 2;
                const B = dy >= dx * 2;
                const C = dy >= -dx * 2;
                const D = dy >= -dx / 2;
 
                DOWN_ON = 0 + (A && D);
                UP_ON = 0 + (!A && !D);
                LEFT_ON = 0 + (!C && B);
                RIGHT_ON = 0 + (C && !B);
 
            }
 
        } else
        {
            // right: test against AB
 
            const dx = x - AB_X;
            const dy = y - AB_Y;
 
            A_ON = B_ON = 0;
 
            if (on && dx >= -AB_RAD && dx <= AB_RAD && dy >= -AB_RAD && dy <= AB_RAD)
            {
 
                // test lines
 
                A_ON = 0 + (dy >= -AB_RAD / 2 + dx);
                B_ON = 0 + (dy <= AB_RAD / 2 + dx);
 
            }
 
        }
 
    }
 
    // conversion to key events
 
    let ke = null;
 
    // cross
 
    ke = {keyCode: KEY_CODES['ArrowLeft'], key: 'ArrowLeft'};
    if (!lastLeft && LEFT_ON)
    {
        KeyDown(ke);
    }
    if (lastLeft && !LEFT_ON)
    {
        KeyUp(ke);
    }
 
    ke = {keyCode: KEY_CODES['ArrowRight'], key: 'ArrowRight'};
    if (!lastRight && RIGHT_ON)
    {
        KeyDown(ke);
    }
    if (lastRight && !RIGHT_ON)
    {
        KeyUp(ke);
    }
 
    ke = {keyCode: KEY_CODES['ArrowUp'], key: 'ArrowUp'};
    if (!lastUp && UP_ON)
    {
        KeyDown(ke);
    }
    if (lastUp && !UP_ON)
    {
        KeyUp(ke);
    }
 
    ke = {keyCode: KEY_CODES['ArrowDown'], key: 'ArrowDown'};
    if (!lastDown && DOWN_ON)
    {
        KeyDown(ke);
    }
    if (lastDown && !DOWN_ON)
    {
        KeyUp(ke);
    }
 
    // AB
 
    ke = {keyCode: KEY_CODES['d'], key: 'd'};
    if (!lastA && A_ON)
    {
        KeyDown(ke);
    }
    if (lastA && !A_ON)
    {
        KeyUp(ke);
    }
 
    ke = {keyCode: KEY_CODES['f'], key: 'f'};
    if (!lastB && B_ON)
    {
        KeyDown(ke);
    }
    if (lastB && !B_ON)
    {
        KeyUp(ke);
    }
 
}
 
// "key" events
 
function resolveKeyCode(e)
{
    if (e.keyCode !== undefined)
    {
        return e.keyCode;
    } else if (e.key !== undefined)
    {
        return KEY_CODES[e.key];
    }
}
function KeyDown(e)
{
    Game.onKeyDown(resolveKeyCode(e));
}
function KeyUp(e)
{
    Game.onKeyUp(resolveKeyCode(e));
}
 
function OnTouchStart(e)
{
    Touch(e, 1);
}
 
function OnTouchEnd(e)
{
    Touch(e, 0);
    TouchFullscreenButton(e);
}
 
function OnTouchMove(e)
{
    Touch(e, 1);
}
 
function ToggleFullScreen()
{
    if (!document.fullscreen)
    {
        CONTAINER.requestFullscreen();
    } else
    {
        document.exitFullscreen();
    }
}
 
function TouchFullscreenButton(e)
{
    const rec = e.target.getBoundingClientRect();
    const tl = e.changedTouches;
    const fsr = FULLSCREEN_RECT;
 
    for (let i = 0; i < tl.length; i++)
    {
        const x = Cx(tl[i].clientX - rec.left);
        const y = Cy(tl[i].clientY - rec.top);
 
        // check fullscreen button
 
        const dx = x - fsr.left;
        const dy = y - fsr.top;
 
        if (dx >= 0 && dx < fsr.width && dy >= 0 && dy < fsr.height)
        {
            ToggleFullScreen();
        }
    }
}
 
function OnMouseUp(e)
{
    const rec = e.target.getBoundingClientRect();
    const tl = e.changedTouches;
    const fsr = FULLSCREEN_RECT;
 
    const x = Cx( e.clientX - rec.left );
    const y = Cy( e.clientY - rec.top  );
 
    // check fullscreen button
 
    const dx = x - fsr.left ;
    const dy = y - fsr.top  ;
 
    if (dx >= 0 && dx < fsr.width && dy >= 0 && dy < fsr.height)
    {
        ToggleFullScreen();
    }
}
 
 
function OnKeyDown(e)
{
    e.preventDefault();
    e.stopImmediatePropagation();
    Game.onKeyDown(resolveKeyCode(e));
}
function OnKeyUp(e)
{
    e.preventDefault();
    e.stopImmediatePropagation();
    Game.onKeyUp(resolveKeyCode(e));
}

Script Game.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
// static class to simulate a pseudo-game
 
function Game (){}
 
// key table
Game.keyBuffer = new ArrayBuffer(256);
Game.keyTable = new Uint8Array(Game.keyBuffer);
 
Game.ryu = {
    x:SW/2,
    y:SH/2,
    speedY:0,
    hW:16,
    hH:32,
    flipX:1,
    onFloor:0,
    punchDelay:0,
    kickDelay:0
};
 
Game.floorY = 140;
 
Game.init = function()
{
 
};
 
Game.routine = function()
{
    const ryu = Game.ryu;
 
    // move Ryu along X-Axis
 
    const speedX = 2 * ( Game.keyTable[39]-Game.keyTable[37] );
    if ( speedX > 0 )
    {
        ryu.flipX = 1;
    }
    if ( speedX < 0 )
    {
        ryu.flipX = -1;
    }
 
    ryu.x += speedX ;
    if ( ryu.x < ryu.hW )
    {
        ryu.x = ryu.hW;
    }
    if ( ryu.x > SW-ryu.hW )
    {
        ryu.x = SW-ryu.hW;
    }
 
    // gravity
    if (!ryu.onFloor)
    {
        ryu.speedY ++;
        ryu.y += ryu.speedY;
    }
    if ( ryu.y + ryu.hH >= Game.floorY )
    {
        ryu.y = Game.floorY - ryu.hH;
        ryu.onFloor = 1;
    }
 
    // punch-kick delays
 
    if ( ryu.punchDelay > 0 )
    {
        ryu.punchDelay--;
    }
    if ( ryu.kickDelay > 0 )
    {
        ryu.kickDelay--;
    }
 
};
 
Game.onKeyDown = function(i)
{
    const ryu = Game.ryu;
 
    // start jump
 
    if ( i === 38 && ryu.onFloor && Game.keyTable[38] === 0 )
    {
        ryu.speedY = -12;
        ryu.onFloor = 0;
    }
 
    // start kick or punch
 
    if ( i === 68 && Game.keyTable[68] === 0 )
    {
        ryu.kickDelay = 16;
    }
    if ( i === 70 && Game.keyTable[70] === 0 )
    {
        ryu.punchDelay = 16;
    }
 
    Game.keyTable[i]=1;
};
 
Game.onKeyUp = function(i)
{
    Game.keyTable[i]=0;
};

A tester sur vos serveurs FTP et vos smartphones si ça vous intéresse. N'hésitez pas à me signaler les bugs en précisant le navigateur.

Voir 40 message(s) de cette discussion en une page