-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
585 lines (536 loc) · 18.2 KB
/
index.html
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
<!DOCTYPE html>
<html>
<head>
<title>Grid Game</title>
<style>
#grid-container {
display: grid;
grid-template-columns: repeat(11, 40px);
grid-template-rows: repeat(11, 40px);
width: 440px;
height: 440px;
border: 1px solid black;
margin-bottom: 20px;
}
.cell, .coord-cell {
border: 1px solid gray;
box-sizing: border-box;
text-align: center;
line-height: 40px;
font-size: 24px;
position: relative;
}
.coord-cell {
background-color: #f0f0f0;
font-weight: bold;
}
.object {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
}
.fire {
background-color: red;
}
#instructions {
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
#instructions h2 {
margin-top: 0;
}
#instructions ul {
list-style-type: none;
padding-left: 0;
}
#instructions li {
margin-bottom: 5px;
}
#instructions code {
background-color: #f2f2f2;
padding: 2px 4px;
border-radius: 4px;
}
#prompts {
font-family: Arial, sans-serif;
margin-top: 20px;
}
#prompts h3 {
margin-top: 0;
}
#prompts pre {
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ccc;
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
}
#message {
font-family: Arial, sans-serif;
font-size: 20px;
color: green;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="instructions">
<h2>Grid Game Controls</h2>
<ul>
<li><strong>Move Forward:</strong> <code>Up Arrow</code> or call <code>moveForward()</code></li>
<li><strong>Turn Left:</strong> <code>Left Arrow</code> or call <code>turnLeft()</code></li>
<li><strong>Turn Right:</strong> <code>Right Arrow</code> or call <code>turnRight()</code></li>
<li><strong>Pick Up / Drop Object:</strong> <code>Spacebar</code> or call <code>pick()</code> / <code>drop()</code></li>
<li><strong>Move Object To Coordinates:</strong> <code>Enter</code> key and input coordinates, or call <code>moveObjectTo(x, y)</code></li>
</ul>
<p>Your goal is to extinguish all three fires by dropping the object on them. After extinguishing a fire, you must pick up the object again to extinguish the next fire.</p>
</div>
<div id="message"></div>
<div id="grid-container"></div>
<div id="prompts">
<h3>Prompts Used to Generate This Application:</h3>
<pre>
write an application with html and javascript in a single index.html file. the application draws an 10x10 grid with a player positioned at 9,9, facing a random cardinal direction. the player should have an arrow centered on it. the player can move forward one cell at a time or turn 90 degrees to the left or right. make it so that I can control the player with my left, right and up arrow keys. the application should also expose functions to the developer console for movement; moveForward(), turnLeft(), and turnRight().
now add an object to the grid at a random location, represented by a solid circle. the player can pick up the object when facing it. use the spacebar for that action. The player can also drop an object they are carrying with the spacebar, which places it in the cell in front of the player. expose these actions with drop() and pick() functions as well.
change the player's representation to show that they are carrying an object. surround the grid with numbers showing the coordinates of the cells. expose a function moveObjectTo(x, y). this function should efficiently move the player to the current location of the object, pick up the object, and drop it at x,y. also allow this functionality to be performed with the enter key, where the user is prompted for the x,y coordinates to move the object to.
please fix the moveObjectTo function. it does not pick up the object. keep in mind that the player needs to be facing the object to pick it up. It cannot pick up the object if it is on top of it.
add some text to describe the keys and commands
Add some text under the grid that shows the prompts I gave you to generate this application. Include this prompt as well.
make it so that the prompt text at the bottom is wrapped, instead of a horizontally scrolling section.
finally, let's make this into an actual simple game. the grid should also contain three randomly positioned "fires". the fire is represented by a red cell. the player can put the fires out by dropping the object on the cell that contains the fire. the player wins after putting out all three fires. the game restarts three seconds later.
the object should not be consumed by the fire
the player must pick the object up again, after dropping it on a fire
</pre>
</div>
<script>
const gridContainer = document.getElementById('grid-container');
const messageDiv = document.getElementById('message');
const cells = [];
const dirMap = ['N', 'E', 'S', 'W'];
const arrowSymbols = {
'N': '↑',
'E': '→',
'S': '↓',
'W': '←',
};
const carryingSymbols = {
'N': '↑*',
'E': '→*',
'S': '↓*',
'W': '←*',
};
let player, object, fires, firesRemaining;
function initGame() {
// Initialize player
player = {
x: 9,
y: 9,
dirIndex: Math.floor(Math.random() * 4),
carrying: false
};
// Initialize object
object = {
x: Math.floor(Math.random() * 10),
y: Math.floor(Math.random() * 10),
exists: true
};
// Ensure the object is not at the player's starting position
while (object.x === player.x && object.y === player.y) {
object.x = Math.floor(Math.random() * 10);
object.y = Math.floor(Math.random() * 10);
}
// Initialize fires
fires = [];
firesRemaining = 3;
while (fires.length < 3) {
const fireX = Math.floor(Math.random() * 10);
const fireY = Math.floor(Math.random() * 10);
// Ensure fire doesn't overlap with player, object, or other fires
if (
(fireX !== player.x || fireY !== player.y) &&
(fireX !== object.x || fireY !== object.y) &&
!fires.some(fire => fire.x === fireX && fire.y === fireY)
) {
fires.push({ x: fireX, y: fireY, exists: true });
}
}
messageDiv.textContent = '';
renderGrid();
}
// Create grid and cells with coordinate labels
for (let y = -1; y < 10; y++) {
for (let x = -1; x < 10; x++) {
const cell = document.createElement('div');
if (x === -1 && y === -1) {
cell.classList.add('coord-cell');
cell.textContent = '';
} else if (y === -1) {
cell.classList.add('coord-cell');
cell.textContent = x;
} else if (x === -1) {
cell.classList.add('coord-cell');
cell.textContent = y;
} else {
cell.classList.add('cell');
if (!cells[y]) cells[y] = [];
cells[y][x] = cell;
}
gridContainer.appendChild(cell);
}
}
function renderGrid() {
// Clear all cells
for (let y = 0; y < 10; y++) {
for (let x = 0; x < 10; x++) {
cells[y][x].textContent = '';
cells[y][x].innerHTML = '';
cells[y][x].classList.remove('fire');
}
}
// Render fires
fires.forEach(fire => {
if (fire.exists) {
cells[fire.y][fire.x].classList.add('fire');
}
});
// Render object if it exists and not being carried
if (object.exists && (!player.carrying || (object.x !== player.x || object.y !== player.y))) {
const objCell = cells[object.y][object.x];
const objDiv = document.createElement('div');
objDiv.classList.add('object');
objCell.appendChild(objDiv);
}
// Set player's cell
const cell = cells[player.y][player.x];
if (player.carrying) {
cell.textContent = carryingSymbols[dirMap[player.dirIndex]];
} else {
cell.textContent = arrowSymbols[dirMap[player.dirIndex]];
}
}
function moveForward() {
let newX = player.x;
let newY = player.y;
switch (dirMap[player.dirIndex]) {
case 'N':
newY -= 1;
break;
case 'E':
newX += 1;
break;
case 'S':
newY += 1;
break;
case 'W':
newX -= 1;
break;
}
// Check bounds
if (newX >= 0 && newX < 10 && newY >= 0 && newY < 10) {
player.x = newX;
player.y = newY;
renderGrid();
}
}
function turnLeft() {
player.dirIndex = (player.dirIndex + 3) % 4;
renderGrid();
}
function turnRight() {
player.dirIndex = (player.dirIndex + 1) % 4;
renderGrid();
}
function getCellInFront() {
let newX = player.x;
let newY = player.y;
switch (dirMap[player.dirIndex]) {
case 'N':
newY -= 1;
break;
case 'E':
newX += 1;
break;
case 'S':
newY += 1;
break;
case 'W':
newX -= 1;
break;
}
// Check bounds
if (newX >= 0 && newX < 10 && newY >= 0 && newY < 10) {
return { x: newX, y: newY };
} else {
return null;
}
}
function pick() {
if (player.carrying) {
console.log('Already carrying an object.');
return;
}
const frontCell = getCellInFront();
if (frontCell && object.exists && object.x === frontCell.x && object.y === frontCell.y) {
player.carrying = true;
object.exists = false;
console.log('Picked up the object.');
renderGrid();
} else {
console.log('No object to pick up.');
}
}
function drop() {
if (!player.carrying) {
console.log('Not carrying any object.');
return;
}
const frontCell = getCellInFront();
if (frontCell && frontCell.x >= 0 && frontCell.x < 10 && frontCell.y >= 0 && frontCell.y < 10) {
const fireIndex = fires.findIndex(fire => fire.x === frontCell.x && fire.y === frontCell.y && fire.exists);
if (fireIndex !== -1) {
// Extinguish the fire
fires[fireIndex].exists = false;
firesRemaining--;
console.log('Extinguished a fire!');
// Drop the object on the fire cell
object.x = frontCell.x;
object.y = frontCell.y;
object.exists = true;
player.carrying = false;
if (firesRemaining === 0) {
console.log('You have extinguished all fires!');
messageDiv.textContent = 'You have extinguished all fires! Game restarting...';
setTimeout(initGame, 3000);
}
renderGrid();
return;
} else if (!object.exists) {
// Cannot drop the object if it's not in inventory
console.log('You have no object to drop.');
return;
} else if (!object.exists || (object.x !== frontCell.x || object.y !== frontCell.y)) {
object.x = frontCell.x;
object.y = frontCell.y;
object.exists = true;
player.carrying = false;
console.log('Dropped the object.');
renderGrid();
} else {
console.log('Cannot drop object here.');
}
} else {
console.log('Cannot drop object here.');
}
}
// Updated moveObjectTo function
function moveObjectTo(targetX, targetY) {
if (targetX < 0 || targetX > 9 || targetY < 0 || targetY > 9) {
console.log('Invalid target coordinates.');
return;
}
if (!object.exists && !player.carrying) {
console.log('No object to move.');
return;
}
// Move to adjacent cell facing the object to pick it up
const pathToObject = findPathToAdjacent(player.x, player.y, object.x, object.y);
executePath(pathToObject, () => {
facePosition(object.x, object.y, () => {
pick();
// Move to adjacent cell facing the target location to drop the object
const pathToTarget = findPathToAdjacent(player.x, player.y, targetX, targetY);
executePath(pathToTarget, () => {
facePosition(targetX, targetY, () => {
drop();
});
});
});
});
}
// Function to find path to adjacent cell
function findPathToAdjacent(startX, startY, targetX, targetY) {
// List of adjacent positions to the target
const adjacentPositions = [
{ x: targetX, y: targetY - 1, facing: 'S' },
{ x: targetX + 1, y: targetY, facing: 'W' },
{ x: targetX, y: targetY + 1, facing: 'N' },
{ x: targetX - 1, y: targetY, facing: 'E' },
];
// Filter positions that are within bounds
const validPositions = adjacentPositions.filter(pos => pos.x >= 0 && pos.x < 10 && pos.y >= 0 && pos.y < 10);
// Try to find the shortest path to any of the valid adjacent positions
let shortestPath = null;
for (let pos of validPositions) {
const path = findPath(player.x, player.y, pos.x, pos.y, player.dirIndex);
if (path && (shortestPath === null || path.length < shortestPath.length)) {
shortestPath = path;
shortestPath.finalFacing = pos.facing;
}
}
return shortestPath;
}
// Pathfinding algorithm (BFS)
function findPath(startX, startY, endX, endY, dirIndex) {
const queue = [{ x: startX, y: startY, dirIndex, path: [] }];
const visited = new Set();
visited.add(`${startX},${startY},${dirIndex}`);
while (queue.length > 0) {
const current = queue.shift();
if (current.x === endX && current.y === endY) {
return current.path;
}
// Move forward
let newX = current.x;
let newY = current.y;
switch (dirMap[current.dirIndex]) {
case 'N':
newY -= 1;
break;
case 'E':
newX += 1;
break;
case 'S':
newY += 1;
break;
case 'W':
newX -= 1;
break;
}
if (newX >= 0 && newX < 10 && newY >= 0 && newY < 10) {
const key = `${newX},${newY},${current.dirIndex}`;
if (!visited.has(key)) {
visited.add(key);
queue.push({
x: newX,
y: newY,
dirIndex: current.dirIndex,
path: [...current.path, 'moveForward']
});
}
}
// Turn left
let newDirLeft = (current.dirIndex + 3) % 4;
const keyLeft = `${current.x},${current.y},${newDirLeft}`;
if (!visited.has(keyLeft)) {
visited.add(keyLeft);
queue.push({
x: current.x,
y: current.y,
dirIndex: newDirLeft,
path: [...current.path, 'turnLeft']
});
}
// Turn right
let newDirRight = (current.dirIndex + 1) % 4;
const keyRight = `${current.x},${current.y},${newDirRight}`;
if (!visited.has(keyRight)) {
visited.add(keyRight);
queue.push({
x: current.x,
y: current.y,
dirIndex: newDirRight,
path: [...current.path, 'turnRight']
});
}
}
return null;
}
function facePosition(targetX, targetY, callback) {
const dx = targetX - player.x;
const dy = targetY - player.y;
let desiredDirection;
if (dx === 0 && dy === -1) desiredDirection = 'N';
else if (dx === 1 && dy === 0) desiredDirection = 'E';
else if (dx === 0 && dy === 1) desiredDirection = 'S';
else if (dx === -1 && dy === 0) desiredDirection = 'W';
else {
console.log('Cannot face target position from current location.');
if (callback) callback();
return;
}
const turns = getTurnsToFace(desiredDirection);
executePath(turns, callback);
}
function getTurnsToFace(desiredDirection) {
const currentDirection = dirMap[player.dirIndex];
const directionOrder = ['N', 'E', 'S', 'W'];
let currentIndex = directionOrder.indexOf(currentDirection);
let desiredIndex = directionOrder.indexOf(desiredDirection);
let leftTurns = (currentIndex - desiredIndex + 4) % 4;
let rightTurns = (desiredIndex - currentIndex + 4) % 4;
let turns = [];
if (leftTurns <= rightTurns) {
for (let i = 0; i < leftTurns; i++) {
turns.push('turnLeft');
}
} else {
for (let i = 0; i < rightTurns; i++) {
turns.push('turnRight');
}
}
return turns;
}
function executePath(path, callback) {
if (!path) {
console.log('No path found.');
return;
}
let index = 0;
function nextStep() {
if (index < path.length) {
window[path[index]]();
index++;
setTimeout(nextStep, 100); // Adjust speed as needed
} else if (callback) {
callback();
}
}
nextStep();
}
// Expose functions to the console
window.moveForward = moveForward;
window.turnLeft = turnLeft;
window.turnRight = turnRight;
window.pick = pick;
window.drop = drop;
window.moveObjectTo = moveObjectTo;
// Handle keypress events
document.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
moveForward();
break;
case 'ArrowLeft':
turnLeft();
break;
case 'ArrowRight':
turnRight();
break;
case ' ':
if (player.carrying) {
drop();
} else {
pick();
}
break;
case 'Enter':
const coords = prompt('Enter target coordinates as x,y:');
if (coords) {
const [xStr, yStr] = coords.split(',');
const x = parseInt(xStr.trim());
const y = parseInt(yStr.trim());
moveObjectTo(x, y);
}
break;
}
});
// Initialize the game
initGame();
</script>
</body>
</html>