p5.js Web Editor | Quantum Zelda

xxxxxxxxxx
const roomW = 240
const roomH = 160
const scale = 2
​
const tileSize = 16 * scale
const tileW = 12
const tileH = 7
const fr = 20
const stepSize = ( 60 / fr ) * scale
​
const margin = 24 * scale
const hitBoxMargin = 4 * scale
​
let link = null
const gates = []
const tiles = []
const obstacles = []
​
let bg1 = null
let bg2 = null
const tiles1 = {}
const tiles2 = {}
const linkSprites = {}
​
let superPos = false
let inSuperPos = true
​
let canvas = null;
​
function preload(){
  bg1 = loadImage('img/bg_1.jpg');
  bg2 = loadImage('img/bg_2.jpg');
  
  tiles1.floor = loadImage('img/tile_1_floor.jpg')
  tiles1.obstacle = loadImage('img/tile_1_obstacle.jpg')
  tiles1.switch = loadImage('img/tile_1_switch.jpg')
  tiles1.switchAct = loadImage('img/tile_1_switch_act.jpg')
  tiles1.stairs = loadImage('img/tile_1_stairs.jpg')
​
  
  tiles2.floor = loadImage('img/tile_2_floor.jpg')
  tiles2.obstacle = loadImage('img/tile_2_obstacle.jpg')
  tiles2.switch = loadImage('img/tile_2_switch.jpg')
  tiles2.switchAct = loadImage('img/tile_2_switch_act.jpg')
  tiles2.stairs = loadImage('img/tile_2_stairs.jpg')
  
  linkSprites.up1 = loadImage('img/link_up_1.png')
  linkSprites.up2 = loadImage('img/link_up_2.png')
  linkSprites.down1 = loadImage('img/link_down_1.png')
  linkSprites.down2 = loadImage('img/link_down_2.png')
  linkSprites.right1 = loadImage('img/link_right_1.png')
  linkSprites.right2 = loadImage('img/link_right_2.png')
  linkSprites.left1 = loadImage('img/link_left_1.png')
  linkSprites.left2 = loadImage('img/link_left_2.png')
}
​
function setup() {
  canvas = createCanvas(roomW*scale, roomH*scale);
  frameRate(fr)
  
  link = new Link()
  
  gates.push( 
    // room 1
    new Gate(2,3,"H", true),
    new Gate(4,6,"M", true),
    
    // room 2
    new Gate(6,2,"M", false),
    new Gate(11,2,"H", false),
  )
  
  tiles.push(
    // room 1
    new Tile(4,3,"floor", true),
    new Tile(4,4,"floor", true),
    new Tile(4,5,"floor", true),
    new Tile(5,3,"floor", true),
    new Tile(5,4,"floor", true),
    new Tile(5,5,"floor", true),
    new Tile(5,6,"floor", true),
    new Tile(6,5,"floor", true),
    new Tile(3,4,"floor", true),
    
    new Tile(10,4,"obstacle", true),
    new Tile(10,3,"obstacle", true),
    new Tile(10,2,"obstacle", true),
    new Tile(10,1,"obstacle", true),
    new Tile(10,0,"obstacle", true),
    
    new Tile(11,0,"stairs", true),
    
    // room 2
    new Tile(8,2,"floor", false),
    new Tile(8,1,"floor", false),
    new Tile(8,3,"floor", false),
    new Tile(9,3,"floor", false),
    new Tile(9,4,"floor", false),
    new Tile(9,0,"floor", false),
    new Tile(9,1,"floor", false),
    new Tile(10,3,"floor", false),
    new Tile(7,2,"floor", false),
    
    new Tile(0,4,"obstacle", false),
    new Tile(1,4,"obstacle", false),
    new Tile(2,4,"obstacle", false),
    new Tile(3,4,"obstacle", false),
    new Tile(4,4,"obstacle", false),
    new Tile(5,4,"obstacle", false),
    new Tile(6,4,"obstacle", false),
    new Tile(7,4,"obstacle", false),
    new Tile(8,4,"obstacle", false),
    new Tile(9,4,"obstacle", false),
    
    new Tile(1,0,"obstacle", false),
    new Tile(1,1,"obstacle", false),
    new Tile(11,1,"obstacle", false),
    
    new Tile(0,0,"stairs", false),
  )
  
  tiles.forEach( t => {
    
    if( t.type === "obstacle" ){
      obstacles.push({
        x: t.x,
        y: t.y,
        sp: t.superposition
      })
    }
    
  } )
  
  noSmooth()
  textAlign(CENTER, CENTER)
  textSize(14)
}
​
function draw() {
​
  if( inSuperPos ) {
    superPos = !superPos
  }
  
  if( superPos ){
    image(bg1, 0,0, width, height  )
  }else{
    image(bg2, 0,0, width, height  )
  }
  
  for( let w = 0; w < tileW; w++ ){
    for( let h = 0; h < tileH; h++ ){
      noFill()
      rect( margin + w * tileSize, margin + h * tileSize, tileSize, tileSize )
    }
  }
​
  tiles.forEach( t => {
    t.draw()
  } )
  
  gates.forEach( g => {
    g.draw()
  } )
​
  link.draw()
  
}
​
class Link{
  constructor(){
    this.x = 0
    this.y = 0
    
    this.dir = 'down'
    this.step = false
    this.newStep = false
    this.currentSprite = linkSprites.down1
    this.isFlip = false
  }
  draw(){
    
    if( keyIsPressed ){
      this.move()
    }
    if( this.newStep ){
      this.step = !this.step
      this.isFlip = false
      switch( this.dir ){
        case 'down':
          if(this.step){
            this.currentSprite = linkSprites.down1
          }else{
            this.currentSprite = linkSprites.down2
          }
          break;
        case 'right':
          if(this.step){
            this.currentSprite = linkSprites.right1
          }else{
            this.currentSprite = linkSprites.right2
          }
          break;
        case 'up':
          if(this.step){
            this.currentSprite = linkSprites.up1
          }else{
            this.currentSprite = linkSprites.up2
          }
          break;
        case 'left':
          if(this.step){
            this.currentSprite = linkSprites.left1
          }else{
            this.currentSprite = linkSprites.left2
          }
          break;
      }
    }
    
    push() 
    image(this.currentSprite, margin + this.x , margin + this.y, tileSize, tileSize  )
    pop()
​
    this.newStep = false
  }
  
