This repository has been archived by the owner on Nov 14, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgame.html
77 lines (75 loc) · 3.27 KB
/
game.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/main.css"/>
<script type="text/javascript" src="viewportEngine.js"></script>
<script type="text/javascript" src="scriptEngine.js"></script>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(() =>{
initScriptEngine();
initViewportEngine();
})
</script>
<div class='rightcontainer'>
<div style='height:377px; border-style: solid;'>
<span class='label'>Story:</span>
<div style='height:86%; overflow-y: auto;' id='scriptContainer'></div>
<div id='gamePlayerContainer'>
<button id='play'>Play</button>
<button id='reset'>Reset</button>
</div>
</div>
</div>
<div class='leftcontainer'>
<div id="viewport" class='leftcontainer' style="width:100% !important; background-image: url('images/mario_bg.jpg'); height: 377px; float:left; border-style: solid;">
<div id="sprite" style="padding-top:269px;">
<img id="sprite-image" src="images/mario_stop.png" style="height:50px;">
</div>
<div id="ladder-sprite" style="margin-top:-60px; padding-left:75px;">
<img id="ladder-sprite-image" src="images/ladder.png" style="height:50px;">
</div>
</div>
<div style='clear:both'></div>
<div id='actionsContainer' style='margin-top:20px; border-style: solid; padding: 10px 0px 10px 0px'>
<div class='instructionGroup'>
<div style='float:left' class='label'>Actions:</div>
<div style='float:left'>
<button class='action line' id='walkLeft'>Walk Left</button>
<button class='action line' id='walkRight'>Walk Right</button>
<button class='action line' id='takeLadder'>Take Ladder</button>
<button class='action line' id='dropLadder'>Drop Ladder</button>
</div>
</div>
<div style='clear:both'></div>
<div class='instructionContainerRow instructionGroup'>
<div style='float:left' class='label'>Repetition:</div>
<div style='float:left'>
<button class='think line' id='while'>While</button>
</div>
</div>
<div style='clear:both'></div>
<div class='instructionContainerRow instructionGroup'>
<div style='float:left' class='label'>Evaluation:</div>
<div style='float:left'>
<button class='think line' id='if'>If</button>
</div>
</div>
<div style='clear:both'></div>
<div class='instructionContainerRow instructionGroup'>
<div style='float:left' class='label'>Condition:</div>
<div style='float:left'>
<button class='condition line' id='not'>Not</button>
<button class='condition line' id='AtLadder'>At The Ladder</button>
<button class='condition line' id='AtCanyon'>At The Canyon</button>
<button class='condition line' id='AtPrincess'>At The Princess</button>
<button class='condition line' id='HasLadder'>Have Ladder</button>
</div>
</div>
<div style='clear:both'></div>
</div>
</div>
<script type="text/javascript" src="lib/move.min.js"></script>
</body>
</html>