Add attempt at onscreen controls for touch screens.
This commit is contained in:
David Thompson
parent
89b39ab6f0
commit
aa0c826b3c
4 changed files with 249 additions and 32 deletions
|
|
@ -1,3 +1,6 @@
|
||||||
Artwork by Christine Lemmer-Webber
|
cirkoban.png by Christine Lemmer-Webber
|
||||||
|
|
||||||
Licensed under CC BY-SA 4.0 International
|
Licensed under CC BY-SA 4.0 International
|
||||||
|
|
||||||
|
Directional pad and A button SVGs embedded in ../index.html by Kenney
|
||||||
|
Licensed under CC0
|
||||||
|
https://kenney.nl/assets/onscreen-controls
|
||||||
|
|
|
||||||
36
game.css
36
game.css
|
|
@ -6,6 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
display: flex;
|
||||||
background-color: #222034;
|
background-color: #222034;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
@ -14,5 +15,38 @@ body {
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (pointer: fine) {
|
||||||
|
#onscreen-controls {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Onscreen controls for "coarse" pointer devices assumed to be
|
||||||
|
touchscreens on phones/tablets. Inline SVG is used so that we can
|
||||||
|
attach click handlers to individual elements of the controls. */
|
||||||
|
@media (pointer: coarse) {
|
||||||
|
#onscreen-controls {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#onscreen-controls #dpad-container {
|
||||||
|
width: min(25vw,25vh);
|
||||||
|
height: min(25vw,25vh);
|
||||||
|
margin: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#onscreen-controls #button-container {
|
||||||
|
width: min(15vw,15vh);
|
||||||
|
height: min(15vw,15vh);
|
||||||
|
margin: 5%;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
69
game.scm
69
game.scm
|
|
@ -150,7 +150,7 @@
|
||||||
(set! *snapshots* older-snapshots)
|
(set! *snapshots* older-snapshots)
|
||||||
(play-sound-effect audio:undo)
|
(play-sound-effect audio:undo)
|
||||||
(unless *current-effect*
|
(unless *current-effect*
|
||||||
(show-effect! (make-wipe-effect 0.15))))))
|
(show-effect! (make-wipe-effect 0.25))))))
|
||||||
|
|
||||||
(define (sort lst compare)
|
(define (sort lst compare)
|
||||||
(match lst
|
(match lst
|
||||||
|
|
@ -639,34 +639,36 @@
|
||||||
|
|
||||||
(define (on-key-down event)
|
(define (on-key-down event)
|
||||||
(let ((key (keyboard-event-code event)))
|
(let ((key (keyboard-event-code event)))
|
||||||
(pk 'key-down key)
|
(cond
|
||||||
(match *state*
|
((string=? key key:left)
|
||||||
('play
|
(on-input-down 'left))
|
||||||
(cond
|
((string=? key key:right)
|
||||||
((string=? key key:left)
|
(on-input-down 'right))
|
||||||
(move-player 'left))
|
((string=? key key:up)
|
||||||
((string=? key key:right)
|
(on-input-down 'up))
|
||||||
(move-player 'right))
|
((string=? key key:down)
|
||||||
((string=? key key:up)
|
(on-input-down 'down))
|
||||||
(move-player 'up))
|
((string=? key key:undo)
|
||||||
((string=? key key:down)
|
(on-input-down 'undo))
|
||||||
(move-player 'down))
|
((string=? key key:confirm)
|
||||||
((string=? key key:undo)
|
(on-input-down 'confirm)))))
|
||||||
(rollback-snapshot!)
|
|
||||||
(with-goblins (update-objects!)))
|
(define (on-input-down input)
|
||||||
;; REMOVE BEFORE RELEASE!!!!
|
(pk 'input-down input)
|
||||||
((string=? key key:confirm)
|
(match *state*
|
||||||
(next-level!))))
|
('play
|
||||||
;; Pressing any bound key resets the game.
|
(match input
|
||||||
('win
|
('left (move-player 'left))
|
||||||
(when (or
|
('right (move-player 'right))
|
||||||
(string=? key key:left)
|
('up (move-player 'up))
|
||||||
(string=? key key:right)
|
('down (move-player 'down))
|
||||||
(string=? key key:up)
|
('undo
|
||||||
(string=? key key:down)
|
(rollback-snapshot!)
|
||||||
(string=? key key:undo)
|
(with-goblins (update-objects!)))
|
||||||
(string=? key key:confirm))
|
;; REMOVE BEFORE RELEASE!!!!
|
||||||
(reset-game!))))))
|
('confirm (next-level!))))
|
||||||
|
;; Pressing any bound input resets the game.
|
||||||
|
('win (reset-game!))))
|
||||||
|
|
||||||
;; Canvas and event loop setup
|
;; Canvas and event loop setup
|
||||||
(define canvas (get-element-by-id "canvas"))
|
(define canvas (get-element-by-id "canvas"))
|
||||||
|
|
@ -695,6 +697,15 @@
|
||||||
(procedure->external (lambda (_) (resize-canvas))))
|
(procedure->external (lambda (_) (resize-canvas))))
|
||||||
(add-event-listener! (current-document) "keydown"
|
(add-event-listener! (current-document) "keydown"
|
||||||
(procedure->external on-key-down))
|
(procedure->external on-key-down))
|
||||||
|
(define (register-touch-control elem-id input-id)
|
||||||
|
(add-event-listener! (get-element-by-id elem-id) "click"
|
||||||
|
(procedure->external
|
||||||
|
(lambda (e) (on-input-down input-id)))))
|
||||||
|
(register-touch-control "dpad-left" 'left)
|
||||||
|
(register-touch-control "dpad-right" 'right)
|
||||||
|
(register-touch-control "dpad-down" 'down)
|
||||||
|
(register-touch-control "dpad-up" 'up)
|
||||||
|
(register-touch-control "button-a" 'undo)
|
||||||
(resize-canvas)
|
(resize-canvas)
|
||||||
(request-animation-frame draw-callback)
|
(request-animation-frame draw-callback)
|
||||||
(timeout update-callback dt)
|
(timeout update-callback dt)
|
||||||
|
|
|
||||||
169
index.html
169
index.html
|
|
@ -7,6 +7,175 @@
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="onscreen-controls">
|
||||||
|
<div id="dpad-container">
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="0 0 159.95001 159.95001"
|
||||||
|
id="svg2202"
|
||||||
|
sodipodi:docname="transparent-dark.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview2204"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
showgrid="false" />
|
||||||
|
<defs
|
||||||
|
id="defs1791">
|
||||||
|
<g
|
||||||
|
id="Layer0_46_FILL">
|
||||||
|
<path
|
||||||
|
fill="#383838"
|
||||||
|
fill-opacity="0.501961"
|
||||||
|
stroke="none"
|
||||||
|
d="M 645.5,240.5 615,210 h -40 q -5,0 -5,5 v 51 q 0,5 5,5 h 40 l 30.5,-30.5 m -60.2,1.2 q -0.3,-0.3 -0.3,-0.7 0,-0.35 0.3,-0.65 l 5.05,-5.05 q 0.45,-0.45 1.05,-0.2 0.6,0.25 0.6,0.9 v 10.05 q 0,0.65 -0.6,0.9 -0.2,0.05 -0.4,0.05 -0.35,0.05 -0.65,-0.25 v -0.05 z"
|
||||||
|
id="path1656" />
|
||||||
|
<path
|
||||||
|
fill="#d4d4d4"
|
||||||
|
stroke="none"
|
||||||
|
d="m 585,241 q 0,0.4 0.3,0.7 l 5.05,5 v 0.05 q 0.3,0.3 0.65,0.25 0.2,0 0.4,-0.05 0.6,-0.25 0.6,-0.9 V 236 q 0,-0.65 -0.6,-0.9 -0.6,-0.25 -1.05,0.2 l -5.05,5.05 q -0.3,0.3 -0.3,0.65 z"
|
||||||
|
id="path1658" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="Layer0_47_FILL">
|
||||||
|
<path
|
||||||
|
fill="#383838"
|
||||||
|
fill-opacity="0.501961"
|
||||||
|
stroke="none"
|
||||||
|
d="m 681,165 q 0,-5 -5,-5 h -51 q -5,0 -5,5 v 40 L 650.5,235.5 681,205 v -40 m -29.35,10.3 5.05,5.05 q 0.45,0.45 0.2,1.05 -0.25,0.6 -0.9,0.6 h -10.05 q -0.65,0 -0.9,-0.6 -0.05,-0.2 -0.05,-0.4 -0.05,-0.35 0.25,-0.65 h 0.05 l 5,-5.05 q 0.3,-0.3 0.7,-0.3 0.35,0 0.65,0.3 z"
|
||||||
|
id="path1661" />
|
||||||
|
<path
|
||||||
|
fill="#d4d4d4"
|
||||||
|
stroke="none"
|
||||||
|
d="m 656.7,180.35 -5.05,-5.05 q -0.3,-0.3 -0.65,-0.3 -0.4,0 -0.7,0.3 l -5,5.05 h -0.05 q -0.3,0.3 -0.25,0.65 0,0.2 0.05,0.4 0.25,0.6 0.9,0.6 H 656 q 0.65,0 0.9,-0.6 0.25,-0.6 -0.2,-1.05 z"
|
||||||
|
id="path1663" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="Layer0_48_FILL">
|
||||||
|
<path
|
||||||
|
fill="#383838"
|
||||||
|
fill-opacity="0.501961"
|
||||||
|
stroke="none"
|
||||||
|
d="m 729.95,266 v -51 q 0,-5 -5,-5 H 686 L 655.5,240.5 686,271 h 38.95 q 5,0 5,-5 M 708,236 q 0,-0.65 0.6,-0.9 0.6,-0.25 1.05,0.2 l 5.05,5.05 q 0.3,0.3 0.3,0.65 0,0.4 -0.3,0.7 l -5.05,5 v 0.05 q -0.3,0.3 -0.65,0.25 -0.2,0 -0.4,-0.05 -0.6,-0.25 -0.6,-0.9 z"
|
||||||
|
id="path1666" />
|
||||||
|
<path
|
||||||
|
fill="#d4d4d4"
|
||||||
|
stroke="none"
|
||||||
|
d="m 708.6,235.1 q -0.6,0.25 -0.6,0.9 v 10.05 q 0,0.65 0.6,0.9 0.2,0.05 0.4,0.05 0.35,0.05 0.65,-0.25 v -0.05 l 5.05,-5 q 0.3,-0.3 0.3,-0.7 0,-0.35 -0.3,-0.65 l -5.05,-5.05 q -0.45,-0.45 -1.05,-0.2 z"
|
||||||
|
id="path1668" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="Layer0_49_FILL">
|
||||||
|
<path
|
||||||
|
fill="#383838"
|
||||||
|
fill-opacity="0.501961"
|
||||||
|
stroke="none"
|
||||||
|
d="M 681,276 650.5,245.5 620,276 v 38.95 q 0,5 5,5 h 51 q 5,0 5,-5 V 276 m -24.1,22.6 q 0.25,0.6 -0.2,1.05 l -5.05,5.05 q -0.3,0.3 -0.65,0.3 -0.4,0 -0.7,-0.3 l -5,-5.05 h -0.05 q -0.3,-0.3 -0.25,-0.65 0,-0.2 0.05,-0.4 0.25,-0.6 0.9,-0.6 H 656 q 0.65,0 0.9,0.6 z"
|
||||||
|
id="path1671" />
|
||||||
|
<path
|
||||||
|
fill="#d4d4d4"
|
||||||
|
stroke="none"
|
||||||
|
d="m 656.7,299.65 q 0.45,-0.45 0.2,-1.05 -0.25,-0.6 -0.9,-0.6 h -10.05 q -0.65,0 -0.9,0.6 -0.05,0.2 -0.05,0.4 -0.05,0.35 0.25,0.65 h 0.05 l 5,5.05 q 0.3,0.3 0.7,0.3 0.35,0 0.65,-0.3 z"
|
||||||
|
id="path1673" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="dpad-left"
|
||||||
|
transform="translate(-570,-160)">
|
||||||
|
<use
|
||||||
|
xlink:href="#Layer0_46_FILL"
|
||||||
|
id="use1989" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="dpad-up"
|
||||||
|
transform="translate(-570,-160)">
|
||||||
|
<use
|
||||||
|
xlink:href="#Layer0_47_FILL"
|
||||||
|
id="use1993" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="dpad-right"
|
||||||
|
transform="translate(-570,-160)">
|
||||||
|
<use
|
||||||
|
xlink:href="#Layer0_48_FILL"
|
||||||
|
id="use1997" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="dpad-down"
|
||||||
|
transform="translate(-570,-160)">
|
||||||
|
<use
|
||||||
|
xlink:href="#Layer0_49_FILL"
|
||||||
|
id="use2001" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div id="button-container">
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="0 0 80 80"
|
||||||
|
id="svg2202"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1791">
|
||||||
|
<g
|
||||||
|
id="Layer0_6_FILL">
|
||||||
|
<path
|
||||||
|
fill="#383838"
|
||||||
|
fill-opacity="0.501961"
|
||||||
|
stroke="none"
|
||||||
|
d="M 470,470 Q 470,453.45 458.25,441.7 446.55,430 430,430 413.35,430 401.65,441.7 390,453.45 390,470 q 0,16.55 11.65,28.25 Q 413.35,510 430,510 446.55,510 458.25,498.25 470,486.55 470,470 Z"
|
||||||
|
id="path1521" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g id="button-a">
|
||||||
|
<g
|
||||||
|
id="g1819"
|
||||||
|
transform="translate(-390,-430)">
|
||||||
|
<use
|
||||||
|
xlink:href="#Layer0_6_FILL"
|
||||||
|
id="use1817" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="translate(3,24.05)"
|
||||||
|
id="g2039">
|
||||||
|
<clipPath
|
||||||
|
id="Mask_Mask_4">
|
||||||
|
<rect
|
||||||
|
x="-2"
|
||||||
|
y="-2"
|
||||||
|
width="76.949997"
|
||||||
|
height="35.400002"
|
||||||
|
fill="#ffffff"
|
||||||
|
stroke="none"
|
||||||
|
id="rect2032" />
|
||||||
|
</clipPath>
|
||||||
|
<g
|
||||||
|
aria-label="A"
|
||||||
|
id="text2037"
|
||||||
|
clip-path="url(#Mask_Mask_4)">
|
||||||
|
<path
|
||||||
|
d="M 41.307032,22.38125 H 33.076563 L 31.777735,26.1 H 26.486719 L 34.047266,5.687891 h 6.275391 L 47.883204,26.1 h -5.291016 z m -6.917969,-3.787109 h 5.591797 l -2.789063,-8.121094 z"
|
||||||
|
style="font-weight:bold;font-size:28px;font-family:Ubuntu_Bold;baseline-shift:0%;fill:#ffffff"
|
||||||
|
id="path5722" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
<p id="wasm-error" hidden="true">
|
<p id="wasm-error" hidden="true">
|
||||||
A browser with Wasm GC and tail call support is required to play
|
A browser with Wasm GC and tail call support is required to play
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue