Unit 4: Day 6
Tasks
45.1 Discuss Flowcharts, Pseudocode and Other ways of Representing Code
- Flowcharts are a common way of representing or planning code. They tend to work better with languages that are not as event-driven as Javascript. Therefore I tend not to use them often in my lessons. However they are part of the AP CSP curriculum so below is an example of how they could be used in an Adventure type program such as the next one. Note that the sample flowchart below is for an older example than the one in the next example
- To give students practice, have them create a flowchart for the first two stages of their adventure game below to help with planning.
- Alternative lesson: Pseudocode can also be used to describe an algorithm without using code.
- See Page 150 of Cooperative Learning Structures for a lesson.
45.2 Adventure Game Example - Intro to Advanced Boolean and Custom Functions
- The theme for this assignment could be as simple as a ‘slide show’ but I like to give them the taste of a larger Choose Your Own Adventure style game. The images and text I use hint at the more complicated game plot but really each scene is just an image and some text.
- Create a scenenum variable to control what is on the screen
- Create custom functions for your ‘Covid Ghost Town Vacation’
- Use || to give more power to keypresses
- Add one scene function at a time and begin with the basic keypress key===’+’
- Then add the OR statements
Adventure Example
This example requires 4 image files.
//Global Variables
let cave, church, town, meadow;
let scenenum = 1;
let ts = 2;
function preload(){
cave = loadImage("images/cave.jpg");
church = loadImage("images/church.jpg");
town = loadImage("images/town.jpg");
meadow = loadImage("images/meadow.jpg");
}//end preloading of images and fonts
function setup() {
let sketch = createCanvas(600, 400);
sketch.parent("mycanvas");
background(100,92,80);
}//end setup
function draw() {
if(scenenum === 1){
scene1();
} else if (scenenum === 2){
scene2();
} else if(scenenum === 3){
scene3();
} else if (scenenum === 4){
scene4();
}
}//end draw
function keyPressed() {
if( key==='+' || keyCode===RIGHT_ARROW ){
scenenum++;
}
if(scenenum > 4 || key==='r' ){
scenenum = 1;
}
print(scenenum);
}//end keyPressed
function scene1(){
background(255,255,0);
image(cave, 50,50, width-100, height-150);
textSize(ts);
if (ts<40){ //add this growing text later
ts++;
}
text("The Cave of the Evil Monster", 200, 390);
}
function scene2(){
background(255,255,0);
image(church, 50,50, width-100, height-150);
text("The Monster Destroyed the Church last week.", 200, 390);
}
function scene3(){
background(255,255,0);
image(town, 50,50, width-100, height-150);
text("I will avenge my town!", 200, 390);
}
function scene4(){
background(255,255,0);
image(meadow, 50,50, width-100, height-150);
text("And bury the monster in the meadow.", 200, 390);
}
45.3 Boolean Quick Check #3 (if not done yesterday)
45.4 Finish P5 Assign 2.2 Move the Square
- Message to students who are struggling: Wrapping screen is trickier than it looks, be sure to think about where to put the square when it wraps so the other IF statements do not conflict.
Continue to Unit 4: Day 7 »
