17. What can we ‘easily’
change?
● Skip intro and go directly to the game
● Navigation keys
● Initial number of tampons
● Number of tampons in the pack
● Color of tampons
● Avatar of the enemy
● Animations
● Background color
● Ground color
● Cloud color
● Image of the lamppost
● Change lamppost into another object
● The height of the jump
● Larger canvas with the game
● Change Intro Images (Translate)
● Change sounds
● ...
26. Comments
for loop
// Hi, my name is comment
for(var count=0; count<10; count++){
console.log(count);
/*
}
I am comment too.
I can take more space.
*/
33. Variables
for loop
var score = 0; // number
score;
console.log(score);
for(var count=0; count<10; count++){
console.log(count);
}
var muted = false; // boolean
var feedback = "I feel awesome";
34. Arrays
for loop
var lampList = [];
for(var count=0; count<10; count++){
var console.tampons log(= ["count);
red", "green", "blue"];
var }
first = tampons[0];
console.log(first);
console.log(tampons[0]);
35.
36. Functions
for loop
confirm("I feel awesome!");
for(var count=0; count<10; count++){
console.log(count);
prompt("What is your name?");
}
console.log("What is your name?");
50. Classes and objects
Animation
GameState
Lamppost
LampFactory
Cloud
CloudFactory
Gun
Ammo
BuildingFactory
EnemyFactory
DuaneReade
Building
Player
Enemy
Tampon
51. class Tampon {
var xTamp;
var yTamp;
var tampSpeed;
var randFR;
Animation tampPic;
var h;
var w;
Tampon() {
xTamp = 750;
yTamp = 250;
tampSpeed = -2;
randFR = Math.floor((Math.random() * 20) + 8);
tampPic = new Animation("tampz", 2, randFR);
h = tampPic.getHeight();
w = tampPic.getWidth();
}
void showTamp() {
tampPic.display(xTamp, yTamp);
}
void moveTamp() {
xTamp = xTamp + tampSpeed;
}
void releaseTamp() {
yTamp = yTamp + tampSpeed;
}
}
class DuaneReade {
var tamponList;
DuaneReade() {
tamponList = [];
}
void animate() {
var willItBlend = Math.floor((Math.random() * 500) + 1);
if (willItBlend == 50) {
tamponList.push(new Tampon());
}
showTamponList();
moveTamponList();
removeTampon();
reloadTampon();
}
// MORE CODE...
}
54. What can we ‘easily’
change?
● Skip intro and go directly to the game
● Navigation keys
● Initial number of tampons
● Number of tampons in the pack
● Color of tampons
● Avatar of the enemy
● Animations
● Background color
● Ground color
● Cloud color
● Image of the lamppost
● Change lamppost into another object
● The height of the jump
● Larger canvas with the game
● Change Intro Images (Translate)
● Change sounds
● ...
55. Skip intro
HINT: If you are on the first page (0: home) press SHIFT (key 16) and go to the game
page (3: game play)
if (keyCode == 16 && state.page==0){
state.page = 1; // change to 3
Why is sound not playing?
56. Change navigation keys
if (keyCode == 77)
if (keyCode == 39)
if (keyCode == 16)
if (keyCode == 83)
if (keyCode == 38)
SPACE: 32 // throw tampon
RIGHT: 39 // forward
LEFT: 37 // back
M: 77 // mute
SHIFT: 16 // begin
UP: 38 // jump
P: 80 // pause
S: 83 // restart
TASK: Change the code so that you will be able to play the game with one hand!
57. Change the number of
initial tampons
HINT: find where the number is defined and change it
//player variables
var tampon = 10; //50
TASK: What happens if we restart the game (S)? Fix it!
HINT: Find where the conditions are end screen (4) and key S (83).
58. Change the number of
tampons in the pack
HINT: Find where the number is defined and change it
tampon = tampon + 5 // 50
60. Color of tampons
TASK: Open images in image
editor and change the color.
● ammo…png 4x
● attack…png 2x
61. New enemy
enemies = new EnemyFactory("eWalk", 1);
/* change to swat and play the game */
eWalk swat
TASK: Now try to build your own.
62. Animations
Animation title;
title = new Animation("title", 2, 20);
Animation girlIntro;
girlIntro = new Animation("walk",2,5);
63. Background coloor
void startGame() {
background(100);
/*
background(255,255,0); //yellow (red, green and blue 0-255)
color yellow = color(255,252, 25);
color red = color(178,18,18);
color orange = color(255,83, 13);
color blue = color(9, 113, 178);
color pink = color(255, 182, 193);
*/
64. Ground color
void showBuilding() {
fill(0); // color name or number(s)
/*
background(255,255,0); //yellow (red, green and blue 0-255)
color yellow = color(255,252, 25);
color red = color(178,18,18);
color orange = color(255,83, 13);
color blue = color(9, 113, 178);
color pink = color(255, 182, 193);
*/
65. Change the cloud color
void showCloud() {
fill(255);
fill(0); // black or
// (0,0,0) (red, green and blue 0-255)
66. Change the cloud color
Gray clouds (uncomment c and add c to fill())
c = Math.floor((Math.random() * 255) + 1);
}
void showCloud() {
fill(c);
67. Change the cloud color
Color clouds
r = Math.floor((Math.random() * 255) + 1);
g = Math.floor((Math.random() * 255) + 1);
b = Math.floor((Math.random() * 255) + 1);
}
void showCloud() {
fill(r,g,b);
68. Image of lamppost
TASK: Open the image
lamppost0000.png in Image editor
and change it.
69. Height of the jump
jumpHeight = 200;
/*
jumpHeight = 100; // higher
jumpHeight = 300; // lower
*/
70. Larger game canvas
var CANVAS_HEIGHT = 500; // 700
var CANVAS_WIDTH = 700; // 1200
71. Change sounds
var jumpSound = new buzz.sound("res/sound/jumpSound", {formats: ["ogg", "mp3"]});
var tamponSound = new buzz.sound("res/sound/tamponSound", {formats: ["ogg", "mp3"]});
var gameOverSound = new buzz.sound("res/sound/gameOverSound", {formats: ["ogg", "mp3"]});
var beethovenSound = new buzz.sound("res/sound/beethovenSound", {formats: ["ogg", "mp3"]});
var ouchSound = new buzz.sound("res/sound/ouchSound", {formats: ["ogg", "mp3"]});
var shootSound = new buzz.sound("res/sound/shootSound", {formats: ["ogg", "mp3"]});
72. You can leave behind the old
regressive sexist
representations and
instead create interactive
experiences that portray
women as capable, complex
and inspirational.
Anita Sarkeesian, Feminist Frequency