-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (143 loc) · 8.21 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Wumpus World - AI Game Using Logical Artificial Intelligence</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col'>
<h1>Wumpus World</h1>
<p class="lead text-muted">Navigate the cave. Carefully proceed through all the rooms, Avoid the pits. Beware of the Wumpus!,Find the gold to win the game.</p>
</div>
</div>
<div class='row'>
<div class='col'>
<div id='root'></div>
</div>
<div class='col'>
<fieldset class='instructions'>
<legend>Perceptions of the Agent</legend>
<div class='row'>
<div class='col-1'>
<img src='images/breeze.png' width='25px' title='You feel a breeze; a pit is near.' />
</div>
<div class='col percept'>
<p>'Feeling a breeze indicates a pit is nearby.'</p>
</div>
</div>
<div class='row'>
<div class='col-1'>
<img src='images/stench.png' width='24px' title='You smell a stench; the wumpus is near.' />
</div>
<div class='col percept'>
<p>All the rooms adjacent to the Wumpus are stenchy.</p>
</div>
</div>
<div class='row'>
<div class='col-1'>
<img src='images/arrow1.png' width='30px' title='Arrow' />
</div>
<div class='col percept'>
<p>Bonus point: You have an arrow that the agent can use to shoot the Wumpus when you directly in front of it.</p>
</div>
</div>
<div class='row'>
<div class='col-1'>
<img src='images/glitter.png' width='30px' title='You see a glitter. The gold is nearby.' />
</div>
<div class='col percept'>
<p>You see a glitter; the gold is near.</p>
</div>
</div>
<div class='row'>
<div class='col-1'>
<img src='images/hint.png' width='30px' title='Suggested next move from the AI.' />
</div>
<div class='col percept'>
<p>Highlighted square is the suggested next move from the AI Algorithm.</p>
</div>
</div>
<div class='row'>
<div class='col-1'>
</div>
<div class='col percept'>
<p>By default the grid size is 4x4, increase the grid size for greater difficulty</p>
</div>
</div>
</fieldset>
</div>
</div>
<div class='row mt-3'>
<div class='col'>
<div class='panel panel-default'>
<div class='panel-heading collapsed' data-toggle='collapse' data-target='#aboutContainer'>
<i class='fa fa-chevron fa-fw' ></i> About Wumpus World
</div>
<div id='aboutContainer' class='collapse in'>
<p>
Wumpus World (also called Hunt the Wumpus) is a dungeon crawling game where the player must navigate a dungeon in order to find the treasure.
As the player enters each room, they will be able to perceive certain effects. The effects include a breeze, which indicates a pit is nearby in an adjacent room; a stench, which indicates a monster is in an adjacent room;
and a glitter, which indicates the treasure is in an adjacent room.
</p>
<p>
The player must use the perception hints within each room in order to determine which room is safe to move to next. If the player enters a room containing a pit or wumpus, the game is over.
</p>
<p>
Wumpus World is used as a demonstration of applying artificial intelligence concepts to a discrete, deterministic, partially observable, single-player environment. In this environment, the player (or computer agent) has the ability
to make decisions upon which action to take next in order to achieve the desired goal of finding the treasure and avoiding obstacles. The player or artificial intelligence agent is able to build a knowledge-base of the dungeon
layout and rooms as they obtain more hints and perceptions within their environment. In this manner, the player or AI can logically deduce which rooms contain obstacles and which rooms are deemed to be safe. For example, if the AI
determines that one particular room contains a breeze, then moves to the right and up a room (diagonal to the initial room) and they perceive another breeze, they can
reasonably deduce that the encircled room contains a pit, with a degree of accuracy.
</p>
<p>
Wumpus World and Hunt the Wumpus allows the application of many different types of artificial intelligence techniques. These include symbolic AI and logical-based AI for implementing predicate and first-order logic to calculate likelihoods of conditions within each room.
It also allows application of AI algorithms such as neural networks, deep learning, and machine learning for training a neural network on a pre-existing data-set of acceptable moves given certain conditions on the map and the state of the player. The machine learning algorithm, using such a training set,
can allow the AI to navigate to safe rooms, when a recognized or similar player and map state is presented. Genetic algorithms and evolutionary computation may also be used to train a neural network for learning the most optimal moves given a state on the board. When applying a genetic algorithm to a neural network (in place of a training-set),
the AI can learn the best weights to apply to the nodes of the neural network in order to play an optimal game.
</p>
<p>
We have developed the Wumpus World is developed in HTML and Javascript using React and Bootstrap.
</p>
<p>
Source code is available on <a href='https://github.com/primaryobjects/wumpus' target='_blank'>GitHub</a>.
</p>
</div>
</div>
</div>
</div>
<div class='row mt-4'>
<div class='col'>
<footer class="text-muted">
<p>Developed by <br> Sagar Naik <br>
Syed Affan Hameed<br>
Isaaq Shariff<br>
</p>
<p>
</p>
</footer>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js'></script>
<script type="text/babel" src="js/components/cell.js"></script>
<script type="text/babel" src="js/components/grid.js"></script>
<script type="text/babel" src="js/components/entity.js"></script>
<script type="text/babel" src="js/components/game.js"></script>
<script type="text/babel" src="js/components/knowledge.js"></script>
<script type="text/babel" src="js/components/gameContainer.js"></script>
<script type="text/babel" src="js/managers/gameManager.js"></script>
<script type="text/babel" src="js/managers/wumpusManager.js"></script>
<script type="text/babel" src="js/managers/astarManager.js"></script>
<script type="text/babel" src="js/managers/aiManager.js"></script>
<script type="text/babel" src="js/index.js"></script>
</body>
</html>