Add buttons to web version

This commit is contained in:
Miloslav Číž 2020-10-11 14:39:46 +02:00
parent 85e3a7bde7
commit eed7f2064f
3 changed files with 83 additions and 25 deletions

View File

@ -18,13 +18,37 @@
<meta charset="utf-8">
<title>game</title>
</head>
<style>
table
{
width: 100%;
}
td
{
width: 11%;
padding: 0;
margin: 0;
}
button
{
width: 100%;
}
canvas
{
display: block;
margin: 10px auto 30px;
}
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
<script type='text/javascript'>
var Module = {
Module = {
print:
function(what)
{
@ -41,11 +65,31 @@
{
return document.getElementById('canvas');
}
)()
)(),
onRuntimeInitialized: function()
{
pressFunc = Module.cwrap('webButton', '', ['number','number']);
}
};
function down(button)
{
pressFunc(button,1);
}
function up(button)
{
pressFunc(button,0);
}
</script>
{{{ SCRIPT }}}
<table style="user-select:none; -moz-user-select: none; -ms-user-select:none; -webkit-user-select: none; -o-user-select:none;" onselectstart="return false;" unselectable="on">
<tr> <td></td> <td><button onmousedown="down(0)" ontouchstart="down(0)" onmouseup="up(0)" ontouchend="up(0)" onmouseout="up(0)" ontouchleave="(0)">U</button></td> <td></td> <td></td> <td><button onmousedown="down(4)" ontouchstart="down(4)" onmouseup="up(4)" ontouchend="up(4)" onmouseout="up(4)" ontouchleave="(4)">A</button></td> <td></td> <td></td> </tr>
<tr> <td><button onmousedown="down(3)" ontouchstart="down(3)" onmouseup="up(3)" ontouchend="up(3)" onmouseout="up(3)" ontouchleave="(3)">L</button></td> <td></td> <td><button onmousedown="down(1)" ontouchstart="down(1)" onmouseup="up(1)" ontouchend="up(1)" onmouseout="up(1)" ontouchleave="(1)">R</button></td> <td></td> <td></td> <td><button onmousedown="down(5)" ontouchstart="down(5)" onmouseup="up(5)" ontouchend="up(5)" onmouseout="up(5)" ontouchleave="(5)">B</button></td> <td></td> </tr>
<tr> <td></td> <td><button onmousedown="down(2)" ontouchstart="down(2)" onmouseup="up(2)" ontouchend="up(2)" onmouseout="up(2)" ontouchleave="(2)">D</button></td> <td></td> <td></td> <td></td> <td></td> <td><button onmousedown="down(6)" ontouchstart="down(6)" onmouseup="up(6)" ontouchend="up(6)" onmouseout="up(6)" ontouchleave="(6)">C</button></td> </tr>
</table>
</body>
</html>

View File

@ -88,6 +88,7 @@
#include "sounds.h"
const uint8_t *sdlKeyboardState;
uint8_t webKeyboardState[SFG_KEY_COUNT];
uint8_t sdlMouseButtonState = 0;
int8_t sdlMouseWheelState = 0;
@ -155,6 +156,13 @@ void SFG_sleepMs(uint16_t timeMs)
#endif
}
#ifdef __EMSCRIPTEN__
void webButton(uint8_t key, uint8_t down)
{
webKeyboardState[key] = down;
}
#endif
void SFG_getMouseOffset(int16_t *x, int16_t *y)
{
#ifndef __EMSCRIPTEN__
@ -176,6 +184,9 @@ void SFG_processEvent(uint8_t event, uint8_t data)
int8_t SFG_keyPressed(uint8_t key)
{
if (webKeyboardState[key])
return 1;
switch (key)
{
case SFG_KEY_UP:
@ -376,6 +387,9 @@ int main(int argc, char *argv[])
uint8_t argForceWindow = 0;
uint8_t argForceFullscreen = 0;
for (uint8_t i = 0; i < SFG_KEY_COUNT; ++i)
webKeyboardState[i] = 0;
for (uint8_t i = 1; i < argc; ++i)
{
if (argv[i][0] == '-' && argv[i][1] == 'h' && argv[i][2] == 0)

View File

@ -64,7 +64,7 @@ elif [ $1 == "emscripten" ]; then
# emscripten (browser Javascript) build, requires:
# - emscripten
emcc ./main_sdl.c -s USE_SDL=2 -O3 -lopenal --shell-file HTMLshell.html -o game.html
../emsdk/upstream/emscripten/emcc ./main_sdl.c -s USE_SDL=2 -O3 -lopenal --shell-file HTMLshell.html -o game.html -s EXPORTED_FUNCTIONS='["_main","_webButton"]' -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'
else
echo "unknown parameter: $1"
fi