Designing a HTML5 game (Snakes and Ladders)
Making of snakes and ladders game
- Store the positions of start_ladder to end_ladder as a pair
- Store the positions of start_snake to end_snake as a pair
- Store the above data in two one-dimensional arrays
- For example: If the snakes are at positions 4, 9, 17, 35, 44,59,61,78,93] and the ladders start at positions [7,16,92,62], then let arr1 = [4,9,17,35,44,59,61,78,93] ; let arr2 = [7,16,92,62]
Write start() function which will initialize the state of the game
In this function, do the following tasks.
- Create a 1000 * 1000 board with 100 boxes, 10 boxes in one row and having alternate colors ("red" and "yellow")
- Mark the start of a ladder as green color
- Mark the start of a snake with a black color
- Assign a number to each box from one to hundred
- Assign player1 as "white" color
- Assign player2 as "gray" color
- Initialize localStorage to store two variables:
localStorage["player1"] = 1; localStorage["player2"] = 1;
These two will store the number(i.e., position the players have reached)
Suppose player1 is at 93 an player2 is at 25, then localStorage["player1"] = "93", localStorage["player2"]="75"
Note that localStorage stores values as Strings
To do mathematical calculations, we use parseInt(localStorage["player1"])
To generate a random number between 1 and 6(both inclusive) write {(Math.random()*6) + 1}
The random number is your score for that particular turn
If it matches any element in the ladder, it will automatically go to the ladder's endpoint
If it matches any element in the snake, it will dropdown to the tail of the snake else it will move forward the steps.
The first player who reaches 100 will become the winner
Suppose player1 is at 93 an player2 is at 25, then localStorage["player1"] = "93", localStorage["player2"]="75"
Note that localStorage stores values as Strings
To do mathematical calculations, we use parseInt(localStorage["player1"])
To generate a random number between 1 and 6(both inclusive) write {(Math.random()*6) + 1}
The random number is your score for that particular turn
If it matches any element in the ladder, it will automatically go to the ladder's endpoint
If it matches any element in the snake, it will dropdown to the tail of the snake else it will move forward the steps.
The first player who reaches 100 will become the winner
Note: Disable the button after the user has finished his/her move(s) Black squares represent snakes and Green represent ladders
NOTE: Player 1 will start
Score:
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
Comments
Post a Comment