Can Elm do this math educational game?

Michael_Mossey · March 11, 2022, 2:27am

I have in mind a math educational game. It will require rudimentary graphics, like drawing the inside of buttons with simple graphics, drawing division bars, square-root symbols, and so forth. It may benefit from some rudimentary animation. It needs to receive clicks on parts of the drawings in order to highlight these parts. Possible dragging, but not necessary.

Can Elm do things like these? Do I need to give more specifics?

Lucas_Payr · March 11, 2022, 4:57am

Sure, I’d say Elm is a perfect fit for that.

You might want to do the drawing parts in SVG: elm/svg.
Animation is generally rather easy to. You can use Browser.Events.onAnimationFrame to get high frame rate animations.
Clickable SVG can be done using Svg.Events.onClick.
Drag&Drop can be tricky.
- You can either look for an existing implementation.
- Or you use Svg.Events.onMouseDown and Svg.Events.onMouseUp to drag an Svg Element over another. For getting the coordinates of the Mouse while pressed down, you can use mpizenberg/elm-pointer-events.

Good luck

mattpiz · March 11, 2022, 9:31am

If you are drawing with svg, beware of not using the offsetX/Y properties of the events if the objects you draw are also able to emit mouse events. This is because the reference for the offset computation will change to the object under the mouse instead of the svg drawing area. So it’s a good idea to record the location of the svg and to listen for clientX/Y properties instead.

If you expect your game to be usable on tablets, use touch events or pointer events. For pointer events, the only reliable property working accross browsers is the clientX/Y property of the event. You might have issues with safari and firefox mobile if you use movementX/Y properties.

Michael_Mossey · March 11, 2022, 8:24pm

Thanks for the tips. I’m excited… I used Elm a couple years ago for a teaching project and the student and I loved it. For this current project I looked into Angular and the learning curve seemed to be very steep, while I already understood the basics of Elm.

Michael_Mossey · March 12, 2022, 7:06am

One question about SVG. I’m assuming it must be encapsulated in an element like a div. Do you know if it’s clipped to that div or can extend beyond it? Or is that an optional setting? I guess I probably need to dig into the docs. I’m already a little familiar with vector graphics programming in other contexts, but I have a lot to learn.

perty · March 12, 2022, 8:36am

Here’s some code I wrote that uses SVG to draw two connected nodes that you can move by dragging. You can also zoom.

I use Browser.Dom.getElement to locate where the drawing is on the page so that mouse coordinates are correctly calculated.

Note in the subscription, I switch of listening for mouse moves unless dragging is ongoing.

github.com

ArtComputerSE/elm-snippets/blob/master/src/Svging/Main.elm

module Svging.Main exposing (Model, Msg(..), init, initialModel, main)

import Browser
import Browser.Dom
import Browser.Events
import Dict exposing (Dict)
import Element exposing (Element, column, rgb, text)
import Element.Background as Background
import Element.Border as Border
import Element.Input as Input
import Html exposing (Html)
import Html.Attributes
import Json.Decode as Decode
import Svg exposing (circle, path, svg)
import Svg.Attributes exposing (cx, cy, d, fill, fillOpacity, height, id, r, startOffset, stroke, strokeOpacity, strokeWidth, style, transform, viewBox, width, xlinkHref)
import Svg.Events exposing (onClick, onMouseDown)
import Task


main =

This file has been truncated. show original

perty · March 12, 2022, 9:20am

Here’s the same code in an Ellie:

https://ellie-app.com/gVfbLbhWdnFa1

Michael_Mossey · March 15, 2022, 8:13am

Is it possible to respond to clicks on just part of the SVG drawing, or respond differently to different parts of the SVG drawing?

perty · March 20, 2022, 6:56am

I’m not sure what you’re looking for but events are available in the Svg.Events package.

https://package.elm-lang.org/packages/elm/svg/latest/Svg.Events

Michael_Mossey · March 20, 2022, 8:21am

I realized that I just need to get the x/y position of the click and compare that to the different locations within my drawing. For some kinds of SVG drawing, like bezier curves, it’s a little hard to compute the x/y location of a specific part of the curve (I think so… maybe I’m wrong) but I’m going to be drawing boxes and things that have an easily identifiable position.

system · March 30, 2022, 8:21am

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

Topic		Replies	Views
Help building a 2D game Learn	5	729	April 30, 2020
Will Elm be OK for heavy canvas application? Learn	5	1144	February 5, 2021
Dispatching custom events only if needed Learn	8	1353	December 21, 2018
Package for Mouse, Touch, Pointer, Wheel and Drag APIs Show and Tell	4	1340	February 20, 2018
Custom Elements: Extend SVG - Real coordinates on mouse events Learn	6	3179	September 7, 2018

Can Elm do this math educational game?

Related topics