-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
102 lines (83 loc) · 2.98 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
<!-- 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()">
<canvas id="battlefield" style="width: 900px; height: 600px"></canvas>
Opponent:
<select id="opponent">
<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 = 'chicken';
var otherTeamSize = 1;
var myTeamSize = 1;
var myTeamName = 'us';
function watchSelect(id, callback) {
const select = document.querySelector(`[id="${id}"]`);
select.addEventListener(`change`, (e) => {
callback(e.target.value);
restartSimulation();
});
}
function bodyOnLoad() {
restartSimulation();
watchSelect('opponent', (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>