/
Index.html
156 lines (149 loc) · 5.93 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
<html lang="en">
<head>
<title>LemonadeSnake</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<script src="https://lemonadejs.net/v1/lemonade.js"></script>
<div id="header">Lemonade - Snake</div>
<div id="root"></div>
<script type="text/javascript">
var Snake = function() {
/**
* Math.floor(Math.random()*20) calculate some random number.
* @param {number} Math.random()*20 - calculate some random number between 0 to 1 using Math.random()
* and multiply by 20 to keep it in the stage limits.
* */
var randomValue = Math.floor(Math.random()*20);
// Initializing self.
var self = {
// Properties to store the speed of the snake.
speed: 1,
speedx: 0,
speedy: 0,
// Properties to store the start point of the snake.
pointx: 10,
pointy: 10,
// Properties to store the size of game's pieces and how many will be used.
piecesSize: 20,
pieces: 20,
// Propertie to define the snake's tail size and store her trail.
tail: 5,
trail: [],
// Propertie to define our context.
context: null,
// Properties to define a random place in our stage to spawn the lemonade (game objective).
lemonadex: randomValue,
lemonadey: randomValue,
}
/**
* Represents the initializer of methods and functions.
* @param {string} stage - identifier of canvas in html.
**/
self.init = function(stage) {
// Propertie context recieves the stage context.
context = stage.getContext("2d");
// A event listener waitting for some directional key.
document.addEventListener("keydown", function (o) {
switch(o.keyCode) {
case 37: // Left key
self.speedx = -self.speed;
self.speedy = 0;
break;
case 38: // Up key
self.speedx = 0;
self.speedy = -self.speed;
break;
case 39: // Right key
self.speedx = self.speed;
self.speedy = 0;
break;
case 40: // Down key
self.speedx = 0;
self.speedy = self.speed;
break;
default:
break;
}
})
/**
* Setting an interval to execute the self.game at every 60 milliseconds.
* @param {string} self.game - calling of the function.
* @param {number} 60 - the number of how many milliseconds the interval should wait.
*/
setInterval(self.game, 60);
}
/**
* Used to reset the game and spawn a new lemonade in the stage.
*/
self.reset = function() {
self.speedx = 0;
self.speedy = 0;
self.tail=5;
self.lemonadex = Math.floor(Math.random()*self.pieces);
self.lemonadey = lemonadex;
}
/**
* Self.game keep running the mains rules of the game.
*/
self.game = function() {
// Properties pointx and pointy increases according the last key pressed.
self.pointx += self.speedx;
self.pointy += self.speedy;
// Verifying the end of stage and returns the snake to the stage.
if (self.pointx < 0) {
self.pointx = self.pieces -1;
}
if (self.pointx > self.pieces-1) {
self.pointx = 0;
}
if (self.pointy < 0) {
self.pointy = self.pieces -1;
}
if (self.pointy > self.pieces-1) {
self.pointy = 0;
}
// Here we setting the colors of our stage, snake and the objective.
// context.fillRect() is used to locate were the fillStyle will be aplied.
context.fillStyle = "#cecece";
context.fillRect(0,0, stage.width, stage.height);
context.fillStyle = "green";
context.fillRect(self.lemonadex*self.piecesSize, self.lemonadey*self.piecesSize, self.piecesSize, self.piecesSize);
// Using a for loop to have controll of our snake size.
context.fillStyle = "#6b6b6b";
for (var i = 0; i < self.trail.length; i++) {
context.fillRect(self.trail[i].x*self.piecesSize, self.trail[i].y*self.piecesSize, self.piecesSize-1, self.piecesSize-1);
// Comparing positions of the head and the tail of the snake to detect collision.
if (self.trail[i].x == self.pointx && self.trail[i].y == self.pointy) {
self.speedx = 0;
self.speedy = 0;
self.tail = 5;
self.score = 0;
}
}
// Creating the snake trail
self.trail.push({x:self.pointx, y:self.pointy})
while (self.trail.length > self.tail) {
self.trail.shift();
}
// Collecting the objective increase size of the snake and set a new objective.
if (self.lemonadex == self.pointx && self.lemonadey == self.pointy) {
self.score ++;
self.tail++;
self.lemonadex = Math.floor(Math.random()*self.pieces);
self.lemonadey = self.lemonadex;
}
}
// Game template
var template = `
<div @ref="self.game(this)">
<h1>Score:{{self.score}}</h1>
<button onclick="self.reset()">Reset</button><br>
<canvas id="stage" @ready="self.init(this)" width="400" height="400"></canvas>
</div>`;
return lemonade.element(template, self);
}
lemonade.render(Snake, document.getElementById('root'));
</script>
</body>
</html>