  move(){
    this.newStep = true
    let isOk = true
    switch( keyCode ){
      case DOWN_ARROW:
        this.dir = "down"
        if( this.checkObstacles( this.dir ) ){
          this.y += stepSize
          if( this.y >= (tileH-1) * tileSize ){
            this.y = (tileH-1) * tileSize
          }
        }
        break;
      case UP_ARROW:
        this.dir = "up"
        if( this.checkObstacles( this.dir ) ){
          this.y -= stepSize
          if( this.y <= 0 ){
            this.y = 0
          }
        }
        break;
      case LEFT_ARROW:
        this.dir = "left"
        if( this.checkObstacles( this.dir ) ){
          this.x -= stepSize
          if( this.x <= 0 ){
            this.x = 0
          }
        }
        break;
      case RIGHT_ARROW:
        this.dir = "right"
        if( this.checkObstacles( this.dir ) ){
          this.x += stepSize
          if( this.x >= (tileW-1) * tileSize ){
            this.x = (tileW-1) * tileSize
          }
        }
        break;
        
      default:
        this.newStep = false
        break;
    }
  }
  
  checkObstacles( dir ) {
    
    let IsAllowedToMove = true
    
    let filteredObstactles = obstacles
    if( !inSuperPos ){
      filteredObstactles = obstacles.filter( o => o.sp === superPos )
    }
    
    const linkP = {
      left : margin + link.x,
      right : margin + link.x + tileSize,
      top: margin + link.y,
      bottom: margin + link.y + tileSize,
    }
        
    filteredObstactles.forEach( o => {
      
      if( IsAllowedToMove ){
        switch( dir ){
          case "down":
            
            if( linkP.right > o.x && linkP.left < (o.x+tileSize) ){
              if( linkP.bottom <= o.y ){
                if( linkP.bottom + stepSize >= o.y ){
                  IsAllowedToMove = false
                }
              }
            }
            
            break;
          case "up":
            
            if( linkP.right > o.x && linkP.left < (o.x+tileSize) ){
              if( linkP.top >= o.y+tileSize ){
                if( linkP.top - stepSize <= o.y + tileSize ){
                  IsAllowedToMove = false
                }
              }
            }
            
            break;
          case "left":
            
            if( linkP.bottom > o.y && linkP.top < (o.y+tileSize) ){
              if( linkP.left >= o.x+tileSize ){
                if( linkP.left - stepSize <= o.x + tileSize ){
                  IsAllowedToMove = false
                }
              }
            }
            
            break;
          case "right":
            
            if( linkP.bottom > o.y && linkP.top < (o.y+tileSize) ){
              if( linkP.right <= o.x ){
                if( linkP.right + stepSize >= o.x ){
                  IsAllowedToMove = false
                }
              }
            }
            
            break;
        }
      }
      
    }) 
    
    return IsAllowedToMove
  }
}
​
class Tile{
  constructor( posX = 1, posY = 1, type = "obstacle", sp = true ){
    this.x = margin + posX * tileSize
    this.y = margin + posY * tileSize
    this.type = type
    this.superposition = sp    
    this.tiles = sp ? tiles1 : tiles2
    this.image = this.tiles[type]
  }
  draw(){
    if( superPos === this.superposition ){
      image(this.image, this.x ,this.y, tileSize, tileSize  )
    }
  }
}
​
class Gate{
  constructor( posX = 2, posY = 3, type = "H", sp = true ){
    this.x = margin + posX * tileSize
    this.y = margin + posY * tileSize
    this.type = type
    this.superposition = sp
    
    this.tile = new Tile( posX, posY, "switchAct", sp )
  }
  draw(){
    
    // only draw it if it is in this position
    if( superPos === this.superposition ){
    
      push()
      this.tile.draw()
      fill("white")
      text( this.type, this.x +tileSize/2, this.y+tileSize/2);
      pop()
      
      this.checkCollision()
    }
  }
  
  checkCollision () {
    
    const linkP = {
      left : margin + link.x,
      right : margin + link.x + tileSize,
      top: margin + link.y,
      bottom: margin + link.y + tileSize,
    }
      
    if( linkP.right >= this.x + hitBoxMargin
     && linkP.left <= this.x + tileSize - hitBoxMargin ){
      if( linkP.bottom >= this.y + hitBoxMargin 
       && linkP.top <= this.y + tileSize - hitBoxMargin ){
        console.log("HIT", this.type, this.superposition)
        
        switch( this.type ){
          case 'M':
            inSuperPos = false
            superPos = this.superposition
            break;
          case 'H':
            inSuperPos = true
            break;
        }
      }
    }
  }
}
​
function keyPressed() {
  if (key == 's' || key == 'S') {
    saveCanvas(canvas, "quantum_zelda", 'jpg');
  }
}
Cookies

Sketch Files

Console

Preview
