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
|
// configure the canvas -- our playspace...magic circle and what not
const canvas = document.getElementById("gameCanvas");
canvas.width = 512;
canvas.height = 512;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#E0F8CF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// our noble avatar into playspace
const player = {
x: 50,
y: 50,
width: 16,
height: 16,
step: 10,
color: "#65ff00",
colorAlt: "pink",
spriteUrl: "chickadee.svg"
};
const playerSprite = new Image();
playerSprite.src = player.spriteUrl;
const npc = {
x: 100, // starting x-position
y: 100, // starting y-position
width: 16, // width of the NPC
height: 16, // height of the NPC
color: 'pink' // color of the NPC
};
// Function to draw the NPC
function drawNPC() {
ctx.fillStyle = npc.color;
ctx.fillRect(npc.x, npc.y, npc.width, npc.height);
}
// add keyboard input
// FIXME: this input is blocking, allowing for only 1 key to be read at a time
// this means that if you wanna do 2 things at 1 time you cannot.
// For more info, <https://medium.com/@dovern42/handling-multiple-key-presses-at-once-in-vanilla-javascript-for-game-controllers-6dcacae931b7>
document.addEventListener("keydown", (event) => {
switch (event.code) {
case "ArrowLeft":
case "KeyH":
case "KeyA":
player.x -= player.step;
break;
case "ArrowRight":
case "KeyL":
case "KeyD":
player.x += player.step;
break;
case "ArrowUp":
case "KeyK":
case "KeyW":
player.y -= player.step;
break;
case "ArrowDown":
case "KeyJ":
case "KeyS":
player.y += player.step;
break;
case "KeyZ":
case "KeyN":
console.log('Action A');
break;
case "KeyX":
case "KeyM":
console.log('Action B');
break;
}
});
// game loop
function gameLoop() {
// clear the canvas every tick
ctx.clearRect(0, 0, canvas.width, canvas.height);
// looping canvas space so you can't wander out of view
// this feels like a hack...
if (player.x < 0) {
player.x = canvas.width - 1
}
if (player.x > canvas.width) {
player.x = 1
}
if (player.y < 0) {
player.y = canvas.height - 1
}
if (player.y > canvas.height) {
player.y = 1
}
// detect if the player is touching the NPC
if (player.x < npc.x + npc.width && player.x + player.width > npc.x && player.y < npc.y + npc.height && player.y + player.height > npc.y) {
// collision detected!
console.log('collision detected!');
// change the color of the NPC
npc.color = 'red';
}
// draw
// ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.drawImage(playerSprite, player.x, player.y, player.width, player.height);
drawNPC();
// next frame
requestAnimationFrame(gameLoop);
}
// start the game loop
requestAnimationFrame(gameLoop);
|