Skip to content

Commit 2fe536e

Browse files
elfgoddelfgodd
committed
Section 22: Adding Fill Colors
1 parent ab6b3df commit 2fe536e

2 files changed

Lines changed: 117 additions & 3 deletions

File tree

  • 22-Javascript-with-the-Canvas-API/02-Maze
  • 23-Make-a-Secret-Message-Sharing-App

‎22-Javascript-with-the-Canvas-API/02-Maze/index.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Matter.js library
22
const { Engine, Render, Runner, World, Bodies, Body, Events } = Matter
33

4-
const cellsHorizontal = 4
5-
const cellsVertical = 3
4+
const cellsHorizontal = 14
5+
const cellsVertical = 10
66
const width = window.innerWidth
77
const height = window.innerHeight
88

@@ -16,7 +16,7 @@ const render = Render.create({
1616
element: document.body,
1717
engine: engine,
1818
options: {
19-
wireframes: true,
19+
wireframes: false,
2020
width,
2121
height,
2222
},
@@ -145,6 +145,9 @@ horizontals.forEach((row, rowIndex) => {
145145
{
146146
label: 'wall',
147147
isStatic: true,
148+
render: {
149+
fillStyle: 'red'
150+
}
148151
}
149152
)
150153
World.add(world, wall)
@@ -165,6 +168,9 @@ verticals.forEach((row, rowIndex) => {
165168
{
166169
label: 'wall',
167170
isStatic: true,
171+
render: {
172+
fillStyle: 'red'
173+
}
168174
}
169175
)
170176
World.add(world, wall)
@@ -181,6 +187,9 @@ const goal = Bodies.rectangle(
181187
{
182188
label: 'goal',
183189
isStatic: true,
190+
render: {
191+
fillStyle: 'green'
192+
}
184193
}
185194
)
186195
World.add(world, goal)
@@ -190,6 +199,9 @@ World.add(world, goal)
190199
const ballRadius = Math.min(unitLengthX, unitLengthY) / 4
191200
const ball = Bodies.circle(unitLengthX / 2, unitLengthY / 2, ballRadius, {
192201
label: 'ball',
202+
render: {
203+
fillStyle: 'blue',
204+
},
193205
})
194206
World.add(world, ball)
195207

‎23-Make-a-Secret-Message-Sharing-App/README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
## 23-Make-a-Secret-Message-Sharing-App
2+
3+
**folder 01**
4+
5+
## 1. 02 Project Setup
6+
7+
#### UI documentation
8+
9+
https://brm.io/matter-js/
10+
https://brm.io/matter-js/demo
11+
12+
## 2. 04 Getting Content to Appear
13+
14+
## 3. 05 Boilerplate Overview
15+
16+
**world** variable print it in the console browser.
17+
18+
**gravity** it's enable by default, makes the shape stay exactly where it is.
19+
20+
```javascript
21+
const shape = Bodies.rectangle(200, 200, 50, 50, {
22+
isStatic: true,
23+
})
24+
World.add(world, shape)
25+
```
26+
27+
## 4. 06 Drawing Borders
28+
29+
## 5. 07 Clicking and Dragging
30+
31+
## 6. 08 Generating Random Shapes
32+
33+
## 7. 11 Configuration Variables
34+
35+
**folder 02**
36+
37+
## 8. 12 Grid Generation
38+
39+
```javascript
40+
// Maze generation
41+
const grid = []
42+
43+
for (let i = 0; i < 3; i++) {
44+
grid.push([])
45+
for (let j = 0; j < 3; j++) {
46+
grid[i].push(false)
47+
}
48+
}
49+
console.log(grid)
50+
```
51+
52+
```javascript
53+
const grid = Array(3).fill(null)
54+
55+
console.log(grid)
56+
```
57+
58+
## 9. 13 Verticals and Horizontals
59+
60+
## 10. 14 Abstracting Maze Dimensions
61+
62+
## 11. 15 Guiding Comments
63+
64+
## 12. 16 Neighbor Coordinates
65+
66+
## 13. 17 Shuffling Neighbor Pairs
67+
68+
## 14. 18 Determining Movement Direction
69+
70+
## 15. 19 Updating Vertical Wall Values
71+
72+
## 16. 20 Updating Horizontal Wall Values
73+
74+
## 17. 21 Validating Wall Structure
75+
76+
## 18. 22 Iterating Over Walls
77+
78+
## 19. 23 Drawing Horizontal Segments
79+
80+
## 20. 24 Drawing Vertical Segments
81+
82+
## 21. 25 Drawing the Goal
83+
84+
## 22. 26 Drawing the Playing Ball
85+
86+
## 23. 27 Handling Keypresses
87+
88+
## 24. 28 Adding Keyboard Controls
89+
90+
## 25. 29 Disabling Gravity
91+
92+
## 26. 30 Detecting a Win
93+
94+
## 27. 31 Adding a Win Animation
95+
96+
## 28. 32 Stretching the Canvas
97+
98+
## 29. 33 Understanding the New Unit Variables
99+
100+
## 30. 34 Refactoring for Rectangular Mazes
101+
102+
## 31. 35 Adding Fill Colors

0 commit comments

Comments
 (0)