[SI] Ada Lovelace Day 2014 - Tampon Run

LFU - 12. oktober 2014 - Ljubljana - KCQ

Ada
Lovelace
L. F. Menabrea: Sketch of The Analytical Engine
Invented by Charles Babbage Note G

Have the courage
to try. You can
make amazing
things happen.
Megan Smith, U.S. CTO, former VP of Google[x]
Photo: Taylor Hill/FilmMagic for

Koda
Original: https://github.com/andrea-3000/TAMPON-RUN
Kopija za delavnico: https://github.com/princessdesign/TAMPON-RUN

Sestavni deli
● HTML
● CSS
● JavaScript
○ Processing.js http://processingjs.org/
○ Buzz Javascript HTML5 Audio knjiznica http://buzz.jaysalvat.com/
● Slike, glasba

Navigacija s tipkami
● DESNO: 39 // naprej
● LEVO: 37 // nazaj
● M: 77 // tiho
● SHIFT: 16 // start
● PRESLEDNICA: 32 // tampon
● GOR: 38 // skok
● P: 80 // pavza
● S: 83 // ponovni start

Glasba
● beethovenSound
● jumpSound
● tamponSound
● gameOverSound
● ouchSound
● shootSound

Igraj igro 5 minut in
ustvari seznam stvari,
ki bi jih rada v igri
spremenila.

TODO
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________
● ____________

DANES
● ____________
● ____________
● ____________
● ____________
● ____________

Kaj lahko enostavno
spremenimo?
● Preskoci intro
● Tipke za navigacijo
● Zacetno stevilo tamponov
● Stevilo tamponov v skatli
● Barvo tamponov
● Avatarje
● Animacije
● Barvo ozadja
● Barvo tal
● Barvo oblakov
● Sliko svetilke
● Visino skoka
● Velikost okna z igro
● Zacetne slike z uvodom (prevod)
● Zvoke
● ...

<html>
<head>
<title>Tampon Run!</title>
<style type="text/css">
/* CSS CODE for STYLE */
</style>
<script src="lib/processing-1.4.1.min.js"></script>
<script src="lib/buzz.min.js" type="text/javascript"></script>
<script type="text/processing" data-processing-target="creators">
// JAVASCRIPT KODA (creators canvas)
</script>
<script type="text/processing" data-processing-target="mycanvas">
/* JAVASCRIPT
KODA Z IGRO (mycanvas canvas) */
</script>
</head>
<body>
<canvas id="creators"></canvas>
<canvas id="mycanvas"></canvas>
</body>
</html>

for loop
for(var count=0; count<10; count++){
console.log(count);
}JavaScript - Osnove

for loop
console.log(count);
}
brackets.io

Komentarji
for loop
// Hi, my name is comment
console.log(count);
/*
}
I am comment too.
I can take more space.
*/

for test.html
loop
<html>
console.log(count);
}
<head>
<script>
console.log("JavaScript");
</script>
</head>
<body>
</body>
</html>

Stevilke
for loop
14
1+1
5-2
32*3
829/3
5%4
console.log(count);
}

Besedilo
"Ada"
"Lovelace"
"Ada".length
"Lovelace".length
for loop
console.log(count);
}

Boolova vrednost
for loop
true
false
1<2
console.log(count);
}

Spremenljivka
for loop
var score = 0; // stevilka
score;
console.log(score);
console.log(count);
}
var muted = false; // boolova vrednost
var feedback = "LFU!!!"; // niz

Tabela for loop
vrednosti (Array)
var lampList = [];
var console.tampons log(= ["count);
red", "green", "blue"];
var }
first = tampons[0];
document.write(first);
console.log(tampons[0]);

Funkcije
for loop
confirm("I feel awesome!");
console.log(count);
prompt("What is your name?");
}
console.log("What is your name?");

Funkcije
for loop
var sayHello = function(name) {
console.log(count);
}
document.write("Hej" + " " + name);
};
sayHello("Maja");

if stavek
for loop
var x = 1;
if ( x === 1) {
console.log(count);
}
document.write("x je enak 1");
}

if stavek
for loop
var x = 4;
if ( x !== 1) {
console.log("x ni enak 1");
// document.write("x ni enak 1");
}
console.log(count);
}

if for else loop
stavek
var key = "left";
if (key == "up"){
console.log(count);
}
console.log("Key is up.");
} else {
console.log("Some key.");
}

