Skip to content

Commit 80a045a

Browse files
ptitSebptitSeb
authored
Merge pull request #7 from midzer/master
add mobile only controls
2 parents 522e69e + 6312e8f commit 80a045a

File tree

2 files changed

+112
-3
lines changed

2 files changed

+112
-3
lines changed

‎Makefile

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ endif
2020
DEST = /usr/local
2121
else ifeq ($(EMSCRIPTEN),1)
2222
CXXFLAGS= -s FULL_ES2=1 -I../gl4es/include -s USE_SDL_MIXER=2 -s USE_SDL=2
23-
CXXFLAGS+= -s USE_OGG=1 -s USE_VORBIS=1
23+
CXXFLAGS+= -s USE_OGG=1 -s USE_VORBIS=1 -lidbfs.js
2424
CXXFLAGS+= -std=gnu++11 -O2 -Wno-write-strings
2525
CXXFLAGS+= -Dlinux -DUSE_SDL2 -DNO_FMOD
2626
CXXFLAGS+= --emrun --preload-file Data --no-heap-copy
@@ -38,7 +38,8 @@ DEST = .
3838
endif
3939

4040
ifeq ($(EMSCRIPTEN),1)
41-
OBJS = AnimGenerator.bc Font.bc Serpent.bc Beam.bc FrontEnd.bc SolarFlare.bc Boss.bc Game.bc Sound.bc BrainBoss.bc Generator.bc SpaceTrash.bc BrainCell.bc Geo2D.bc Sperm.bc BreakScenery.bc Geo2D_Draw.bc Sprite.bc Bug.bc HUD.bc SpriteEffect.bc Bullet.bc LadyBird.bc SpriteSheet.bc Button.bc Log.bc StarBurst.bc CheckPoint.bc Map.bc stdafx.bc Debris.bc MidBoss.bc SuperTurret.bc Demo.bc Orb.bc Timer.bc Editor_Anims.bc Player.bc TriggerSlowDown.bc Editor.bc PostEffects.bc TriggerSpeedUp.bc Editor_EntityProperties.bc PowerDroid.bc Turret.bc Engine.bc PowerUp.bc UTIL_bitop.bc Engine_Generators.bc Profiler.bc UTIL_Fade.bc Entity.bc ProtoType.bc UTIL_Misc.bc Explosion.bc RandExplosion.bc UTIL_openGL.bc Fighter.bc Rhino.bc UTIL_SDL.bc firebug.bc Rocket.bc Fire.bc Serializer.bc
41+
#OBJS = AnimGenerator.bc Font.bc Serpent.bc Beam.bc FrontEnd.bc SolarFlare.bc Boss.bc Game.bc Sound.bc BrainBoss.bc Generator.bc SpaceTrash.bc BrainCell.bc Geo2D.bc Sperm.bc BreakScenery.bc Geo2D_Draw.bc Sprite.bc Bug.bc HUD.bc SpriteEffect.bc Bullet.bc LadyBird.bc SpriteSheet.bc Button.bc Log.bc StarBurst.bc CheckPoint.bc Map.bc stdafx.bc Debris.bc MidBoss.bc SuperTurret.bc Demo.bc Orb.bc Timer.bc Editor_Anims.bc Player.bc TriggerSlowDown.bc Editor.bc PostEffects.bc TriggerSpeedUp.bc Editor_EntityProperties.bc PowerDroid.bc Turret.bc Engine.bc PowerUp.bc UTIL_bitop.bc Engine_Generators.bc Profiler.bc UTIL_Fade.bc Entity.bc ProtoType.bc UTIL_Misc.bc Explosion.bc RandExplosion.bc UTIL_openGL.bc Fighter.bc Rhino.bc UTIL_SDL.bc firebug.bc Rocket.bc Fire.bc Serializer.bc
42+
OBJS = AnimGenerator.o Font.o Serpent.o Beam.o FrontEnd.o SolarFlare.o Boss.o Game.o Sound.o BrainBoss.o Generator.o SpaceTrash.o BrainCell.o Geo2D.o Sperm.o BreakScenery.o Geo2D_Draw.o Sprite.o Bug.o HUD.o SpriteEffect.o Bullet.o LadyBird.o SpriteSheet.o Button.o Log.o StarBurst.o CheckPoint.o Map.o stdafx.o Debris.o MidBoss.o SuperTurret.o Demo.o Orb.o Timer.o Editor_Anims.o Player.o TriggerSlowDown.o Editor.o PostEffects.o TriggerSpeedUp.o Editor_EntityProperties.o PowerDroid.o Turret.o Engine.o PowerUp.o UTIL_bitop.o Engine_Generators.o Profiler.o UTIL_Fade.o Entity.o ProtoType.o UTIL_Misc.o Explosion.o RandExplosion.o UTIL_openGL.o Fighter.o Rhino.o UTIL_SDL.o firebug.o Rocket.o Fire.o Serializer.o
4243
PROGRAM = docs/index.html
4344

