A simple word snake game

Show and Tell
1

Hi!

I made this little game and thought I can share it here:

Source code is here: https://gitlab.com/hornbook/word-snake

Big thanks to @mattpiz for the really nice Pointer Events package (making the swipe control on touch screens was easier than expected), @ohanhi for the classic Keyboard package that never fails me and all the community for everything else :smiley:

Comments are welcome!

6 Likes
2

Glad it was helpful to you! For the keyboard, I’d also suggest supporting directional keys. I’m for example using a bépo keyboard layout so the traditional qwerty keys locations for movement are not ideal.

1 Like
3

Good point. I didn’t think about other layouts. Only I’m not sure how to prevent arrow keys from triggering scroll with @ohanhi’s package. Is there a way?

4

Somthing like this should work:

Html.div 
    [ Html.Events.preventDefaultOn "keydown" keyDecoder ]
    [ ... ]

keyDecoder : Decoder ( Msg, Bool )
keyDecoder =
    Decode.field "key" Decode.string
        |> Decode.andThen keyToMsg


keyToMsg : String -> Decoder ( Msg, Bool )
keyToMsg string =
    case string of
        "ArrowUp" ->
            Decode.succeed ( MoveUp, True )

        "ArrowDown" ->
            Decode.succeed ( MoveDown, True )

        "ArrowLeft" ->
            Decode.succeed ( MoveLeft, True )

        "ArrowRight" ->
            Decode.succeed ( MoveRight, True )

        _ ->
            Decode.fail "This key does nothing"
1 Like
5

But then I need to maintain focus on the event target, right? It needs to have a tabindex and if it ever looses focus the events won’t be emitted. Or am I missing something?

6

Done. Thanks again for raising this issue.

I ended up using port and preventing default on the JS side. For reference here is the commit.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.