-
Notifications
You must be signed in to change notification settings - Fork 0
/
player.js
101 lines (88 loc) · 2.24 KB
/
player.js
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
// html references
const camera = document.getElementById("camera");
const gameWorld = document.getElementById("game-world");
// event listeners
document.addEventListener("keydown", startPlayerMovement);
document.addEventListener("keyup", stopPlayerMovement);
/* variables */
// animation related
let previousTimestamp; // stores timestamp since last frame
let delta; // stores frame duration, in seconds
// player related
const speed = 600; // px/s the player moves at
// game grid
let grid;
let upPressed = false;
let leftPressed = false;
let downPressed = false;
let rightPressed = false;
function startPlayerMovement(ev)
{
if (ev.key == "w")
{
upPressed = true;
}
else if (ev.key == "a")
{
leftPressed = true;
}
else if (ev.key == "s")
{
downPressed = true;
}
else if (ev.key == "d")
{
rightPressed = true;
}
}
function stopPlayerMovement(ev)
{
if (ev.key == "w")
{
upPressed = false;
}
else if (ev.key == "a")
{
leftPressed = false;
}
else if (ev.key == "s")
{
downPressed = false;
}
else if (ev.key == "d")
{
rightPressed = false;
}
}
function movePlayer()
{
let moveDir = [0, 0];
if (upPressed) moveDir[1]++;
if (leftPressed) moveDir[0]++;
if (downPressed) moveDir[1]--;
if (rightPressed) moveDir[0]--;
if (moveDir[0] != 0 || moveDir[1] != 0) // proper movement input occurred
{
let effectiveSpeed = speed;
if (Math.abs(moveDir[0]) + Math.abs(moveDir[1]) == 2)
{
effectiveSpeed /= Math.sqrt(2);
}
gameWorld.style.left = (parseInt(gameWorld.style.left, 10) + effectiveSpeed * delta * moveDir[0]) + "px";
gameWorld.style.top = (parseInt(gameWorld.style.top, 10) + effectiveSpeed * delta * moveDir[1]) + "px";
}
}
gameWorld.style.left = "0px";
gameWorld.style.top = "0px"; // ensures these aren't undefined
requestAnimationFrame(gameLoop);
function gameLoop(currentTimestamp)
{
if (!previousTimestamp)
{
previousTimestamp = currentTimestamp;
}
delta = (currentTimestamp - previousTimestamp) / 1000;
previousTimestamp = currentTimestamp;
movePlayer();
requestAnimationFrame(gameLoop);
}