138 lines
4.1 KiB
HTML
138 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Lesson 2: Hunt All the Ships!</title>
|
||
<style>
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: #fff3e0;
|
||
color: #2c3e50;
|
||
padding: 20px;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
h1 {
|
||
color: #e67e22;
|
||
text-align: center;
|
||
border-bottom: 3px solid #f39c12;
|
||
padding-bottom: 10px;
|
||
}
|
||
h2 {
|
||
color: #2c3e50;
|
||
margin-top: 25px;
|
||
}
|
||
.outcome {
|
||
background: #ffecb3;
|
||
padding: 15px;
|
||
border-left: 4px solid #f39c12;
|
||
margin: 15px 0;
|
||
}
|
||
.why {
|
||
background: #dcedc8;
|
||
padding: 15px;
|
||
border-left: 4px solid #8bc34a;
|
||
margin: 15px 0;
|
||
}
|
||
.step {
|
||
background: #e1f5fe;
|
||
padding: 12px;
|
||
margin: 10px 0;
|
||
border-radius: 6px;
|
||
border-left: 4px solid #039be5;
|
||
}
|
||
code {
|
||
background: #f1f1f1;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
}
|
||
.time {
|
||
font-weight: bold;
|
||
color: #d32f2f;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🚢 Lesson 2: Hunt All the Ships!</h1>
|
||
|
||
<div class="outcome">
|
||
<h2>✅ Learning Outcomes</h2>
|
||
<ul>
|
||
<li>Use <strong>lists</strong> to store multiple ships</li>
|
||
<li>Create a <strong>game loop</strong> with turns</li>
|
||
<li>Track game state (<code>hits</code>, <code>turns</code>)</li>
|
||
<li>Make decisions with <code>for</code> loops and <code>if</code> inside lists</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="why">
|
||
<h2>💡 Why It Matters</h2>
|
||
<p>Real games don’t end after one guess! They track <strong>score</strong>, <strong>lives</strong>, and <strong>progress</strong>. Learning to manage game state is how you build Pac-Man, Minecraft, or Roblox games!</p>
|
||
<p>Lists and loops are used in <em>every</em> programming language — from apps to robots.</p>
|
||
</div>
|
||
|
||
<h2>⏱️ Lesson Plan (40 minutes)</h2>
|
||
|
||
<div class="step">
|
||
<span class="time">0–5 min</span> → <strong>Review & Goal</strong><br>
|
||
“Last time: 1 ship. Today: <strong>3 ships</strong> and <strong>10 turns</strong>!”<br>
|
||
Show the enhanced game in action.
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="time">5–20 min</span> → <strong>Upgrade Your Code</strong><br>
|
||
Edit your Lesson 1 file to this:
|
||
<pre style="background:#2d2d2d;color:#f8f8f2;padding:10px;border-radius:6px;font-size:14px;">
|
||
import random
|
||
|
||
ships = []
|
||
while len(ships) < 3:
|
||
r = random.randint(0, 4)
|
||
c = random.randint(0, 4)
|
||
if [r, c] not in ships:
|
||
ships.append([r, c])
|
||
|
||
print("3 ships hidden! 10 turns to find them all.")
|
||
hits = 0
|
||
|
||
for turn in range(10):
|
||
print("\nTurn", turn + 1)
|
||
guess_row = int(input("Row (0-4): "))
|
||
guess_col = int(input("Col (0-4): "))
|
||
|
||
if [guess_row, guess_col] in ships:
|
||
print("🎯 HIT!")
|
||
ships.remove([guess_row, guess_col])
|
||
hits += 1
|
||
if hits == 3:
|
||
print("🏆 You win!")
|
||
break
|
||
else:
|
||
print("💦 MISS!")
|
||
|
||
if hits < 3:
|
||
print("Game over! You found", hits, "ships.")
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="time">20–35 min</span> → <strong>Level Up!</strong><br>
|
||
• Test the game (try to win!)<br>
|
||
• 🌟 <em>Challenge 1</em>: Let players use <strong>A, B, C</strong> for rows!<br>
|
||
<code>row_letter = input("Row (A-E): ").upper()</code><br>
|
||
<code>guess_row = ord(row_letter) - ord('A')</code><br>
|
||
• 🌟 <em>Challenge 2</em>: Show how many turns are left!
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="time">35–40 min</span> → <strong>Play & Reflect</strong><br>
|
||
Play your friend’s game! What makes it fun?<br>
|
||
“Now YOU can make games — not just play them!”
|
||
</div>
|
||
|
||
<h2>🌟 You’re Now a Game Coder!</h2>
|
||
<p>You’ve learned the core ideas behind almost every game: <strong>hidden objects</strong>, <strong>player input</strong>, <strong>feedback</strong>, and <strong>win/lose conditions</strong>.</p>
|
||
</body>
|
||
</html> |