? Browser Support ?
HTML
>
Canvas
>
Processing
>Skattejakt
Finn skatten
Lag en vei som leder piraten fram til skatten.
|
skriv f.eks
n4 v6
|
Det er tre filer involvert:
_koordinater.pde
/* @pjs preload="data/hunter.jpg,data/happyhunter.jpg,data/gold.jpg,data/rose.gif*/ // noof squares in both x and y direction final int dimension=16; // size of one square int squareSize; // all squares Square[][] squares; // images we need PImage hunter; // the hunting pirate PImage happyhunter; // the pirate when he has found the gold PImage gold; // the treasure PImage rose; // where the hunter start PVector startPosition; // where he walks Path path; // where the gold is PVector goldPosition; void setup(){ size(500,500); squareSize=width/dimension; // load images hunter=loadImage("data/hunter.jpg"); happyhunter=loadImage("data/happyhunter.jpg"); gold=loadImage("data/gold.jpg"); rose=loadImage("data/rose.jpg"); imageMode(CENTER); // set up suares squares=new Square[dimension][dimension]; for(int rad=0;rad < dimension;rad++) for(int kol=0;kol < dimension;kol++) squares[rad][kol]=new Square(squareSize,kol,rad); // produce a map setupMap(); // reasonable for walking frameRate(2); } void draw(){ background(255); // clear path and hunter for(int rad=0;rad < dimension;rad++) for(int kol=0;kol < dimension;kol++){ // clear traces of path if(squares[rad][kol].getMark()==Square.TRACE || squares[rad][kol].getMark()==Square.HUNTER){ squares[rad][kol].setMark(Square.FREE); } } // reset startpos for hunter and gold squares[int(startPosition.x)][int(startPosition.y)].setMark(Square.HUNTER); squares[int(goldPosition.x)][int(goldPosition.y)].setMark(Square.GOLD); // do the path if(path!=null){ path.walk(); } // draw colpete board for(int rad=0;rad < dimension;rad++) for(int kol=0;kol < dimension;kol++){ squares[rad][kol].draw(); } // draw the compasrose image(rose,squareSize*2,squareSize*2,4*squareSize-3,4*squareSize-3); } //---------------------------------- // called from webpage // a new path void setPath(String ps){ path =new Path(startPosition,ps); } // a new map void setupMap(){ // clear everything path=null; for(int rad=0;rad < dimension;rad++) for(int kol=0;kol < dimension;kol++) squares[rad][kol].setMark(Square.FREE); // mark place for compass (top-left 2x2) for(int r=0;r <4;r++) for(int k=0;k<4; k++) squares[r][k].setMark(Square.ROSE); // set up some rndom walls for(int ix=0;ix < 2*dimension;ix++){ int x=int(random(0,dimension)); int y=int(random(0,dimension)); if(squares[x][y].getMark()==Square.FREE) squares[x][y].setMark(Square.WALL); } // place the treasure boolean ok=false; while(!ok){ int x=int(random(0,dimension)); int y=int(random(0,dimension)); if(squares[x][y].getMark()==Square.FREE){ squares[x][y].setMark(Square.GOLD); goldPosition=new PVector(x,y); ok=true; } } // place the pirate (hunter) ok=false; while(!ok){ int x=int(random(0,dimension)); int y=int(random(0,dimension)); if(squares[x][y].getMark()==Square.FREE){ squares[x][y].setMark(Square.HUNTER); startPosition=new PVector(x,y); ok=true; } } }
og
_Path.pde
class Path{ // text coded path n6,v7,.... String pathString; // where we start the walk PVector startPos; // steps ArrayList<PVector> path; // steps to perform in a walk , at a frame int stepsToPerform; // should we (continue) to play sounds boolean performSound; Path(PVector startPos,String pathString){ this.pathString=pathString; this.startPos=startPos; stepsToPerform=0; performSound=true; // produce path String[] moves=pathString.split(","); // set up path // the moves are saved( not new position) path=new ArrayList(); for(int ix=0;ix < moves.length; ix++){ String m=moves[ix].trim(); int value=int(m.substring(1).trim()); String direction=m.substring(0,1).toLowerCase(); if(direction.equals("n")){ for(int i=0;i<value;i++)path.add(new PVector(-1,0)); } else if(direction.equals("s")){ for(int i=0;i<value;i++)path.add(new PVector(1,0)); } else if(direction.equals("v")){ for(int i=0;i<value;i++)path.add(new PVector(0,-1)); } else if(direction.equals("ø")){ for(int i=0;i<value;i++)path.add(new PVector(0,1)); } else{ ;//println("error in path"); } } } void walk(){ // start at start PVector current=startPos.get(); // walk the number of steps we are ordered to for(int ix=0;ix<stepsToPerform;ix++){ current.add( path.get(ix) ); // out of map, set hunter back if(current.x <0 || current.x >= dimension || current.y < 0 || current.y >= dimension){ squares[(int)startPos.x][(int)startPos.y].setMark(Square.HUNTER); doSound(Square.WALL); performSound=false; return; } // stopped by a wall , leave hunter where he is int squareMark=squares[(int)current.x][(int)current.y].getMark(); if(squareMark == Square.WALL || squareMark==Square.ROSE){ doSound(Square.WALL); performSound=false; return; } // hit the gold ? if(squareMark==Square.GOLD){ squares[(int)current.x][(int)current.y].setMark(Square.HAPPY_HUNTER); doSound(Square.GOLD); performSound=false; return; } // we have neither walked off map, hit the rose or a wall // nor have we struck gold // We have walked as long as we wanted if(ix==stepsToPerform-1){ squares[(int)current.x][(int)current.y].setMark(Square.HUNTER); doSound(Square.TRACE); if(stepsToPerform >= path.size()) performSound=false; } else{ squares[(int)current.x][(int)current.y].setMark(Square.TRACE); doSound(Square.TRACE); } } // prepare for next walk if(stepsToPerform < path.size()) { stepsToPerform++; } } void doSound(int sid){ String tid=""; switch (sid){ case Square.TRACE:tid="step"; break; case Square.GOLD:tid="gold"; break; default:tid="wall"; } if(performSound){ //println(tid); playSound(tid); } } }
og
_Square.pde
class Square{ final static int FREE=0; final static int WALL=1; final static int TRACE=2; final static int GOLD=3; final static int HUNTER=4; final static int HAPPY_HUNTER=5; final static int STARTER=6; final static int ROSE=7; final static int STOPPED=8; int size; int xIndex; int yIndex; int mark; PVector pos; Square(int size, int xIndex, int yIndex){ this.size=size; this.xIndex=xIndex; this.yIndex=yIndex; mark=FREE; pos=new PVector(xIndex*size,yIndex*size); } void draw(){ fill(255); rect(pos.x,pos.y,size,size); stroke(200); switch(mark){ case FREE: break; case WALL: fill(100,100,255); rect(pos.x,pos.y,size,size); break; case TRACE: fill(255,0,0); ellipse(pos.x+size/2,pos.y+size/2,size/3,size/3); break; case GOLD: image(gold, pos.x+size/2,pos.y+size/2,size-4,size-4); break; case HUNTER: image(hunter,pos.x+size/2,pos.y+size/2,size-4,size-4); break; case HAPPY_HUNTER:image(happyhunter,pos.x+size/2,pos.y+size/2,size-4,size-4); break; case ROSE: ;break; default: fill(125);rect(pos.x,pos.y,size,size); } } boolean isInside(int x, int y){ return x > pos.x && x < pos.x+size && y >pos.y && y< pos.y+size; } void setMark(int m){ mark=m; //println(""+xIndex+","+yIndex); } int getMark(){ return mark; } }
Javascriptet er enkelt:
_index.js
function setPath(){ var t=document.getElementById("plan").value; t=t.replace(/\n/g, ','); var pjs=Processing.getInstanceById("draw"); //alert(t); pjs.setPath(t); } function setMap(){ var pjs=Processing.getInstanceById("draw"); pjs.setupMap(); } function playSound(id){ document.getElementById(id).play(); }