? 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();
}