Skip to content

Commit 084b5f3

Browse files
Merge pull request #25 from hashbangcode/18_fort_MR_main
18 fort mr main
2 parents 7bcdf03 + f0049fd commit 084b5f3

4 files changed

Lines changed: 193 additions & 1 deletion

File tree

docs/demo/fort/fort.js

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
// Set up variables for the game.
2+
let loose = false;
3+
let greenSpots = [];
4+
let redSpots = [];
5+
6+
function placeGreen() {
7+
if (greenSpots.length > score) {
8+
return;
9+
}
10+
if (redSpots.length + greenSpots.length > 13) {
11+
return;
12+
}
13+
let greencoordinates = {};
14+
placeGreenLoop: while (typeof greencoordinates.column === 'undefined') {
15+
const random = randomElement();
16+
for (let g = 0; g < greenSpots.length; g += 1) {
17+
if (greenSpots[g].column === random.column && greenSpots[g].row === random.row) {
18+
continue placeGreenLoop;
19+
}
20+
}
21+
for (let g = 0; g < redSpots.length; g += 1) {
22+
if (redSpots[g].column === random.column && redSpots[g].row === random.row) {
23+
continue placeGreenLoop;
24+
}
25+
}
26+
const randomHealth = randomRange(15, 50);
27+
greencoordinates = { column: random.column, row: random.row, health: randomHealth };
28+
}
29+
greenSpots.push(greencoordinates);
30+
}
31+
32+
function placeRed() {
33+
if (redSpots.length > score) {
34+
return;
35+
}
36+
if (redSpots.length + greenSpots.length > 13) {
37+
return;
38+
}
39+
let redcoordinates = {};
40+
placeRedLoop: while (typeof redcoordinates.column === 'undefined') {
41+
const random = randomElement();
42+
for (let g = 0; g < greenSpots.length; g += 1) {
43+
if (greenSpots[g].column === random.column && greenSpots[g].row === random.row) {
44+
continue placeRedLoop;
45+
}
46+
}
47+
for (let g = 0; g < redSpots.length; g += 1) {
48+
if (redSpots[g].column === random.column && redSpots[g].row === random.row) {
49+
continue placeRedLoop;
50+
}
51+
}
52+
const randomHealth = randomRange(25, 50);
53+
redcoordinates = { column: random.column, row: random.row, health: randomHealth };
54+
}
55+
redSpots.push(redcoordinates);
56+
}
57+
58+
function userActionClick(element) {
59+
for (let g = 0; g < greenSpots.length; g += 1) {
60+
if (greenSpots[g].column === element.column && greenSpots[g].row === element.row) {
61+
greenSpots.splice(g, 1);
62+
score += 1;
63+
}
64+
}
65+
for (let g = 0; g < redSpots.length; g += 1) {
66+
if (redSpots[g].column === element.column && redSpots[g].row === element.row) {
67+
loose = true;
68+
}
69+
}
70+
}
71+
72+
// Decrease the health of all counters. If any counter reaches 0 then remove it from the grid.
73+
function decreaseHealth() {
74+
for (let g = 0; g < greenSpots.length; g += 1) {
75+
greenSpots[g].health -= 1;
76+
if (greenSpots[g].health === 0) {
77+
greenSpots.splice(g, 1);
78+
}
79+
}
80+
for (let r = 0; r < redSpots.length; r += 1) {
81+
redSpots[r].health -= 1;
82+
if (redSpots[r].health === 0) {
83+
redSpots.splice(r, 1);
84+
}
85+
}
86+
}
87+
88+
function init() {
89+
placeGreen();
90+
placeRed();
91+
}
92+
93+
function update() {
94+
if (loose === true) {
95+
// Crashed!
96+
// Flush the screen.
97+
cls();
98+
// Display the score.
99+
displayScore(score);
100+
// Reset some variables.
101+
score = 0;
102+
103+
greenSpots = [];
104+
redSpots = [];
105+
106+
placeGreen();
107+
placeRed();
108+
109+
// Turn off the win state.
110+
loose = false;
111+
return;
112+
}
113+
114+
// Randomly place a counter.
115+
let actions = [
116+
placeGreen,
117+
placeRed,
118+
];
119+
shuffle(actions);
120+
actions[0]();
121+
122+
decreaseHealth();
123+
}
124+
125+
function draw() {
126+
cls();
127+
for (let i = 0; i < gridMaxX; i += 1) {
128+
for (let j = 0; j < gridMaxY; j += 1) {
129+
const element = grid[i][j];
130+
for (let g = 0; g < greenSpots.length; g += 1) {
131+
if (greenSpots[g].column === element.column && greenSpots[g].row === element.row) {
132+
fillBox(element, 'green');
133+
}
134+
}
135+
for (let g = 0; g < redSpots.length; g += 1) {
136+
if (redSpots[g].column === element.column && redSpots[g].row === element.row) {
137+
fillBox(element, 'red');
138+
}
139+
}
140+
}
141+
}
142+
}

