-
Notifications
You must be signed in to change notification settings - Fork 0
/
screen.html
46 lines (41 loc) · 1.17 KB
/
screen.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
<!DOCTYPE html>
<style>
.tank {
position: absolute;
margin: -12px 0 0 -16px;
border: 1px solid;
width: 24px;
height: 32px;
}
.enemy {
color: red;
background-color: rgba(255, 0, 0, 0.1);
}
.friendly {
color: blue;
background-color: rgba(0, 0, 255, 0.1);
}
</style>
<div id=canvas>
<div class="enemy tank" data-position="10,12" data-rotation="45"></div>
<div class="friendly tank" data-position="10,15" data-rotation="50"></div>
<div class="enemy tank" data-position="15,10" data-rotation="22"></div>
</div>
<script type=text/javascript>
function setEntityPosition(entity, x, y) {
console.log(entity, x, y);
entity.style.top = y * 16 + 'px';
entity.style.left = x * 16 + 'px';
}
function setEntityRotationDeg(entity, rotation) {
entity.style.transform = 'rotate('+rotation+'deg)';
}
var entities = document.querySelectorAll('[data-position]');
for(var i=0, entity; entity = entities[i]; i++) {
var xy = entity.dataset.position.split(',');
setEntityPosition(entity, xy[0]|0, xy[1]|0);
}
var entities = document.querySelectorAll('[data-rotation]');
for(var i=0, entity; entity = entities[i]; i++)
setEntityRotationDeg(entity, entity.dataset.rotation|0);
</script>