-
Notifications
You must be signed in to change notification settings - Fork 2
/
2dmap_collision.htm
246 lines (187 loc) · 6.88 KB
/
2dmap_collision.htm
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<html>
<head>
<title>JavaScript Wolfenstein 3D Engine - Player movement + collision</title>
<!--
/*
* Example code from the article at: http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/
* Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com, http://blog.nihilogic.dk/
* The code is available to use under the terms of the MIT License
* [http://www.opensource.org/licenses/mit-license.php]
*/
-->
<style>
div#minimapcontainer {
}
canvas#minimap {
position : absolute;
}
canvas#minimapobjects {
position : absolute;
}
</style>
<script src="excanvas.js" type="text/javascript"></script>
</head>
<body>
<div id="minimapcontainer">
<canvas id="minimap"></canvas>
<canvas id="minimapobjects"></canvas>
</div>
<script type="text/javascript">
var $ = function(id) { return document.getElementById(id); };
var dc = function(tag) { return document.createElement(tag); };
var map = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,3,0,3,0,0,1,1,1,2,1,1,1,1,1,2,1,1,1,2,1,0,0,0,0,0,0,0,0,1],
[1,0,0,3,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,1,1,1,1,1],
[1,0,0,3,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,3,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
[1,0,0,3,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,3,3,3,0,0,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
[1,0,0,0,0,0,0,0,0,3,3,3,0,0,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,3,3,3,0,0,3,3,3,0,0,0,0,0,0,0,0,0,3,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,3,3,3,0,0,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,4,0,0,4,2,0,2,2,2,2,2,2,2,2,0,2,4,4,0,0,4,0,0,0,0,0,0,0,1],
[1,0,0,4,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,0,4,0,0,0,0,0,0,0,1],
[1,0,0,4,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,0,4,0,0,0,0,0,0,0,1],
[1,0,0,4,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,0,4,0,0,0,0,0,0,0,1],
[1,0,0,4,3,3,4,2,2,2,2,2,2,2,2,2,2,2,2,2,4,3,3,4,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
var player = {
x : 16, // current x, y position
y : 10,
dir : 0, // the direction that the player is turning, either -1 for left or 1 for right.
rot : 0, // the current angle of rotation
speed : 0, // is the playing moving forward (speed = 1) or backwards (speed = -1).
moveSpeed : 0.18, // how far (in map units) does the player move each step/update
rotSpeed : 6 // how much does the player rotate each step/update (in degrees)
}
var mapWidth = 0;
var mapHeight = 0;
var miniMapScale = 8;
function init() {
mapWidth = map[0].length;
mapHeight = map.length;
bindKeys();
drawMiniMap();
gameCycle();
}
// bind keyboard events to game functions (movement, etc)
function bindKeys() {
document.onkeydown = function(e) {
e = e || window.event;
switch (e.keyCode) { // which key was pressed?
case 38: // up, move player forward, ie. increase speed
player.speed = 1;
break;
case 40: // down, move player backward, set negative speed
player.speed = -1;
break;
case 37: // left, rotate player left
player.dir = -1;
break;
case 39: // right, rotate player right
player.dir = 1;
break;
}
}
document.onkeyup = function(e) {
e = e || window.event;
switch (e.keyCode) {
case 38:
case 40:
player.speed = 0; // stop the player movement when up/down key is released
break;
case 37:
case 39:
player.dir = 0;
break;
}
}
}
function gameCycle() {
move();
updateMiniMap();
setTimeout(gameCycle,1000/30);
}
function move() {
var moveStep = player.speed * player.moveSpeed; // player will move this far along the current direction vector
player.rot += player.dir * player.rotSpeed * Math.PI / 180; // add rotation if player is rotating (player.dir != 0)
var newX = player.x + Math.cos(player.rot) * moveStep; // calculate new player position with simple trigonometry
var newY = player.y + Math.sin(player.rot) * moveStep;
if (isBlocking(newX, newY)) { // are we allowed to move to the new position?
return; // no, bail out.
}
player.x = newX; // set new position
player.y = newY;
}
function isBlocking(x,y) {
// first make sure that we cannot move outside the boundaries of the level
if (y < 0 || y > mapHeight || x < 0 || x > mapWidth)
return true;
// return true if the map block is not 0, ie. if there is a blocking wall.
return (map[Math.floor(y)][Math.floor(x)] != 0);
}
function updateMiniMap() {
var miniMap = $("minimap");
var miniMapObjects = $("minimapobjects");
var objectCtx = miniMapObjects.getContext("2d");
miniMapObjects.width = miniMapObjects.width;
//objectCtx.clearRect(0,0,miniMap.width,miniMap.height);
objectCtx.fillRect( // draw a dot at the current player position
player.x * miniMapScale - 2,
player.y * miniMapScale - 2,
4, 4
);
objectCtx.beginPath();
objectCtx.moveTo(player.x * miniMapScale, player.y * miniMapScale);
objectCtx.lineTo(
(player.x + Math.cos(player.rot) * 4) * miniMapScale,
(player.y + Math.sin(player.rot) * 4) * miniMapScale
);
objectCtx.closePath();
objectCtx.stroke();
}
function drawMiniMap() {
// draw the topdown view minimap
var miniMap = $("minimap"); // the actual map
var miniMapCtr = $("minimapcontainer"); // the container div element
var miniMapObjects = $("minimapobjects"); // the canvas used for drawing the objects on the map (player character, etc)
miniMap.width = mapWidth * miniMapScale; // resize the internal canvas dimensions
miniMap.height = mapHeight * miniMapScale; // of both the map canvas and the object canvas
miniMapObjects.width = miniMap.width;
miniMapObjects.height = miniMap.height;
var w = (mapWidth * miniMapScale) + "px" // minimap CSS dimensions
var h = (mapHeight * miniMapScale) + "px"
miniMap.style.width = miniMapObjects.style.width = miniMapCtr.style.width = w;
miniMap.style.height = miniMapObjects.style.height = miniMapCtr.style.height = h;
var ctx = miniMap.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0,0,miniMap.width,miniMap.height);
// loop through all blocks on the map
for (var y=0;y<mapHeight;y++) {
for (var x=0;x<mapWidth;x++) {
var wall = map[y][x];
if (wall > 0) { // if there is a wall block at this (x,y) ...
ctx.fillStyle = "rgb(200,200,200)";
ctx.fillRect( // ... then draw a block on the minimap
x * miniMapScale,
y * miniMapScale,
miniMapScale,miniMapScale
);
}
}
}
updateMiniMap();
}
setTimeout(init, 1);
</script>
</body>