if for & loop
else if & else stavek
var key = "left";
if (key == "right" ) {
console.log(count);
}
console.log("Key is right.");
} else if (key == "up" ){
console.log("Key is up.");
} else {
console.log("Some key.");
}

for zanka
document.write(count);
document.write("<br />")
}

for zanka
towns = ["LJ", "MB", "KR", "NM", "KP", "GO", "KR"];
for(var i=0; i<towns.length; i++){
document.write(towns[i]);
document.write("<br />")
}

Objektno programiranje
Animation
BuildingFactory
GameState
EnemyFactory
Lamppost
DuaneReade
LampFactory
Building
Cloud
Player
CloudFactory
Enemy
Gun
Tampon
Ammo

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...
}

Metode
for loop
play(soundToPlay)
pauseSound(SoundToPlay)
setup()
draw()
keyPressed()
keyReleased()
console.log(count);
}

Metode
for loop
void pauseSound(soundToPlay) {
console.log(count);
}
soundToPlay.pause()
}

Preskoci intro
HINT: Ce si na zacetku (0: home) pritisni SHIFT (tipka 16) in pojdi na igro (3: game
play)
if (keyCode == 16 && state.page==0){
state.page = 1; // change to 3
NALOGA: Zakaj zvok ne igra?

Spremeni tipke z ukazi
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
NALOGA: Spremeni kodo tako, da bos igrico lahko igrala z eno roko.

Spremeni zacetno st.
tamponov
NAMIG: Poisci kje je stevilo definirano in ga spremeni
//player variables
var tampon = 10; //50
NALOGA: Kaj se zgodi, ce igro ponovno zazenes (S)? Popravi!
NAMIG: End game (4) tipka S (83).

Spremeni stevilo tamponov
v skatli
NAMIG: Poisci kje je stevilo definirano in ga spremeni
tampon = tampon + 5 // 50

Spremni slike v uvodu
statementOne = loadImage("res/statementOne0000.png");
statementTwo = loadImage("res/statementTwo0000.png");
statementThree = loadImage("res/statementThree0000.png");
statementFour = loadImage("res/statementFour0000.png");
statementFive = loadImage("res/statementFive0000.png");
instructOne = loadImage("res/learn0000.png");
pausePage = loadImage("res/pause0000.png");

Barva tamponov
NALOGA: Odpri slike v
urejevalniku slik in jih
spremeni.
● ammo…png 4x
● attack…png 2x

Ustvari nov avatar (enemy)
enemies = new EnemyFactory("eWalk", 1);
/* spremeni v swat in zazeni igro */
eWalk swat
NALOGA: Zdaj ustvari svojega

Animacije
Animation title;
title = new Animation("title", 2, 20);
Animation girlIntro;
girlIntro = new Animation("walk",2,5);

Barva ozadja
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);
*/

Barva tal
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);
*/

Barva oblakov
void showCloud() {
fill(255);
fill(0); // black or
// (0,0,0) (red, green and blue 0-255)

Barva oblakov - siva
Gray clouds (uncomment c and add c to fill())
c = Math.floor((Math.random() * 255) + 1);
}
void showCloud() {
fill(c);

Barva oblakov - nakljucna
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);

Slika svetilke
NALOGA: Odpri sliko lamppost0000.png
v urejevalniku slik in jo spremeni.

Visina skoka
jumpHeight = 200;
/*
jumpHeight = 100; // visje
jumpHeight = 300; // nizje
*/

Velikost okna z igro
var CANVAS_HEIGHT = 500; // 700
var CANVAS_WIDTH = 700; // 1200

Spremeni zvoke
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"]});

JAVASCRIPT
http://learnxinyminutes.com/docs/javascript/
http://www.codecademy.com/glossary/javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
TUTORIALI
http://www.codecademy.com/tracks/javascript
https://www.khanacademy.org/computing/cs

PROCESSINGJS
http://processingjs.org/reference/

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

Kontakt:
https://www.facebook.com/princessdesignnet
https://twitter.com/princessdesign

[SI] Ada Lovelace Day 2014 - Tampon Run

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à [SI] Ada Lovelace Day 2014 - Tampon Run

Similaire à [SI] Ada Lovelace Day 2014 - Tampon Run (20)

Plus de Maja Kraljič

Plus de Maja Kraljič (8)

Dernier

Dernier (20)

[SI] Ada Lovelace Day 2014 - Tampon Run