A simple word snake game

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!

5 Likes

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

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?

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

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?

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.

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