├── index.html
└── script.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | let canvas = document.getElementById("canvas");
2 | let ctx = canvas.getContext("2d");
3 | let blockSize = 10;
4 | const levelWidth = 10;
5 | const levelHeight = 10;
6 | canvas.width = levelWidth * blockSize;
7 | canvas.height = levelHeight * blockSize;
8 | let X = 4, Y = 5;
9 |
10 | let map = [
11 | [0,0,0,0,0,0,0,0,0,0],
12 | [0,0,0,0,0,0,0,0,0,0],
13 | [0,0,1,1,0,0,0,0,0,0],
14 | [0,0,1,1,0,0,0,0,0,0],
15 | [0,0,0,0,0,0,0,0,0,0],
16 | [0,0,0,0,0,0,0,0,0,0],
17 | [0,0,0,0,0,0,0,0,0,0],
18 | [0,0,0,0,0,0,0,0,0,0],
19 | [0,0,1,1,1,1,1,0,0,0],
20 | [0,0,0,0,0,0,0,0,0,0]
21 | ];
22 |
23 | let fpsOutput = document.getElementById("fps");
24 | let times = [];
25 | let timeStart = 0;
26 | function update(timestamp) {
27 | // Calculating FPS
28 | const NOW = performance.now();
29 | while (times.length > 0 && times[0] <= NOW - 1000) {
30 | times.shift();
31 | }
32 | times.push(NOW)
33 | fps = times.length;
34 | fpsOutput.innerHTML = `FPS: ${fps}`;
35 | //ctx.fillText(`fps ${fps}`, 20,20);
36 |
37 | // Main loop
38 | if (timestamp - timeStart >= 100) {
39 | draw();
40 | timeStart = timestamp;
41 | }
42 | requestAnimationFrame(update);
43 | }
44 | update();
45 |
46 | function draw() {
47 | ctx.fillStyle = "rgba(0,50,200)";
48 | ctx.fillRect(0, 0, canvas.width, canvas.height);
49 | // Drawing the map
50 | for (let i = 0; i < levelHeight; i++) {
51 | for (let j = 0; j < levelWidth; j++) {
52 | if (map[i][j] === 1) {
53 | ctx.fillStyle = "black";
54 | ctx.fillRect(j * blockSize, i * blockSize, blockSize, blockSize)
55 | }
56 | if (map[i][j] === 0) {
57 | ctx.fillStyle = "gray";
58 | ctx.fillRect(j * blockSize, i * blockSize, blockSize, blockSize)
59 | }
60 | }
61 | }
62 |
63 | //Drawing the rays
64 | ctx.fillStyle = "green";
65 | castRay(X * blockSize, Y * blockSize, 0,0)
66 |
67 | // Drawing the player
68 | ctx.fillStyle = "blue";
69 | ctx.fillRect(X*blockSize,
70 | Y*blockSize,
71 | blockSize,
72 | blockSize);
73 |
74 |
75 | };
76 |
77 | function getDistance(x1,y1, x2,y2) {
78 | let a = x1 - x2;
79 | let b = y1 - y2;
80 |
81 | return Math.sqrt(a * a + b * b);
82 | }
83 |
84 | let plot = (x,y) => {
85 | ctx.fillRect(x,y,1,1);
86 | return true;
87 | };
88 |
89 | let castRay = (x0,y0, x1,y1) => {
90 | let swap = false;
91 | let dx = x1-x0;
92 | let dy = y1-y0;
93 |
94 | if (Math.abs(dx) < Math.abs(dy)) {
95 | let tmp;
96 | tmp = dx; dx = dy; dy = tmp;
97 | swap = true
98 | }
99 |
100 | let a = Math.abs(dy);
101 | let b = -Math.abs(dx);
102 |
103 | let x = x0;
104 | let y = y0;
105 |
106 | let d = 2 * a + b;
107 |
108 | let q = 1;
109 | let s = 1;
110 | if (x0 > x1) q = -1;
111 | if (y0 > y1) s = -1;
112 | //plot(x,y);
113 |
114 | for (let k=0; k < -b; k++) {
115 | if (d > 0) {
116 | x = x + q; y = y + s;
117 | d = d + 2 * (a + b);
118 | }
119 | else {
120 | x = x + q;
121 | if (swap) { y = y + s; x = x - q; }
122 | d = d + 2 * a;
123 | }
124 | for (let i = 0; i < levelHeight; i++) {
125 | for (let j = 0; j < levelWidth; j++) {
126 | if(map[Math.floor(y/blockSize)][Math.floor(x/blockSize)] !== 1) {
127 | plot(x,y);
128 | } else return;
129 | }
130 | }
131 | //plot(x,y);
132 | }
133 | };
134 |
135 | ctx.fillStyle = "green";
136 | //ctx.fillStyle = "rgb(0,0,255)";
137 | //castRay(8,0,4,4)
138 |
--------------------------------------------------------------------------------