Skip to content

Commit 0066052

Browse files
elfgoddelfgodd
committed
Section 22: Displaying a Success Message
1 parent 2fe536e commit 0066052

4 files changed

Lines changed: 42 additions & 114 deletions

File tree

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

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,39 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
7-
<title>Maze</title>
8-
<style>
9-
body {
10-
margin: 0
11-
}
12-
</style>
13-
</head>
14-
<body>
15-
<script src="index.js"></script>
16-
</body>
17-
</html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
7+
<title>Maze</title>
8+
<style>
9+
body {
10+
margin: 0;
11+
}
12+
13+
.hidden {
14+
display: none !important;
15+
}
16+
17+
h1 {
18+
color: white;
19+
font-size: 64px;
20+
}
21+
22+
.winner {
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
position: absolute;
27+
z-index: 1;
28+
height: 100vh;
29+
width: 100vw;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div class="winner hidden">
35+
<h1>You Win!</h1>
36+
</div>
37+
<script src="index.js"></script>
38+
</body>
39+
</html>

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

Lines changed: 3 additions & 2 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 = 14
5-
const cellsVertical = 10
4+
const cellsHorizontal = 6
5+
const cellsVertical = 4
66
const width = window.innerWidth
77
const height = window.innerHeight
88

@@ -243,6 +243,7 @@ Events.on(engine, 'collisionStart', (event) => {
243243
) {
244244
// console.log('User won!')
245245
// alert('User won!')
246+
document.querySelector('.winner').classList.remove('hidden')
246247
world.gravity.y = 1
247248
world.bodies.forEach((body) => {
248249
if(body.label === 'wall') {

‎22-Javascript-with-the-Canvas-API/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,3 +100,5 @@ console.log(grid)
100100
## 30. 34 Refactoring for Rectangular Mazes
101101

102102
## 31. 35 Adding Fill Colors
103+
104+
## 32. 36 Displaying a Success Message

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

Lines changed: 0 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -3,100 +3,3 @@
33
**folder 01**
44

55
## 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)