-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnaike.html
109 lines (101 loc) · 5.19 KB
/
snaike.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
<head>
<title>snaike</title>
</head>
<body>
<div class="container">
<h1>snaike!</h1>
<canvas id="game_canvas" width="800" height="400">
</canvas>
<h2>Choose snaikes to battle</h2>
<ul class="snaike-list">
{{#each snaikes}}
{{> snaike}}
{{/each}}
</ul>
<button class="battle">Battle selected snaikes</button>
<h2>Create your own snaike</h2>
<div>
{{#with viewedSnaike}}
{{> creation}}
{{/with}}
</div>
<div>
<h2>More information</h2>
<p>Create artificially intelligent snakes by writing them a JavaScript brain.</p>
<p>On each animation tick we call the snaike's "think" function, in which you can determine the best move for your snaike to make, be it turn left, turn right, or go straight.</p>
<p>Your snaike's next move is determined by the return value of the function that you write the body of. If your function returns a number less than 0 the snaike will turn left, 0 will go straight, and greater than 0 will make it turn right.</p>
<p>You can battle any existing saved snaikes.</p>
<p>You can view the logic for any existing snaike by clicking "View or edit". You can then make changes and save it as a new version, or create one from scratch.</p>
<p>You can test out your snaike before saving it by using the test button. This runs it in the battle area above, pitting it against the "MPM" snaike which is controllable by your arrow keys for convenience of testing.</p>
<h3>API</h3>
<p>Some information is provided to help you:</p>
<p><strong>snakePositions</strong></p>
<p>This is the position on the game board of all snaikes. It is an array of snaikes, in which your snaike is at <strong>myIndex</strong>. Each snaike in the array is itself an array of points, 1 point for each square of the snaikes body, with the head being the last item in the array. Each point is, again, another array, with the x and y position value e.g. [10, 20].</p>
<p><strong>myIndex</strong></p>
<p>The index into snakePositions of your snaike</p>
<p><strong>myDirection</strong></p>
<p>This indicates which way the head of your snaike is facing, and hence which way it will go if you return 0 (go straight). 0 = up, 1 = right, 2 down, or 3 = left.</p>
<p><strong>game.gridHeight and game.gridWidth</strong></p>
<p>The number of squares on the game board, each piece of a snake takes up 1 square. Note that the game board automatically wraps. E.g. if your snaike is at the top (say position [10, 0]) and you continue upward, your snaike will next be at the bottom ([10, <strong>game.gridHeight</strong>])</p>
<p><strong>game.calculateNextPosition(pos, dir)</strong></p>
<p>Takes a position e.g. [10, 15], and a direction e.g. 3, and returns the new position e.g. [9, 15]. This is most useful for you to pass your snaike's head position and a direction relative to your current direction to find out what position you'll move to. Don't worry about the direction being greater than 3 or less than 0, it will wrap automatically. For example:</p>
<p>
var mySnake = snakePositions[myIndex];<br />
var myHeadPos = mySnake[mySnake.length - 1]; //e.g. [10, 15]<br />
var myPosIfTurnRight = game.calculateNextPosition(myHeadPos, myDirection + 1); //e.g. [9, 15]<br />
</p>
<p><strong>store</strong></p>
<p>store is just an object that you can store values on. For example if you wanted to keep track of the game tick count:</p>
<p>
if (!store.counter) store.counter = 0;<br />
store.counter += 1;<br />
//turn every 10 ticks<br />
return store.counter % 10 === 0 ? -1 : 0;<br />
</p>
<br /><br /><br />
<p>Created by <a href="https://github.com/matt-in-a-hat/snaike">matt-in-a-hat</a></p>
</div>
</div>
</body>
<template name="creation">
<form class="edit-snaike">
<table>
<tr>
<td><label for="edit-snaike-name">SnAIke name:</label></td>
<td><input id="edit-snaike-name" type="text" name="name" value="{{name}}" placeholder="snaike name" /></td>
</tr>
<tr>
<td><label for="edit-snaike-colour">Colour:</label></td>
<td><input id="edit-snaike-colour" type="text" name="colour" value="{{colour}}" placeholder="e.g. #FFF" /></td>
</tr>
<tr>
<td><label for="edit-snaike-code">Code:</label></td>
</tr>
<tr>
<td colspan="2">
<div>
function (snakePositions, myIndex, myDirection, game) {
<br />
<span class="comment">// return <0 to turn left, 0 to go straight, >0 to turn right</span>
</div>
<textarea id="edit-snaike-code" name="code" cols="80" rows="10" placeholder="Enter your snaike's AI">{{code}}</textarea>
<div>}</div>
</td>
</tr>
<tr>
<td>
<button class="test">Test</button>
<button class="save">Save</button>
</td>
<td></td>
</tr>
</table>
</form>
</template>
<template name="snaike">
<li>
<input type="checkbox" class="select" data-id="{{_id}}" />
<span>v{{version}}</span> {{name}}
<button class="view">View or edit</button>
</li>
</template>