html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div id = "rules">
<h3>Rules</h3>
<p>
There are two difficulties: normal and expert.
Start from red.
The number you step on indicates the number of steps you can take in any of the 4 directions: up, left, right, down. However, it is not possible to jump outside the grid (you should stay within the boundaries).
You jump from tile to tile until you reach the tile in the center, the O.
You can jump on a tile only once.
Normal mode: reach the O in the center, ignoring the positive and negative signs.
Expert mode: reach the O in the center, but the sum of the visited tiles must be equal to 0 in the end.
</p>
</div>
<div id = "grid">
</div>
<div id = buttons>
<button onclick="left()">left</button>
<button onclick="right()">right</button>
<button onclick="up()">up</button>
<button onclick="down()">down</button></button>
<button onclick="solution()">solution</button></button>
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
background-color: lightgrey;
}
#grid{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
width: 300px;
}
#rules{
background-color: lightgrey;
}
#b20{
color: green;
background-color: red;
}
#buttons{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr ;
width: 300px;
margin-top:10px;
}
button{
height:20px;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
var row = 4;
var col = 2;
var value = 1;
var numbers = [[2,-2,4,-1,3],[-3,3,-1,+3,-2],[+1,-2,+0,-2,+3],[-3,+2,-3,+2,-4],[+4,-2,+1,-3,+2]]
var numbers_start = [[2,-2,4,-1,3],[-3,3,-1,+3,-2],[+1,-2,+0,-2,+3],[-3,+2,-3,+2,-4],[+4,-2,+1,-3,+2]]
var sum = 1;
var start_sum = sum;
var start_row = row;
var start_col = col;
var start_value = value;
window.onload = function(){
// create the grid
var grid = document.getElementById("grid")
index = 0
point = [2,0]
for(var i = 0;i<5;i++){
for (var j = 0; j<5;j++){
var p = document.createElement("Button");
p.id = "b"+ (i.toString() + j.toString()).toString();
p.innerText = numbers[i][j];
p.setAttribute("style", "background-color: yellow;")
grid.appendChild(p);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run