Essential Question:
- How do we plan out advanced game loops for creating interactive games?
Learning Objectives:
- Utilize grid layouts to create complex website structures
- Apply advanced HTML & CSS techniques to visually enhance a website
- Implement foundational code for game interactivity
Standards:
- NYS Next Generation Learning Standards RST.4.11-12 — Determine the meaning of symbols, key terms, and other content-specific words and phrases as they are used in scientific or technical sources.
- New York State Learning Standards CDOS 3a — Students will demonstrate mastery of the foundation skills and competencies essential for success in the workplace.
- IT Specialist HTML & CSS 5.4 — Analyze styles that implement a simple responsive layout - Units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width
Materials:
Opening Task (20 Minutes)
- Scholars will complete opening task on Schoology covering topics learned from python foundations unit
- Randomly selected scholar will facilitate review with peers
CSS Grids (10 Minutes)
Teacher guided demonstration of CSS Grids.
- How could we describe the layouts of existing clicker style games?
- How do we visually differentiate bewteen various functions of the game?
Game Layout (20 Minutes)
Scholars will work on creating the visual layouts of their game using prior knowledge of HTML & CSS
Break (10 Minutes)
Game Layout Continued (35 Minutes)
Scholars will work on creating the visual layouts of their game using prior knowledge of HTML & CSS
Game Setup (45 Minutes)
- Scholars will implement a basic click counter using past JavaScript knowledge
<h1>Knowledge Clicker</h1>
<p id="pointTracker">0 IQ Points</p>
<button onclick="addPoint()">🧠</button>
<script>
let points = 0
let pointTracker = document.getElementById('pointTracker')
function addPoint() {
points = points + 1
pointTracker.innerText = points + ' IQ Points'
}
</script>Exit Ticket (10 Minutes)
Scholar will respond to the following exit ticket questions before dismissal:
- In your own words, explain how CSS Grids can be used to create layouts for clicker style games. (2 points)
- Consider the provided click counter code. Briefly explain what each part of the code does: (3 points)
let points = 0
let pointTracker = document.getElementById('pointTracker')
function addPoint() { /* ... */ }- What do you envision being the hardest part of creating your clicker game? Why? (1 point)