forked from jpslav/jsb-autopilot
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
124 lines (102 loc) · 3.9 KB
/
index.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
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
124
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>OX Code Comp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script type="text/javascript" src="https://openstax-fun.s3.amazonaws.com/jsbattle/jsbattle2.min.js"></script>
<script type="text/javascript" src="https://openstax-fun.s3.amazonaws.com/jsbattle/bots.js"></script>
</head>
<!-- YOU DON'T NEED TO EDIT THIS FILE -->
<!-- YOU DON'T NEED TO EDIT THIS FILE -->
<!-- YOU DON'T NEED TO EDIT THIS FILE -->
<body onload="bodyOnLoad()">
<div>
<canvas id="battlefield" style="width: 900px; height: 600px"></canvas>
</div>
Opponent:
<select id="otherTeamBot">
<option>chicken</option>
<option>circler</option>
<option>crawler</option>
<option>crazy</option>
<option>dodge</option>
<option>dummy</option>
<option>jamro</option>
<option>kamikaze</option>
<option>sniper</option>
</select>
Opponent Team Size:
<select id="opponentTeamSize">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
My Team Size:
<select id="myTeamSize">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<button onclick="restartSimulation()">Restart</button>
<div id="data" style="margin-top: 20px"/>
</body>
<script type="text/javascript">
var canvas = document.getElementById('battlefield');
var renderer = JsBattle.createRenderer('debug');
renderer.init(canvas);
var simulation = JsBattle.createSimulation(renderer);
simulation.init(900, 600);
var otherTeamBot = localStorage.getItem('otherTeamBot') || 'chicken';
var otherTeamSize = localStorage.getItem('otherTeamSize') || 1;
var myTeamSize = localStorage.getItem('myTeamSize') || 1;
var myTeamName = localStorage.getItem('myTeamName') || 'us';
function watchSelect(id, callback) {
const select = document.querySelector(`[id="${id}"]`);
select.addEventListener(`change`, (e) => {
localStorage.setItem(id, e.target.value)
callback(e.target.value);
restartSimulation();
});
}
function bodyOnLoad() {
restartSimulation();
watchSelect('otherTeamBot', (name) => otherTeamBot = name)
watchSelect('opponentTeamSize', (count) => otherTeamSize = count);
watchSelect('myTeamSize', (count) => myTeamSize = count);
}
function addTanks(count, code, teamName) {
for (var ii = 0; ii < count; ii++) {
var ai = JsBattle.createAiDefinition();
ai.fromCode(teamName, code);
ai.assignToTeam(teamName);
simulation.addTank(ai);
}
}
function restartSimulation() {
simulation.stop();
renderer = JsBattle.createRenderer('debug');
renderer.init(canvas);
simulation = JsBattle.createSimulation(renderer);
simulation.init(900, 600);
battlefieldData = {
width: simulation.battlefield._width,
height: simulation.battlefield._height,
origin: { x: simulation.battlefield.minX, y: simulation.battlefield.minY }
};
document.getElementById("data").innerHTML = "Battlefield: " + JSON.stringify(battlefieldData);
var myCode = `${myTank.toString()}; myTank();`;
addTanks(myTeamSize, myCode, myTeamName);
addTanks(otherTeamSize, bots[otherTeamBot], otherTeamBot);
simulation.start();
}
</script>
<script type="module" src="./main.js"></script>
</html>