canCode/maze_game.html at master · Matk8083/canCode · GitHub

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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<title>canCode</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cancode.us/main.css">
<link rel="stylesheet" href="https://cancode.us/mobile.css">
<link rel="shortcut icon" href="https://cancode.us/Images/small_icon.png" />
<body>

<!-- Navbar (sit on top) -->
<div class="navbar">
	<!-- navbar is handled automatically by JavaScript to be consistent across pages, see mobile.js -->
</div>
<a id="covid_banner"></a>

<!-- Page content -->
<div class="gameBox">
<div class="bigPicture"><img src="https://cancode.us/Images/maze_game_full.png"></div>

<h1>Maze Game</h1>
<p>Here are some challenges for students to make their maze games even more fun!</p>

<h1>Workshop 1</h1>
<h2>Challenge 1</h2>
<h3>Say something!</h3>
<p>Make your character say something when you press the space key.</p>
<p>Hint: Use the Say block from Looks</p>
<img src="../Images/challenge/challenge1.png">
<h2>Challenge 2</h2>
<h3>Celebrate!</h3>
<p>When you finish your maze make your character change color!</p>
<p>Hint: Use the Change Color Effect block from Looks</p>
<img src="../Images/challenge/challenge2.png">
<h2>Challenge 3</h2>
<h3>Spin!</h3>
<p>When you finish your maze make your character spin!</p>
<p>Hint: Use the Rotate block from Motion</p>
<img src="../Images/challenge/challenge3.png">
<h2>Challenge 4</h2>
<h3>Transform!</h3>
<p>When you finish your maze make your character change into something else!</p>
<p>Hint: Use the Switch Costume block from Looks</p>
<img src="../Images/challenge/challenge4.png">

<h1>Workshop 2</h1>
<h2>Challenge 1</h2>
<h3>Cheat code!</h3>
<p>Make your character run through your maze autonomously (automatically) when you press a secret key.</p>
<p>Hint: Use the Move and Point in Direction blocks from motion
<br>
(You will probably have to experiment with how far your character has to move before changing direction)
</p>
<h2>Challenge 2</h2>
<h3>Introducing...</h3>
<p>Add a starting block to your maze and make your character tell a story or introduce your game when it touches that block.</p>
<p>Hint: Think about what makes that block special...</p>
<h2>Challenge 3</h2>
<h3>Sounds!</h3>
<p>Instead of speech bubbles add in sounds!</p>
<p>Hint: Switch out a Say block for a Play Sound Until Done block from Sound</p>
<img src="../Images/challenge/challenge5.png">

<h1>Workshop 3</h1>
<h2>Challenge 1</h2>
<h3>Enemies!</h3>
<p>Add more enemies to make the game harder!</p>
<p>Hint: Don’t forget to move your enemies before getting the glide blocks.</p>
<h2>Challenge 2</h2>
<h3>Secret passage!</h3>
<p>Add a circle to your maze which teleports you ahead in the game. Maybe even make it teleport you past an enemy.</p>
<p>Hint: Use the Go To X,Y block from Motion</p>
<img src="../Images/challenge/challenge6.png">
<h2>Challenge 3</h2>
<h3>Timer!</h3>
<p>Add a timer to your maze. Make your character announce the time you took to beat the maze when you win.</p>
<p>Hint: Check the check box next to Timer in Sensing</p>
<img src="../Images/challenge/challenge7.png">
<p>Drag the Timer block into a Say block…</p>
<img src="../Images/challenge/challenge8.png">


<h1>After the workshops</h1>
<p>Already made the maze game? Looking for a challenge to make it even better? Try one of these!</p>
<h2>Challenge 1</h2>
<h3>Make the enemy say things!</h3>
<p>You already made the player say things. What if the enemy could say things too? Try to figure out how to make the enemy say things just like the player does.</p>
<p>Hint: switch to the Enemy Sprite under the stage, and use a "<b>When the Flag is Clicked</b>" block and a "<b>Say</b>" block.</p>
<p>Test your game. If it works, congratulations, you have completed this challenge! If not, don't give up: keep trying and check the code for any mistakes. Maybe you put a block in the wrong place, forgot a block, or programmed the wrong sprite.
If you still can't figure it out, take a peek at the solution and then try it out for yourself.</p>
<div class="panel showSolution" onclick = "toggleSolution('1')" id="showSolution1">
	<p>Show Solution</p>
</div>
<div class="panel solution" id="solution1">
	<p class="left">Here is how to make the enemy say "got you" when you touch it. The fun part is you can make it say whatever you want!<br>
	1. Go to the Enemy Sprite under the stage. Add a <b>When the Flag is Clicked</b> block.<br>
	2. Add a <b>forever</b> block under the <b>When the Flag is Clicked</b> block. Inside the <b>forever</b>, add an <b>if...then</b> statement. Make sure the <b>if...then</b> is <i>inside</i> the <b>forever</b>, not outside!<br>
	3. Go to the sensing section. Find where it says <b>touching mouse-pointer?</b>. Drag this block into the <b>if...then</b> statement. Click on the triangle next to where it says "mouse-pointer" and choose your game's player. Make sure this block goes into the <b>diamond-shaped part</b> of the <b>if...then</b>!<br>
	4. Inside the <b>if...then</b>, add a <b>Say Hello! for 2 secs</b> block. Change the "Hello!" to "Got you!" or whatever you want.<br>
	5. Your code should look similar to this:<br>
	<img src="https://cancode.us/Images/challenge/tutorial1.png">
	</p>
