Examples My little doge

My little doge

Add a playable doge manipulating the DOM with Prolog.

Run example

p (poop)

Source code

<!-- Program --> <script type="text/prolog" id="doge.pl"> :- use_module(library(dom)). % move/3 % Move the doge move(Doge, Axis, Incr) :- get_by_id(board, Board), style(Doge, Axis, px(X0)), X1 is X0+Incr, X1 >= -10, (Axis = top -> X1 =< 310 ; X1 =< 720), style(Doge, Axis, px(X1)). % anim/2 % Change animation of the doge anim(Doge, Dir) :- atom_concat('/content/examples/resources/my-little-doge/', Dir, Src1), atom_concat(Src1, '.gif', Src), style(Doge, backgroundImage, url(Src)). % clear_control/0 % Remove the focus class of any control clear_controls :- findall(X, (get_by_class(control, X), remove_class(X, focus)), _). % remark_control/1 % Remark the pressed control remark_control(Key) :- clear_controls, atom_concat('control-', Key, Id), get_by_id(Id, Control), add_class(Control, focus). % action/2 % up action(Doge, w) :- anim(Doge, up), move(Doge, top, -10). % down action(Doge, s) :- anim(Doge, down), move(Doge, top, 10). % left action(Doge, a) :- anim(Doge, left), move(Doge, left, -10). % right action(Doge, d) :- anim(Doge, right), move(Doge, left, 10). % poop action(Doge, p) :- style(Doge, top, px(Y0)), style(Doge, left, px(X0)), Y1 is Y0+50, X1 is X0+37, create(div, Poop), style(Poop, top, px(Y1)), style(Poop, left, px(X1)), add_class(Poop, poop), insert_before(Poop, Doge). % init/0 % Initilize the game init :- get_by_id(doge, Doge), get_by_tag(body, Body), bind(Body, keyup, _, clear_controls), bind(Body, keydown, Event, ( event_property(Event, key, Key), remark_control(Key), action(Doge, Key), prevent_default(Event) )). </script> <!-- Styles --> <style type="text/css"> #board { background: green url("/content/examples/resources/my-little-doge/grass.png") center center repeat; width: 800px; height: 400px; border: 10px solid #563101; box-shadow: 0px 20px 0px #3d2505, inset 0px 20px 0px #3d2505; margin-bottom: 60px; } #doge { background: transparent url("/content/examples/resources/my-little-doge/down.gif") center center no-repeat; position: relative; top: 157px; left: 357px; width: 86px; height: 86px; margin-bottom: -86px; z-index: 90; } .poop { background: transparent url("/content/examples/resources/my-little-doge/poop.gif") center center no-repeat; position: relative; width: 20px; height: 20px; margin-bottom: -20px; z-index: 80; } #controls { position: relative; top: 30px; left: 10px; z-index: 99; } .control { background-color: #fafafa; display: inline-block; color: #444444; font-weight: bold; font-size: 20px; font-family: monospace, arial; text-align: center; padding: 5px 0px; border-radius: 3px; box-shadow: 0px 5px 0px #dfdfdf; width: 40px; margin-bottom: 10px; opacity: 0.9; } .control.focus { background-color: #eda240; color: #ffffff; box-shadow: 0px 5px 0px #d0831e; opacity: 1; } #control-w { display: block; position: relative; left: 45px; } #control-p { display: block; width: 130px; } </style> <!-- Board --> <div id="board"> <div id="doge"></div> <div id="controls"> <div class="control" id="control-w">w</div> <div class="control" id="control-a">a</div> <div class="control" id="control-s">s</div> <div class="control" id="control-d">d</div> <div class="control" id="control-p">p (poop)</div> </div> </div> <script type="text/javascript"> // Create session var session = pl.create(1000); // Consult program session.consult("doge.pl"); // Query goal session.query("init."); // Find answers session.answer(console.log); </script>