March 23rd - point and click

[jacopo]

point and click demo:

oop - click example.zip

(804.02 KiB) Downloaded 419 times

Code: Select all

var pkmaster;
var moving = false;

function preload() {
  // put preload code here
  pkmaster = new pksprite();
  pkmaster.loadSprite();
}


function setup() {
  // put setup code here
  createCanvas(400,400);
  frameRate(30);
}

function draw() {
  // put drawing code here
  background(255);
  pkmaster.draw();

}


class pksprite {

  constructor () {
    this.direction = 0;
    this.sprites = [];
    this.spriteCounter = 4;
    this.fc = 0;
    this.x = 100;
    this.y= 100;
  }

  loadSprite() {
    for (var i = 0 ; i < this.spriteCounter ; i++) {
      var str = '/assets/down/0'+i+'.png' ;
      console.log(str);
      this.sprites.push( loadImage(str) );
    }
  }

  draw() {
  var speed = 1;
  if(moving) { 
    this.fc++;
    if (destX > this.x) {
      this.x += speed;
    }
    if (destX < this.x) {
      this.x -= speed;
    }
    if (destY > this.y) {
      this.y += speed;
    }
    if (destY < this.y) {
      this.y -= speed;
    }
    if(destX == this.x && destY == this.y ) {
      moving = false;
    }
  } else {
      this.fc = 0;
  }
  image(this.sprites[floor(this.fc/2)%this.spriteCounter],this.x,this.y);
  } 

  
}

function mouseClicked() {
  if(mouseX > width/2) {
    destX = width/2 -34;
  }
  else {
    destX = mouseX-17;
  }

  destY = mouseY-25;
  moving = true;

}

[jacopo]

v2
----
2 types of interaction, overlap and single click
to move doubleclick

Code: Select all

var guard;
var bg;
var pin;

function preload() {
  // put preload code here
  guard = new mainGuy();
  guard.loadSprite();
  bg = loadImage('assets/bg.png');
  pin = new npc();
  pin.loadSprite();
  //pin.moving = true;
}


function setup() {
  // put setup code here
  createCanvas(400,400);
  frameRate(45);
}

function draw() {
  image(bg,0,0,width,height);
  // put drawing code here
  //background(0,255,0);

  guard.draw();
  pin.draw();
  pin.countDown(2);
  check_overlap();
}

class mainGuy {
  constructor () {
    this.direction = 0;
    this.sprites = [];
    this.spriteCounter = 4; // number of animation frames in the walk cycle
    this.fc = 0;
    this.x = 100;
    this.y= 400-70;
    this.destX=this.x;
    this.destY=this.y;
    this.speed = 3;
    this.moving = false;
  }

  loadSprite() {
    for (var i = 0 ; i < this.spriteCounter ; i++) {
      var str = '/assets/down/0'+i+'.png' ;
      console.log(str);
      this.sprites.push( loadImage(str) );
    }
  }

  move() {
    //speed is the amount of pixes the guy moves in one frame.
    // if speed>1 there is a danger of overshooting the target.
    // these first two if statements check if the distance 
    // between the current positon and the target is > of speed
    if(abs(guard.destX-this.x) < this.speed) {
      this.x = guard.destX;
    }
    if(abs(guard.destY-this.y) < this.speed) {
      this.y = guard.destY;
    }

    // check what direction to move in
    if (guard.destX > this.x) {
      this.x += this.speed;
      this.direction = 1;
    }
    if (guard.destX < this.x) {
      this.x -= this.speed;
      this.direction = -1;
    }
    if (guard.destY > this.y) {
      this.y += this.speed;
    }
    if (guard.destY < this.y) {
      this.y -= this.speed;
    }
    // if destination reached stop moving
    if(guard.destX == this.x && guard.destY == this.y ) {
      this.moving = false;
    }
  }

  draw() {
    if(this.moving) { 
      this.fc++;
      this.move()
    } else {
      this.fc = 0; // reset walk cycle animation when not moving
    }
    this.drawSprite();
  
  }   


  getCurrentSprite() {
    return this.sprites[floor(this.fc/2)%this.spriteCounter]
  }

  drawSprite() {

    if (this.direction != -1 ) {
      push();
      scale(-1, 1)
      translate(-1*guard.getCurrentSprite().width,0);// guard.getCurrentSprite().height/-2);
      image(this.getCurrentSprite(),-1*this.x,this.y);
      pop();
    } else {
      image(this.getCurrentSprite(),this.x,this.y);
    } 

  }

}
function doubleClicked() {
  if(mouseX > width) {
    guard.destX = width/2 -guard.getCurrentSprite().width;
  } else {
    guard.destX = mouseX-guard.getCurrentSprite().width/2;
  }

  if(mouseY < 350) {
    guard.destY = 350 -guard.getCurrentSprite().height;
  } else {
    guard.destY = mouseY-guard.getCurrentSprite().height/2;
  }
  guard.moving = true;
}


class npc {
  constructor () {
    this.direction = 0;
    this.sprites = [];
    this.spriteCounter = 4; // number of animation frames in the walk cycle
    this.fc = 0;
    this.x = 150;
    this.y = 400-70;
    this.destX = this.x;
    this.destY = this.y;
    this.speed = 3;
    this.moving = false;
    this.timer = 0;
  }

  setTimer() {
    this.moving = true;
    this.timer = new Date().getSeconds();
    console.log('start');
  }

  countDown(duration) {
    if (this.moving) {
      if (this.timer+duration < new Date().getSeconds() ) {
        this.moving = false;
        console.log('stop');
      }
    }
  }

  loadSprite() {
    for (var i = 0 ; i < this.spriteCounter ; i++) {
      var str = '/assets/pinwheel/pin_0'+i+'.png' ;
      console.log(str);
      this.sprites.push( loadImage(str) );
    }
  }

  move() {
    
  }

  draw() {
    if(this.moving) { 
      this.fc++;
      //this.move()
    } else {
      this.fc = 0; // reset walk cycle animation when not moving
    }
    this.drawSprite();
  
  }   

  getCurrentSprite() {
    return this.sprites[floor(this.fc/2)%this.spriteCounter];
  }

  drawSprite() {
      image(this.getCurrentSprite(),this.x,this.y);
  }

}

function check_overlap() {
  var checkleft = guard.x+guard.sprites[guard.fc%guard.spriteCounter].width > pin.x;
  var checkright = guard.x < pin.x+pin.sprites[guard.fc%guard.spriteCounter].width;

  if ( checkleft && checkright) {
    pin.moving = true;
  } else {
    pin.moving = false;
  }
}


function mouseClicked() {
  if (mouseX > pin.x && (mouseX < pin.x+pin.sprites[0].width)) {
    pin.setTimer();
  }
  
}

oop - click example 2.zip

(840.65 KiB) Downloaded 406 times