[SI] Ada Lovelace Day 2014 - Tampon Run

LFU - 12. oktober 2014 - Ljubljana - KCQ

AdaLovelaceL. F. Menabrea: Sketch of The Analytical Engine Invented by Charles Babbage Note G

https://www.fourmilab.ch/babbage/sketch.html

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 Google

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

https://github.com/andrea-3000/TAMPON-RUN

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

Avatarji / Slike

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

Naredimo svojo igro ...

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

● ____________● ____________● ____________● ____________● ____________

TODO

● ____________● ____________● ____________● ____________● ____________

DANES● ____________● ____________● ____________● ____________● ____________

● Preskoci intro ● Tipke za navigacijo● Zacetno stevilo tamponov● Stevilo tamponov v skatli● Barvo tamponov● Avatarje● Animacije● Barvo ozadja● Barvo tal● Barvo oblakov

Kaj lahko enostavno spremenimo?

● Sliko svetilke● Visino skoka● Velikost okna z igro● Zacetne slike z uvodom (prevod)● Zvoke● ...

Datoteke

index.html

<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 loopfor(var count=0; count<10; count++){

console.log(count);}

JavaScript - Osnove



brackets.io



Komentarji// Hi, my name is comment

/*I am comment too. I can take more space.*/



test.html

<html><head>

<script>console.log("JavaScript");

</script></head><body></body>

</html>

Google Chrome Console



Stevilke141+15-232*3829/35%4



Besedilo "Ada" "Lovelace""Ada".length "Lovelace".length



Boolova vrednosttruefalse1<2



Spremenljivkavar score = 0; // stevilkascore;console.log(score);

var muted = false; // boolova vrednost

var feedback = "LFU!!!"; // niz



Tabela vrednosti (Array)var lampList = [];

var tampons = ["red", "green", "blue"];

var first = tampons[0];

document.write(first);

console.log(tampons[0]);



Funkcijeconfirm("I feel awesome!");

prompt("What is your name?");

console.log("What is your name?");



Funkcijevar sayHello = function(name) {

document.write("Hej" + " " + name);

};

sayHello("Maja");



if stavekvar x = 1;if ( x === 1) {

document.write("x je enak 1");}



if stavekvar x = 4;if ( x !== 1) {console.log("x ni enak 1");// document.write("x ni enak 1");}



if else stavekvar key = "left";

if (key == "up"){console.log("Key is up.");

} else {console.log("Some key.");

}



if & else if & else stavekvar key = "left";

if (key == "right" ) {console.log("Key is right.");

} else if (key == "up" ){console.log("Key is up.");

} else {console.log("Some key.");

}

for zankafor(var count=0; count<100; count++){

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

}

for zankatowns = ["LJ", "MB", "KR", "NM", "KP", "GO", "KR"];

for(var i=0; i<towns.length; i++){document.write(towns[i]);document.write("<br />")

}

Objektno programiranjeAnimationGameStateLamppostLampFactoryCloudCloudFactoryGunAmmo

BuildingFactoryEnemyFactoryDuaneReadeBuildingPlayerEnemyTampon

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

}



Metodeplay(soundToPlay)pauseSound(SoundToPlay)setup()draw()keyPressed()keyReleased()



Metodevoid pauseSound(soundToPlay) {

soundToPlay.pause()

}

Spremenimo kodo!

● Preskoci intro ● Tipke za navigacijo● Zacetno stevilo tamponov● Stevilo tamponov v skatli● Barvo tamponov● Avatarje● Animacije● Barvo ozadja● Barvo tal● Barvo oblakov

Kaj lahko enostavno spremenimo?

● Sliko svetilke● Visino skoka● Velikost okna z igro● Zacetne slike z uvodom (prevod)● Zvoke● ...

Preskoci introHINT: 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 ukaziif (keyCode == 77)if (keyCode == 39)if (keyCode == 16)if (keyCode == 83)if (keyCode == 38)

NALOGA: Spremeni kodo tako, da bos igrico lahko igrala z eno roko.

SPACE: 32 // throw tamponRIGHT: 39 // forwardLEFT: 37 // backM: 77 // muteSHIFT: 16 // beginUP: 38 // jumpP: 80 // pauseS: 83 // restart

Spremeni zacetno st. tamponovNAMIG: 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 skatliNAMIG: Poisci kje je stevilo definirano in ga spremeni

tampon = tampon + 5 // 50

Spremni slike v uvodustatementOne = 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 tamponovNALOGA: 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 */

NALOGA: Zdaj ustvari svojega

eWalk swat

AnimacijeAnimation title;

title = new Animation("title", 2, 20);

Animation girlIntro;

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

Barva ozadjavoid 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 talvoid 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 oblakovvoid showCloud() {

fill(255);

fill(0); // black or // (0,0,0) (red, green and blue 0-255)

Barva oblakov - sivaGray clouds (uncomment c and add c to fill())

c = Math.floor((Math.random() * 255) + 1);

}

void showCloud() {

fill(c);

Barva oblakov - nakljucnaColor 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 svetilkeNALOGA: Odpri sliko lamppost0000.png

v urejevalniku slik in jo spremeni.

Visina skokajumpHeight = 200;

/*

jumpHeight = 100; // visje

jumpHeight = 300; // nizje

*/

Velikost okna z igrovar CANVAS_HEIGHT = 500; // 700

var CANVAS_WIDTH = 700; // 1200

Spremeni zvokevar 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

TUTORIALIhttp://www.codecademy.com/tracks/javascripthttps://www.khanacademy.org/computing/cs

http://learnxinyminutes.com/docs/javascript/


http://www.codecademy.com/glossary/javascript

http://www.codecademy.com/glossary/javascript


http://www.codecademy.com/tracks/javascript

http://www.codecademy.com/tracks/javascript

https://www.khanacademy.org/computing/cs

https://www.khanacademy.org/computing/cs

PROCESSINGJS http://processingjs.org/reference/

http://processingjs.org/reference/

http://processingjs.org/reference/

You can leave behind the old regressive sexist representations andinstead create interactive experiences that portray women as capable, complex and inspirational.Anita Sarkeesian, Feminist Frequency

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

https://www.facebook.com/princessdesignnet

https://www.facebook.com/princessdesignnet

https://twitter.com/princessdesign



[SI] Ada Lovelace Day 2014 - Tampon Run

Technology

Transcript of [SI] Ada Lovelace Day 2014 - Tampon Run