</div>

<h2>Challenge 2</h2>
<h3>Make the enemy chase the player when close!</h3>
<p>You have already made the enemy move around the stage. How cool would it be if the enemy knew where the player was and followed it? Try to make the enemy follow the player.</p>
<p>Hint: switch to the Enemy Sprite under the stage, and use a "<b>When the Flag is Clicked</b>" block, a "<b>point towards</b>" block from the motion section, a "<b>less than</b>" block from the operators
	section, and a "<b>distance to</b>" block from the sensing section.</p>
<p>Test your game. If it works, congratulations, you have completed this challenge! If not, don't give up: keep trying and check the code for any mistakes. Maybe you put a block in the wrong place, forgot a block, or programmed the wrong sprite.
If you still can't figure it out, take a peek at the solution and then try it out for yourself.</p>
<div class="panel showSolution" onclick = "toggleSolution('2')" id="showSolution2">
	<p>Show Solution</p>
</div>
<div class="panel solution" id="solution2">
	<p class="left">Here is how to make the enemy move towards the player when close.<br>
	1. Go to the Enemy Sprite under the stage. Add a <b>When the Flag is Clicked</b> block.<br>
	2. Add an <b>forever</b> block under the <b>When the Flag is Clicked</b> block. Inside the <b>forever</b>, add an <b>if</b> block.<br>
	3. Inside the diamond of the <b>if</b> block, add a <b>less than</b> block.<br>
	4. In the left box of the <b>less than</b> block, add a <b>distance to</b> block. Click the small triangle and select your game's player.<br>
	5. In the right box of the <b>less than</b> block, add a number for how close the player has to be before the enemy chases it.<br>
	4. Inside the <b>if</b> block, add a <b>point towards</b> block. Click on the triangle next to where it says "mouse-pointer" and choose your game's player.<br>
	5. Under the <b>point towards</b> block, add a <b>move 10 steps</b> block. You can find this in the motion section. Change this number to make the enemy faster or slower. Make sure this block is <em>inside</em> the <b>if</b>, not outside!<br>
	6. Your code should look similar to this:<br>
	<img src="https://cancode.us/Images/challenge/tutorial2.png"><br>
	7. If the enemy flips upside down, click on the Enemy Sprite under the stage and click on the letter <b>i</b> in the corner. Where it says "rotation style", click on the left-right option:<br>
	<img src="https://cancode.us/Images/challenge/tutorial3.png"><br>
	<img src="https://cancode.us/Images/challenge/tutorial4.png">
	</p>
</div>

<h2>Challenge 3</h2>
<h3>Make the player change colors!</h3>
<p>Right now, the player always looks the same. What if your player changed color when you moved?</p>
<p>Hint: switch to the Player Sprite under the stage, and use a "<b>change color effect</b>" block from the looks section under
	your "<b>when up arrow key pressed</b>" block and the other keyboard blocks.</p>
<p>Test your game. If it works, congratulations, you have completed this challenge! If not, don't give up: keep trying and check the code for any mistakes. Maybe you put a block in the wrong place, forgot a block, or programmed the wrong sprite.
If you still can't figure it out, take a peek at the solution and then try it out for yourself.</p>
<div class="panel showSolution" onclick = "toggleSolution('3')" id="showSolution3">
	<p>Show Solution</p>
</div>
<div class="panel solution" id="solution3">
	<p class="left">Here is how to make the player change colors when it moves.<br>
	1. Go to the Player Sprite under the stage. Find the <b>when up arrow key presed</b> block.<br>
	2. Add a <b>change color effect by 25</b> block somewhere under the <b>when up arrow key pressed</b> block.<br>
	3. Your code should look similar to this for the up arrow:<br>
	<img src="https://cancode.us/Images/challenge/tutorial5.png"><br>
	4. Repeat these steps for the other three arrows (left arrow, right arrow, down arrow).<br>
	5. To understand how this works, try the <b>Understanding your Code</b> section below.
	</p>
</div>
<h3>Extra Challenge</h3>
<p>Now that you have completed this challenge, can you figure out how to make the enemy change color too?</p><br>
<h2>Understanding your Code</h2>
<p>In challenge 3, you may notice that the order you put the blocks in doesn't matter as much as in challenges 1 and 2 or some
	of the other code you have done. Why do you think this is?</p>


</div>
<br><br><br><br><br><br><br>


<!-- JavaScript that allows showing the solution -->
<script>
document.getElementById("showSolution1").innerText = "Show Solution";
document.getElementById("showSolution2").innerText = "Show Solution";
document.getElementById("showSolution3").innerText = "Show Solution";
function toggleSolution(code) {
	if (document.getElementById("solution" + code).style.display == "block") {
		document.getElementById("solution" + code).style.display = "none";
		document.getElementById("showSolution" + code).innerText = "Show Solution";
  } else {
    document.getElementById("solution" + code).style.display = "block";
  	document.getElementById("showSolution" + code).innerText = "Hide Solution";
  }
}
</script>

<!-- End page content -->
</div>

<!-- Footer (edit footer.js to edit content of footer)-->
<div id="footer"></div>
<script src="https://cancode.us/footer.js"></script>

<!-- Mobile compatibility -->
<script src="https://cancode.us/mobile.js"></script>

<script src="https://cancode.us/main.js"></script>

</body>
</html>