javascript-racer-v2/bhroad.html at main · Ehuchet/javascript-racer-v2 · 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
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>

<html>
<head>
    <title>Javascript Racer - v4 (final)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="common.css" rel="stylesheet" type="text/css"/>
    <!--script src="http://jsconsole.com/remote.js?ehuchet"></script-->
</head>

<body>

<table id="controls">
    <tr>
        <!--td id="fps" colspan="2" align="right"></td-->
        <td id="fps" colspan="2"></td>
    </tr>
    <tr>
        <th><label for="resolution">Resolution :</label></th>
        <td>
            <select id="resolution" style="width:100%">
                <option value='fine'>Fine (1280x960)</option>
                <option selected value='high'>High (1024x768)</option>
                <option value='medium'>Medium (640x480)</option>
                <option value='low'>Low (480x360)</option>
            </select>
        </td>
    </tr>
    <tr>
        <th><label for="lanes">Lanes :</label></th>
        <td>
            <select id="lanes">
                <option>1</option>
                <option>2</option>
                <option selected>3</option>
                <option>4</option>
            </select>
        </td>
    </tr>
    <tr>
        <th><label for="bike">Rotation :</label></th>
        <td>
            <input type="checkbox" id="bike">
        </td>
    </tr>
    <tr>
        <th><label for="autoSteer">Auto Accelerate :</label></th>
        <td>
            <input type="checkbox" id="autoSteer">
        </td>
    </tr>
    <tr>
        <th><label for="totalCars">Total Cars (<span id="currentTotalCars"></span>) :</label></th>
        <td><input id="totalCars" type='range' min='0' max='200' title="integer (0-200)"></td>
    <tr>
        <th><label for="roadWidth">Road Width (<span id="currentRoadWidth"></span>) :</label></th>
        <td><input id="roadWidth" type='range' min='500' max='3000' title="integer (500-3000)"></td>
    </tr>
    <tr>
        <th><label for="cameraHeight">CameraHeight (<span id="currentCameraHeight"></span>) :</label></th>
        <td><input id="cameraHeight" type='range' min='500' max='10000' title="integer (500-10000)"></td>
    </tr>
    <tr>
        <th><label for="drawDistance">Draw Distance (<span id="currentDrawDistance"></span>) :</label></th>
        <td><input id="drawDistance" type='range' min='100' max='500' title="integer (100-500)"></td>
    </tr>
    <tr>
        <th><label for="fieldOfView">Field of View (<span id="currentFieldOfView"></span>) :</label></th>
        <td><input id="fieldOfView" type='range' min='80' max='140' title="integer (80-140)"></td>
    </tr>
    <tr>
        <th><label for="fogDensity">Fog Density (<span id="currentFogDensity"></span>) :</label></th>
        <td><input id="fogDensity" type='range' min='0' max='50' title="integer (0-50)"></td>
    </tr>
</table>

<div id='instructions'>
    <p>Use the <b>arrow keys</b> to drive the car.</p>
</div>

<div id="racer">
    <div id="frame"></div>
    <div id="hud">
        <span id="speed" class="hud">Speed: <span id="speed_value" class="value">0</span>%</span>
        <span id="km_remaining" class="hud">Next stop: <span id="km_remaining_value" class="value">0</span></span>
        <span id="smoothness" class="hud">EQ: <span id="smoothness_value" class="value">0</span></span>
        <span id="seeds_collected" class="hud">Seeds: <span id="seeds_collected_value" class="value">0</span></span>
        <span id="scale_factor" class="hud">Scale: <span id="scale_factor_value" class="value">0</span></span>
        <span id="time_marker" class="hud"><span id="time_marker_value" class="value"></span></span>
    </div>
    <!--div id="rotationFrame"-->
    <canvas id="canvas">
        Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
    </canvas>
    <!--/div-->
    <!--div id="buttons">
        <button id="left" class="buttons"> left </button>
        <button id="faster" class="buttons"> faster </button>
        <button id="slower" class="buttons"> slower </button>
        <button id="right" class="buttons"> right </button>
    </div-->
    <div id="left" class="buttons"> left</div>
    <div id="faster" class="buttons"> faster</div>
    <div id="slower" class="buttons"> slower</div>
    <div id="right" class="buttons"> right</div>
    <div id="timeup" class="buttons"> time scale up</div>
    <div id="timedown" class="buttons"> time scale down</div>
    Loading...
</div>

<audio id='music'>
    <source src="music/racer.ogg">
    <source src="music/racer.mp3">
</audio>

<span id="mute"></span>

<script src="stats.js"></script>
<script src="common.js"></script>
<script src="main.js"></script>

</body>
</html>