diff --git a/assets/images/AUTHORS b/assets/images/AUTHORS index 54a26f5..b90cbd6 100644 --- a/assets/images/AUTHORS +++ b/assets/images/AUTHORS @@ -1,3 +1,6 @@ -Artwork by Christine Lemmer-Webber - +cirkoban.png by Christine Lemmer-Webber 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 diff --git a/game.css b/game.css index 715916d..28de0e5 100644 --- a/game.css +++ b/game.css @@ -6,6 +6,7 @@ } body { + display: flex; background-color: #222034; margin: 0; width: 100vw; @@ -14,5 +15,38 @@ body { canvas { 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; + } } diff --git a/game.scm b/game.scm index 01a60d8..c9ff485 100644 --- a/game.scm +++ b/game.scm @@ -150,7 +150,7 @@ (set! *snapshots* older-snapshots) (play-sound-effect audio:undo) (unless *current-effect* - (show-effect! (make-wipe-effect 0.15)))))) + (show-effect! (make-wipe-effect 0.25)))))) (define (sort lst compare) (match lst @@ -639,34 +639,36 @@ (define (on-key-down event) (let ((key (keyboard-event-code event))) - (pk 'key-down key) - (match *state* - ('play - (cond - ((string=? key key:left) - (move-player 'left)) - ((string=? key key:right) - (move-player 'right)) - ((string=? key key:up) - (move-player 'up)) - ((string=? key key:down) - (move-player 'down)) - ((string=? key key:undo) - (rollback-snapshot!) - (with-goblins (update-objects!))) - ;; REMOVE BEFORE RELEASE!!!! - ((string=? key key:confirm) - (next-level!)))) - ;; Pressing any bound key resets the game. - ('win - (when (or - (string=? key key:left) - (string=? key key:right) - (string=? key key:up) - (string=? key key:down) - (string=? key key:undo) - (string=? key key:confirm)) - (reset-game!)))))) + (cond + ((string=? key key:left) + (on-input-down 'left)) + ((string=? key key:right) + (on-input-down 'right)) + ((string=? key key:up) + (on-input-down 'up)) + ((string=? key key:down) + (on-input-down 'down)) + ((string=? key key:undo) + (on-input-down 'undo)) + ((string=? key key:confirm) + (on-input-down 'confirm))))) + +(define (on-input-down input) + (pk 'input-down input) + (match *state* + ('play + (match input + ('left (move-player 'left)) + ('right (move-player 'right)) + ('up (move-player 'up)) + ('down (move-player 'down)) + ('undo + (rollback-snapshot!) + (with-goblins (update-objects!))) + ;; REMOVE BEFORE RELEASE!!!! + ('confirm (next-level!)))) + ;; Pressing any bound input resets the game. + ('win (reset-game!)))) ;; Canvas and event loop setup (define canvas (get-element-by-id "canvas")) @@ -695,6 +697,15 @@ (procedure->external (lambda (_) (resize-canvas)))) (add-event-listener! (current-document) "keydown" (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) (request-animation-frame draw-callback) (timeout update-callback dt) diff --git a/index.html b/index.html index e9166d0..b4eda57 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,175 @@ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + +
+