-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (76 loc) · 2.36 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
<html>
<head>
<style>
body {
margin : 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="Keyboard.js"></script>
<script src="socket.io.min.js"></script>
<script src="server.js"></script>
<script src="client.js"></script>
<script src="funciones.js"></script>
<script>
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var kb = new KeyboardJS(true);
var cam = new Camara(canvas.width/2, canvas.height/2);
var map = new Map();
var speed = 1;
function logic(dt) {
if(kb.char('A')) cam.actualPos.x -= speed*dt;
else if(kb.char('D'))cam.actualPos.x += speed*dt;
if(kb.char('S')) cam.actualPos.y += speed*dt;
else if(kb.char('W')) cam.actualPos.y -= speed*dt;
cam.logic(dt);
}
function render(ctx) {
var iX = Math.floor((cam.pos.x - canvas.width/2)/CELL_EDGE);
var iY = Math.floor((cam.pos.y - canvas.height/2)/CELL_EDGE);
var eX = Math.floor((cam.pos.x + canvas.width/2)/CELL_EDGE);
var eY = Math.floor((cam.pos.y + canvas.height/2)/CELL_EDGE);
ctx.save();
cam.focus(ctx);
//ctx.globalAlpha = 0.3;
for (var x = iX; x <= eX; ++x) {
for (var y = iY; y <= eY; ++y) {
var cell = map.getCellAtPos(new Pos(x, y));
ctx.drawImage(cell.buff,x*CELL_EDGE,y*CELL_EDGE);
}
}
//ctx.globalAlpha = 1;
ctx.restore();
}
window.onresize = function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render(ctx);
}
window.onresize();
var oldDate = +new Date();
function mainLoop () {
requestAnimFrame(mainLoop);
stats.begin();
var newDate = +new Date();
var delta = newDate - oldDate;
oldDate = newDate;
logic(delta);
render(ctx);
stats.end();
}
requestAnimFrame(mainLoop);
</script>
</body>
</html>