traffic-simulation-de/coffeemeterGame.html at master · PlamenShkodrov/traffic-simulation-de · GitHub

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<!DOCTYPE html public>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link href="css/styleCoffeemeterGame.css"
       rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" type="image/jpg" href="./favicon.jpg">

    <title>Coffeemeter Game: Who Can Drive Fastest and Smoothest?</title>
</head>


<body>


<!-- ############################################## -->
<!-- outer container                                -->
<!-- ############################################## -->

<div id="container">


<!-- ############################################## -->
<!-- header: title image loaded as background image via css -->
<!-- ############################################## -->

<div id="header">
  <img class="title" src="figs/title.png"  width="100%"/>
</div>


<!-- ############################################## -->
<!-- Buttons                                        -->
<!-- ############################################## -->

<!-- redirects to other scenarios, defines myRedirectX -->
<script src="js/redirect.js" type="text/javascript"></script>

<div id="scenarios">
  <button id="startStopButton" onclick="myRestartStopFunction()"> </button>
</div>

<div id="mouseMoveDisplay"> Displaytext  </div>

<!-- ############################################## -->
<!-- the actual simulation canvas -->
<!-- ############################################## -->

<!-- ATTENTION! Mouse DOS if not EXPLICIT pixel size of initial --
-- canvas, even if wrong! vw,vh does not work! -->

<div id="contents">
  <canvas id="canvas_coffeeGame" width="700" height="800"
          onmousemove="myMouseMoveHandler(event)"
          onmouseout="myMouseOutHandler()"
          onclick="myClickHandler()"
	  onkeyup="myCheckKeyUpC(event)">
    You are probably using a very ancient web browser (or an Internet Explorer)
    not supporting html5 canvas. Please switch to another browser for
    running this simulation.
  </canvas>
</div>

<!-- ################################################# -->
<!-- Sliders: global simulation variables              -->
<!-- ################################################# -->

<div id="sliders">
<table  border="0" cellspacing="1" cellpadding="1" >


<tr>
  <td> Skala [m] </td>
  <td> <input id="slider_sizePhys" type="range" min="50" max="500"
              step="1" value="300"></td>
  <td> <div id="slider_sizePhysVal"></div></td>
</tr>
</div>


</div> <!-- end outer "container" -->


<!-- ########################################################## -->
<!-- specific scripts; position below any simulation elements ! -->
<!-- ########################################################## -->

<script src="js/seedrandom.min.js"></script> <!-- random w seed debug -->

<script src="js/colormanip.js"></script>

<script src="js/models.js"></script>
<script src="js/vehicle.js"></script>
<script src="js/paths.js"></script>
<script src="js/road.js"></script>

<script src="js/Coffeemeter.js"></script>
<script src="js/Speedometer.js"></script>
<script src="js/EgovehControl.js"></script>
<script src="js/transform3d.js"></script>
<!-- <script src="../demo_js/transform3d.js"></script> -->

<script src="js/coffeemeterGame_gui.js"></script>
<script src="js/coffeemeterGame.js"></script>


</body>
</html>