docs/demo/fort/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html lang="en-GB">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<title>Forx | Four | A Simple JavaScript Game Engine In A 4x4 Grid</title>
9+
10+
<meta name="description" content="Four: A Simple JavaScript Game Engine In A 4x4 Grid" />
11+
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.css">
12+
<link rel="stylesheet" href="/four/assets/css/styles.css">
13+
14+
<link rel="icon" href="/four/assets/images/favicon.png" />
15+
<link rel="apple-touch-icon" href="/four/assets/images/favicon.png">
16+
<script src="https://cdn.jsdelivr.net/gh/hashbangcode/four@main/four.js"></script>
17+
</head>
18+
<body>
19+
<header>
20+
<nav>
21+
<a href="/four/">Home</a>
22+
<a href="/four/docs">Docs</a>
23+
<a href="/four/demo" class="current">Demo</a>
24+
<a href="https://github.com/hashbangcode/four"><svg class="icon" viewBox="0 0 32 32"><path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path></svg>GitHub</a>
25+
</nav>
26+
27+
<h1>Four Demo: Fort</h1>
28+
</header>
29+
<main>
30+
<div class="canvas-wrapper">
31+
<canvas id="four" width="500" height="500"></canvas>
32+
</div>
33+
<script src="fort.js"></script>
34+
<p>Click on the green, don't click on the red.</p>
35+
</main>
36+
<footer>
37+
<p>Four was created by <a href="https://www.hashbangcode.com">#! code</a> and is licensed under the MIT license.<br>
38+
<a href="https://github.com/hashbangcode/four">Source code for this site</a></p>
39+
</footer>
40+
</body>
41+
</html>

docs/demo/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ <h3>Four By Two</h3>
3939
<p>A memory game where pairs of colours are matched together. Use your mouse pointer to click on item in the grid to match colours. Once you have matched the colour it will stay on the grid. Complete all of the colours to get your score.</p>
4040
<a class="button" href="/four/demo/fourbytwo/">See demo</a>
4141

42+
<h3>Fort</h3>
43+
<p>Click on the green, don't click on the red.</p>
44+
<a class="button" href="/four/demo/fort/">See demo</a>
45+
4246
<h3>Forx</h3>
4347
<p>Eat the apple and don't get caught by the fox. Use the arror keys to traverse the grid.</p>
4448
<a class="button" href="/four/demo/forx/">See demo</a>

four.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ function keyPress(event) {
200200
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].indexOf(event.code) > -1) {
201201
event.preventDefault();
202202
}
203-
203+
204204
switch (event.code) {
205205
case 'ArrowLeft':
206206
case 'KeyA':
@@ -249,6 +249,11 @@ function shuffle(array) {
249249
}
250250
}
251251

252+
// Generate a random number between two values.
253+
function randomRange(min, max) {
254+
return Math.floor(Math.random() * (max - min + 1) + min);
255+
}
256+
252257
// Get a random element from the grid.
253258
function randomElement() {
254259
const randomX = Math.floor(Math.random() * gridMaxX);

0 commit comments

Comments
 (0)