4445
else

‎template.html

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,86 @@
3030
.game[width] + .loading {
3131
display: none;
3232
}
33+
span {
34+
--outline: #ccc;
35+
font-family: sans-serif;
36+
font-size: 18px;
37+
display: none;
38+
justify-content: center;
39+
align-items: center;
40+
position: relative;
41+
padding-bottom: 3px;
42+
width: 48px;
43+
height: 45px;
44+
border-radius: 5px;
45+
background-color: #fff;
46+
color: #444;
47+
border-top: 1px solid var(--outline);
48+
box-shadow: 0px 3px 0px 2px var(--outline);
49+
-webkit-user-select: none;
50+
user-select: none;
51+
}
52+
section {
53+
--cell-length: 56px;
54+
display: grid;
55+
grid-template-columns: repeat(3, 1fr);
56+
grid-template-rows: repeat(2, 1fr);
57+
place-items: center;
58+
grid-gap: 1px;
59+
width: calc(var(--cell-length) * 3);
60+
height: calc(var(--cell-length) * 2);
61+
}
62+
section ~ section {
63+
margin-top: 50px;
64+
}
65+
section > span:nth-child(1) {
66+
grid-column: 2;
67+
grid-row: 1;
68+
}
69+
section > span:nth-child(2) {
70+
grid-column: 1;
71+
grid-row: 2;
72+
}
73+
section#a > span:nth-child(1),
74+
section > span:nth-child(3) {
75+
grid-column: 2;
76+
grid-row: 2;
77+
}
78+
section > span:nth-child(4) {
79+
grid-column: 3;
80+
grid-row: 2;
81+
}
82+
#a,
83+
#b {
84+
position: fixed;
85+
bottom: 0;
86+
}
87+
#a {
88+
left: 0;
89+
}
90+
#b {
91+
right: 0;
92+
}
93+
@media (pointer: coarse) {
94+
span {
95+
display: flex;
96+
}
97+
}
3398
</style>
3499
</head>
35100
<body>
36101
<div class="emscripten">
37-
<canvas class="game portrait" oncontextmenu="event.preventDefault()"></canvas>
102+
<canvas class="game portrait" oncontextmenu="event.preventDefault()" data-key="Enter" data-which="13"></canvas>
103+
<section id="a">
104+
<span data-key="KeyZ" data-which="90">z</span>
105+
<span data-key="KeyX" data-which="88">x</span>
106+
</section>
107+
<section id="b">
108+
<span data-key="ArrowUp" data-which="38">&uarr;</span>
109+
<span data-key="ArrowLeft" data-which="37">&larr;</span>
110+
<span data-key="ArrowDown" data-which="40">&darr;</span>
111+
<span data-key="ArrowRight" data-which="39">&rarr;</span>
112+
</section>
38113
<div class="loading">Loading...</div>
39114
</div>
40115
<script type="text/javascript">
@@ -45,7 +120,40 @@
45120
$game.classList.toggle('portrait');
46121
}
47122
}
123+
const create_and_fire_event = function (event, type) {
124+
const control_event = new Event(type, { bubbles: true });
125+
126+
control_event.code = event.target.dataset.key;
127+
control_event.key = event.target.dataset.key;
128+
129+
control_event.keyCode = event.target.dataset.which;
130+
control_event.which = event.target.dataset.which;
131+
132+
Module.canvas.dispatchEvent(control_event);
133+
};
48134
var Module = {
135+
preRun: [],
136+
postRun: [
137+
function () {
138+
if (window.matchMedia("(pointer: coarse)").matches) {
139+
// touchscreen
140+
Array.from(document.querySelectorAll('span, canvas')).forEach(function (control) {
141+
control.addEventListener('touchstart', function (event) {
142+
event.preventDefault();
143+
create_and_fire_event(event, 'keydown');
144+
});
145+
control.addEventListener('touchend', function (event) {
146+
event.preventDefault();
147+
create_and_fire_event(event, 'keyup');
148+
});
149+
control.addEventListener('touchcancel', function (event) {
150+
event.preventDefault();
151+
create_and_fire_event(event, 'keyup');
152+
});
153+
});
154+
}
155+
}
156+
],
49157
print(text) {
50158
console.log(Array.prototype.slice.call(arguments).join(' '));
51159
},

0 commit comments

Comments
 (0)