/
MapCanvas.js
101 lines (93 loc) · 2.86 KB
/
MapCanvas.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
import React, { useEffect, useRef, useState } from "react";
import background from "../statics/images/background.svg";
import wobbuffetsArray from "../statics/images/wobbuffetsArray";
const MAP_CONSTANTS = {};
MAP_CONSTANTS.IMG_WIDTH = 116;
MAP_CONSTANTS.IMG_HEIGHT = 125;
MAP_CONSTANTS.KEY_LEFT = 37;
MAP_CONSTANTS.KEY_DOWN = 38;
MAP_CONSTANTS.KEY_RIGHT = 39;
MAP_CONSTANTS.KEY_UP = 40;
MAP_CONSTANTS.SPEED = 8;
MAP_CONSTANTS.FRAMES_LENGTH = 23;
const MapCanvas = () => {
const canvasRef = useRef(null);
const requestAnimationRef = useRef(null);
const positionRef = useRef({ x: 0, y: 0 });
const [pressedKey, setPressedKey] = useState(null);
const [currentFrame, setCurrentFrame] = useState(0);
const move = ({ x, y }) => {
const newX = positionRef.current.x + x;
const newY = positionRef.current.y + y;
if (newX < 0 || newX > canvasRef.current.width - MAP_CONSTANTS.IMG_WIDTH)
return;
if (newY < 0 || newY > canvasRef.current.height - MAP_CONSTANTS.IMG_HEIGHT)
return;
positionRef.current = { x: newX, y: newY };
setCurrentFrame((prev) =>
prev < MAP_CONSTANTS.FRAMES_LENGTH ? prev + 1 : 0
);
};
const render = () => {
const canvas = canvasRef.current;
const context = canvas.getContext("2d");
const wobbuffetsImage = new Image();
wobbuffetsImage.src = wobbuffetsArray[currentFrame];
wobbuffetsImage.onload = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.drawImage(
wobbuffetsImage,
positionRef.current.x,
positionRef.current.y
);
};
handleKey();
requestAnimationRef.current = requestAnimationFrame(render);
};
const handleKey = () => {
switch (pressedKey) {
case MAP_CONSTANTS.KEY_LEFT:
move({ x: -1 * MAP_CONSTANTS.SPEED, y: 0 });
return;
case MAP_CONSTANTS.KEY_DOWN:
move({ x: 0, y: -1 * MAP_CONSTANTS.SPEED });
return;
case MAP_CONSTANTS.KEY_RIGHT:
move({ x: MAP_CONSTANTS.SPEED, y: 0 });
return;
case MAP_CONSTANTS.KEY_UP:
move({ x: 0, y: MAP_CONSTANTS.SPEED });
return;
case null:
return;
default:
move({ x: 0, y: 0 });
return;
}
};
useEffect(() => {
window.addEventListener("keydown", (e) => {
e.preventDefault();
setPressedKey(e.keyCode);
});
window.addEventListener("keyup", () => setPressedKey(null));
requestAnimationRef.current = requestAnimationFrame(render);
return () => {
cancelAnimationFrame(requestAnimationRef.current);
};
});
return (
<canvas
ref={canvasRef}
style={{
backgroundImage: `url(${background})`,
backgroundSize: "cover",
overflow: "hidden",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
}}
></canvas>
);
};
export default MapCanvas;