Skip to content

Instantly share code, notes, and snippets.

@evancz

evancz/Mario.elm

Last active December 17, 2015 08:39
Show Gist options
  • Save evancz/5581910 to your computer and use it in GitHub Desktop.
Save evancz/5581910 to your computer and use it in GitHub Desktop.
Download ZIP
Embedding an Elm module in HTML. Warning, this is using a pre-release version of Elm 0.8, so the API may change!!!
Raw
Mario.elm
module Mario where
import Keyboard
import Mouse
import Window
-- MODEL
mario = { x=0, y=0, vx=0, vy=0, dir="right" }
-- UPDATE -- ("m" is for Mario)
jump {y} m = if y > 0 && m.y == 0 then { m | vy <- 5 } else m
gravity t m = if m.y > 0 then { m | vy <- m.vy - t/4 } else m
physics t m = { m | x <- m.x + t*m.vx , y <- max 0 (m.y + t*m.vy) }
walk {x} m = { m | vx <- x, dir <- if | x < 0 -> "left"
| x > 0 -> "right"
| otherwise -> m.dir }
step (t,dir) = physics t . walk dir . gravity t . jump dir
-- DISPLAY
render (w,h) (x,y) mario =
let half n = n `div` 2
verb = if | mario.y > 0 -> "jump"
| mario.vx /= 0 -> "walk"
| otherwise -> "stand"
path = "https://raw.github.com/evancz/elm-lang.org/master/resources/imgs/"
src = path ++ "mario/" ++ verb ++ "/" ++ mario.dir ++ ".gif"
in collage w h
[ rect w h |> filled (rgb 174 238 238)
, rect w 50 |> filled (rgb 74 163 41)
|> move 0 (24 - half h)
, toForm (image 35 35 src) |> move mario.x (mario.y + 63 - half h)
, toForm (image 19 21 (path ++ "skull/red.gif")) |> move (x - half w + 15) (half h - y + 15)
]
-- MARIO
input = let delta = lift (\t -> t/20) (fps 25)
in sampleOn delta (lift2 (,) delta Keyboard.arrows)
main = lift3 render Window.dimensions Mouse.position (foldp step mario input)
Raw
Mario.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Mario</title>
<script type="text/javascript" src="https://raw.github.com/evancz/elm-lang.org/bd38d65c4f45a2a334dad2c94fc77fab94a20864/resources/elm-mini.js"></script>
<script type="text/javascript" src="Mario.js"></script>
<style>
#mario { width:100%; height:200px; }
</style>
</head>
<body>
<h1>Embedded Mario</h1>
<p>This is a full Elm program embedded in HTML</p>
<div id="mario">Mario game written in Elm</div>
</body>
<script>
Elm.byId('mario', Elm.Mario);
</script>
</html>
Raw
Mario.js
// This is generated code, included for convenience.
// To generate it yourself, build version 0.8 of the
// comiple from source and run "elm --only-js Mario.elm"
Elm.Mario = function(elm){
var N = Elm.Native, _N = N.Utils(elm), _L = N.List(elm), _E = N.Error(elm), _str = N.JavaScript(elm).toString;
var $op = {};
var _ = Elm.Text(elm); var Text = _; var hiding={link:1, color:1, height:1}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Prelude(elm); var Prelude = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Signal(elm); var Signal = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.List(elm); var List = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Maybe(elm); var Maybe = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Time(elm); var Time = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Graphics.Element(elm); var Graphics = Graphics||{};Graphics.Element = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Color(elm); var Color = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Graphics.Collage(elm); var Graphics = Graphics||{};Graphics.Collage = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Keyboard(elm); var Keyboard = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Mouse(elm); var Mouse = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var _ = Elm.Window(elm); var Window = _; var hiding={}; for(var k in _){if(k in hiding)continue;eval('var '+k+'=_["'+k+'"]')}
var e, case0, mario_0, jump_1, y_11, gravity_2, physics_3, walk_4, x_18, step_5, render_6, half_29, verb_30, path_31, src_32, input_7, delta_34, main_8;
jump_1 = F2(function(_12000_9, m_10){
return (y_11 = _12000_9.y, (((_N.cmp(y_11,0).ctor==='GT')&&_N.eq(m_10.y,0))?_N.replace([['vy',5]], m_10):m_10));});
gravity_2 = F2(function(t_12, m_13){
return ((_N.cmp(m_13.y,0).ctor==='GT')?_N.replace([['vy',(m_13.vy-(t_12/4))]], m_13):m_13);});
physics_3 = F2(function(t_14, m_15){
return _N.replace([['x',(m_15.x+(t_14*m_15.vx))],['y',A2(max, 0, (m_15.y+(t_14*m_15.vy)))]], m_15);});
walk_4 = F2(function(_17000_16, m_17){
return (x_18 = _17000_16.x, _N.replace([['vx',x_18],['dir',((_N.cmp(x_18,0).ctor==='LT') ? _str('left') : ((_N.cmp(x_18,0).ctor==='GT') ? _str('right') : m_17.dir))]], m_17));});
step_5 = function(_19000_19){
return (e=_19000_19.ctor==='Tuple2'?function(x){
return A2(physics_3, _19000_19._0, A2(walk_4, _19000_19._1, A2(gravity_2, _19000_19._0, A2(jump_1, _19000_19._1, x))));}:null,e!==null?e:_E.Case('Line 19, Column 16'));};
render_6 = F3(function(_36001_22, _36000_23, mario_24){
return (e=_36001_22.ctor==='Tuple2'?(e=_36000_23.ctor==='Tuple2'?(verb_30 = ((_N.cmp(mario_24.y,0).ctor==='GT') ? _str('jump') : (!_N.eq(mario_24.vx,0) ? _str('walk') : _str('stand'))), path_31 = _str('https://raw.github.com/evancz/elm-lang.org/master/resources/imgs/'), src_32 = _L.append(path_31,_L.append(_str('mario/'),_L.append(verb_30,_L.append(_str('/'),_L.append(mario_24.dir,_str('.gif')))))), half_29 = function(n_33){
return A2(div, n_33, 2);}, A3(collage, _36001_22._0, _36001_22._1, _L.Cons(filled(A3(rgb, 174, 238, 238))(A2(rect, _36001_22._0, _36001_22._1)),_L.Cons(A2(move, 0, (24-half_29(_36001_22._1)))(filled(A3(rgb, 74, 163, 41))(A2(rect, _36001_22._0, 50))),_L.Cons(A2(move, mario_24.x, ((63+mario_24.y)-half_29(_36001_22._1)))(toForm(A3(image, 35, 35, src_32))),_L.Cons(A2(move, (15+(_36000_23._0-half_29(_36001_22._0))), (15+(half_29(_36001_22._1)-_36000_23._1)))(toForm(A3(image, 19, 21, _L.append(path_31,_str('skull/red.gif'))))),_L.Nil)))))):null,e!==null?e:_E.Case('Line 24, Column 3')):null,e!==null?e:_E.Case('Line 24, Column 3'));});
mario_0 = {
_:{
},
dir:_str('right'),
vx:0,
vy:0,
x:0,
y:0};
input_7 = (delta_34 = A2(lift, function(t_35){
return (t_35/20);}, fps(25)), A2(sampleOn, delta_34, A3(lift2, function(v0_36){
return function(v1_37){
return {ctor:"Tuple2", _0:v0_36, _1:v1_37};};}, delta_34, Keyboard.arrows)));
main_8 = A4(lift3, render_6, Window.dimensions, Mouse.position, A3(foldp, step_5, mario_0, input_7));
elm.Native = elm.Native||{};
var _ = elm.Native.Mario||{};
_.$op = {};
_.mario = mario_0;
_.jump = jump_1;
_.gravity = gravity_2;
_.physics = physics_3;
_.walk = walk_4;
_.step = step_5;
_.render = render_6;
_.input = input_7;
_.main = main_8
return elm.Mario = _;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment