Skip to content

Commit baa68ed

Browse files
Merge pull request #26 from hashbangcode/17_snake
17: Added the fourdelance game.
2 parents 5db9c4c + ffd2a45 commit baa68ed

3 files changed

Lines changed: 218 additions & 0 deletions

File tree

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
// Set up variables for the four-de-lance game.
2+
let loose = false;
3+
let snake = [];
4+
let foodcoordinates = {};
5+
let snakeMoveTimeout;
6+
let snakeDirection;
7+
8+
const SNAKE_UP = 'up';
9+
const SNAKE_DOWN = 'down';
10+
const SNAKE_LEFT = 'left';
11+
const SNAKE_RIGHT = 'right';
12+
13+
function placeFood() {
14+
if (snake.length === 16) {
15+
// There is nowhere to place the food, so "win".
16+
loose = true;
17+
score += 1;
18+
return;
19+
}
20+
foodcoordinates = {};
21+
placeFoodLoop: while (typeof foodcoordinates.column === 'undefined') {
22+
const random = randomElement();
23+
for (let s = 0; s < snake.length; s += 1) {
24+
if (snake[s].column === random.column && snake[s].row === random.row) {
25+
continue placeFoodLoop;
26+
}
27+
}
28+
foodcoordinates = { column: random.column, row: random.row };
29+
}
30+
}
31+
32+
function moveSnake() {
33+
snakeMoveTimeout = setTimeout(moveSnake, Math.max(2000 - (score * 100), 250));
34+
35+
const head = structuredClone(snake[0]);
36+
37+
switch (snakeDirection) {
38+
case SNAKE_LEFT:
39+
if (snake[0].column >= 1) {
40+
head.column -= 1;
41+
}
42+
else {
43+
loose = true;
44+
}
45+
break;
46+
case SNAKE_UP:
47+
if (snake[0].row >= 1) {
48+
head.row -= 1;
49+
} else {
50+
loose = true;
51+
}
52+
break;
53+
case SNAKE_RIGHT:
54+
if (snake[0].column < 3) {
55+
head.column += 1;
56+
} else {
57+
loose = true;
58+
}
59+
break;
60+
case SNAKE_DOWN:
61+
if (snake[0].row < 3) {
62+
head.row += 1;
63+
} else {
64+
loose = true;
65+
}
66+
break;
67+
default:
68+
// Player hasn't moved yet.
69+
return;
70+
}
71+
72+
for (let s = 1; s < snake.length; s += 1) {
73+
if (snake[s].column === head.column && snake[s].row === head.row) {
74+
loose = true;
75+
return;
76+
}
77+
}
78+
79+
snake.unshift(head);
80+
81+
if (snake[0].column === foodcoordinates.column && snake[0].row === foodcoordinates.row) {
82+
score += 1;
83+
placeFood();
84+
return;
85+
}
86+
87+
snake.pop();
88+
}
89+
90+
function placeSnake() {
91+
while (snake.length === 0) {
92+
const random = randomElement();
93+
if (random.column === foodcoordinates.column && random.row === foodcoordinates.row) {
94+
continue;
95+
}
96+
97+
snake.push({ column: random.column, row: random.row });
98+
}
99+
if (typeof snakeMoveTimeout !== 'number') {
100+
snakeMoveTimeout = setTimeout(moveSnake, 100);
101+
}
102+
}
103+
104+
function userActionKeyPress(direction) {
105+
switch (direction) {
106+
case KEYPRESS_LEFT:
107+
snakeDirection = SNAKE_LEFT;
108+
break;
109+
case KEYPRESS_UP:
110+
snakeDirection = SNAKE_UP;
111+
break;
112+
case KEYPRESS_RIGHT:
113+
snakeDirection = SNAKE_RIGHT;
114+
break;
115+
case KEYPRESS_DOWN:
116+
snakeDirection = SNAKE_DOWN;
117+
break;
118+
default:
119+
// Do nothing.
120+
break;
121+
}
122+
}
123+
124+
function init() {
125+
placeSnake();
126+
placeFood();
127+
}
128+
129+
function update() {
130+
if (loose === true) {
131+
// We have a winner!
132+
// flush the screen.
133+
cls();
134+
// Display the score.
135+
displayScore(score);
136+
// Reset some variables.
137+
score = 0;
138+
snake = [];
139+
snakeDirection = undefined;
140+
141+
// Reset the game grid.
142+
placeSnake();
143+
placeFood();
144+
145+
// Turn off the win state.
146+
loose = false;
147+
}
148+
}
149+
150+
function draw() {
151+
cls();
152+
for (let i = 0; i < gridMaxX; i += 1) {
153+
for (let j = 0; j < gridMaxY; j += 1) {
154+
const element = grid[i][j];
155+
for (let g = 0; g < snake.length; g += 1) {
156+
if (snake[g].column === element.column && snake[g].row === element.row) {
157+
fillBox(element, 'red');
158+
}
159+
}
160+
if (element.column === foodcoordinates.column && element.row === foodcoordinates.row) {
161+
fillBox(element, 'green');
162+
}
163+
}
164+
}
165+
}

docs/demo/fourdelance/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>Four-de-lance | Four | A Simple JavaScript Game Engine In A 4x4 Grid</title>
9+
10+
<meta name="description" content="Four-de-lance Game: 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: Four-de-lance</h1>
28+
</header>
29+
<main>
30+
<div class="canvas-wrapper">
31+
<canvas id="four" width="500" height="500"></canvas>
32+
</div>
33+
34+
<script src="fourdelance.js"></script>
35+
<p>A game of snake. Move the red counter to eat the green counter. The more you eat
36+
the longer your snake gets. Touch the sides or your own body and the game is over.</p>
37+
38+
<p>Once your snake eats enough and fills the grid there is nowhere else to put food
39+
the game is over. Therefore, the highest score you can get in this game is 16.</p>
40+
41+
<p><em>A fer-de-lance is a snake from South America. A joke is always better when you explain it :)</em></p>
42+
</main>
43+
<footer>
44+
<p>Four was created by <a href="https://www.hashbangcode.com">#! code</a> and is licensed under the MIT license.<br>
45+
<a href="https://github.com/hashbangcode/four">Source code for this site</a></p>
46+
</footer>
47+
</body>
48+
</html>

docs/demo/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ <h3>Forx</h3>
4747
<p>Eat the apple and don't get caught by the fox. Use the arror keys to traverse the grid.</p>
4848
<a class="button" href="/four/demo/forx/">See demo</a>
4949

50+
<h3>Four De Lance</h3>
51+
<p>A game of snake. Move the red counter to eat the green counter. The more you eat
52+
the longer your snake gets.</p>
53+
<a class="button" href="/four/demo/fourdelance/">See demo</a>
54+
5055
<h3>Forward</h3>
5156
<p>An implementation of flappy bird. Use the up and down arrows to move your box up and down and avoid the walls.</p>
5257
<a class="button" href="/four/demo/forward/">See demo</a>

0 commit comments

Comments
 (0)