Post on 19-Jun-2015
description
LFU - 12. oktober 2014 - Ljubljana - KCQ
AdaLovelaceL. 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 Google
KodaOriginal: 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
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
for loopfor(var count=0; count<10; count++){
console.log(count);}
brackets.io
for loopfor(var count=0; count<10; count++){
console.log(count);}
Komentarji// Hi, my name is comment
/*I am comment too. I can take more space.*/
for loopfor(var count=0; count<10; count++){
console.log(count);}
test.html
<html><head>
<script>console.log("JavaScript");
</script></head><body></body>
</html>
Google Chrome Console
for loopfor(var count=0; count<10; count++){
console.log(count);}
Stevilke141+15-232*3829/35%4
for loopfor(var count=0; count<10; count++){
console.log(count);}
Besedilo "Ada" "Lovelace""Ada".length "Lovelace".length
for loopfor(var count=0; count<10; count++){
console.log(count);}
Boolova vrednosttruefalse1<2
for loopfor(var count=0; count<10; count++){
console.log(count);}
Spremenljivkavar score = 0; // stevilkascore;console.log(score);
var muted = false; // boolova vrednost
var feedback = "LFU!!!"; // niz
for loopfor(var count=0; count<10; count++){
console.log(count);}
Tabela vrednosti (Array)var lampList = [];
var tampons = ["red", "green", "blue"];
var first = tampons[0];
document.write(first);
console.log(tampons[0]);
for loopfor(var count=0; count<10; count++){
console.log(count);}
Funkcijeconfirm("I feel awesome!");
prompt("What is your name?");
console.log("What is your name?");
for loopfor(var count=0; count<10; count++){
console.log(count);}
Funkcijevar sayHello = function(name) {
document.write("Hej" + " " + name);
};
sayHello("Maja");
for loopfor(var count=0; count<10; count++){
console.log(count);}
if stavekvar x = 1;if ( x === 1) {
document.write("x je enak 1");}
for loopfor(var count=0; count<10; count++){
console.log(count);}
if stavekvar x = 4;if ( x !== 1) {console.log("x ni enak 1");// document.write("x ni enak 1");}
for loopfor(var count=0; count<10; count++){
console.log(count);}
if else stavekvar key = "left";
if (key == "up"){console.log("Key is up.");
} else {console.log("Some key.");
}
for loopfor(var count=0; count<10; count++){
console.log(count);}
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...
}
for loopfor(var count=0; count<10; count++){
console.log(count);}
Metodeplay(soundToPlay)pauseSound(SoundToPlay)setup()draw()keyPressed()keyReleased()
for loopfor(var count=0; count<10; count++){
console.log(count);}
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
PROCESSINGJS 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