5 – Simon Says – Images | Code Perspectives

Many modern programs, like GUIs, window managers, spreadsheets, word processors, and games, use a programming model based on the handling of events. Hence, we are going to study them and talk about EDP – Event Driven Programming.

Class work

Let’s start building the game.

Topics for today

Local and global variables
Scope
Event-driven programming:
- peripherals
- drivers
- interrupts
- events
- event handlers

Our goal: Simon Says (click on the image to play it)

Click the image to play

Workfiles

Download in class: simon-says.zip

Individual files:

Initial templates

template.html: Initial HTML template

<!DOCTYPE html>

<head>

<title>My first HTML page</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

template.js: Initial javascript page

initial Template
JavaScript

var SS = {}; // Global object container function P(i){ console.log(i); }

1
2
3
4
5

var SS = {}; // Global object container

function P(i){
console.log(i);
}
Our page so far: template.html

v0 – HTML content and the images of the lightbulbs

simon_0.html: Main HTML content

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        
        <title>Simon Says</title>
    </head>
    
    <body>
        <div id = "container">
            <div id = "header">
                <h1 id = "title">Images</h1>
            </div>

<!DOCTYPE html>

<head>

<title>Simon Says</title>

</head>

<body>

<h1 id = "title">Images</h1>

</div>

</div>

</div>

</body>

</html>

lib0.js: Image toggle, listening of mouse events

var SS = {}; // Global object container

function init_images() {

SS.img_off = "images/lb_off.png";

SS.img_on = [ "images/lb_yellow.png",

"images/lb_blue.png",

"images/lb_green.png",

"images/lb_red.png",

"images/lb_purple.png"];

SS.n = SS.img_on.length;

SS.img_delay = 800;

}

function turn_lb_on(i, image) {

image.src = SS.img_on[i];

}

function turn_lb_off(image) {

image.src = SS.img_off;

}

function lb_click(i) {

var img_id = "lb_" + String(i);

var image = document.getElementById(img_id);

turn_lb_on(i, image);

setTimeout( function(){turn_lb_off(image)}, SS.img_delay);

}

function play_game() {

alert("play game");

}

window.onload = function() {

init_images();

}

function P(i){

console.log(i);

}

Our page so far: simon_0.html

Code Perspectives – STEM Intros

Science, Technology, Engineering, and Math intros

5 – Simon Says – Images

Class work

Topics for today

Our goal: Simon Says (click on the image to play it)

Workfiles

Initial templates

v0 – HTML content and the images of the lightbulbs