Can Elm do this math educational game?

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?

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

Good luck :wink:

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.

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.

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.

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.

1 Like

Here’s the same code in an Ellie:

https://ellie-app.com/gVfbLbhWdnFa1

1 Like

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

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

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.

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