p5.js Web Editor | L.A.S.E.R. Pong

xxxxxxxxxx
let grid = [], 
    t1 = true, t2 = true, t3 = true, t4 = true,
    rot = false, 
    prevSegX = -1, prevSegY = -1, prevSegR = -1,
    lazerPath = [],
    Line, Ellipse, Triangle,
    screenFlipped = false,
    phase = -1;
​
const render = ()=>{
  //Segments and stuff
  for(let i = 0; i < grid.length; i ++){
    for(let j = 0; j < grid.length; j++){
      switch(grid[i][j]){
        case SEG_H:
          fill(0); stroke(0); strokeWeight(2);
          Line((i-1)*width/8,j*height/8,(i+1)*width/8,j*height/8);
          break;
        case SEG_EP_H:
          fill(0); stroke(0); strokeWeight(2);
          Ellipse(i*width/8,j*height/8,4,4);
          break;
        case SEG_V:
          fill(0); stroke(0); strokeWeight(2);
          Line(i*width/8,(j-1)*height/8,i*width/8,(j+1)*height/8);
          break;
        case SEG_EP_V:
          fill(0); stroke(0); strokeWeight(2);
          Ellipse(i*width/8,j*height/8,4,4);
          break;
        case SEG_VH:
          fill(0); stroke(0); strokeWeight(2);
          Line((i-1)*width/8,j*height/8,(i+1)*width/8,j*height/8);
          Line(i*width/8,(j-1)*height/8,i*width/8,(j+1)*height/8);
          break;
        case SEG_EP_LU:
          fill(0); stroke(0); strokeWeight(2);
          Ellipse(i*width/8,j*height/8,4,4);
          break;
        case SEG_EP_UR:
          fill(0); stroke(0); strokeWeight(2);
          ellipse(i*width/8,j*height/8,4,4);
          break;
        case SEG_EP_RD:
          fill(0); stroke(0); strokeWeight(2);
          Ellipse(i*width/8,j*height/8,4,4);
          break;
        case SEG_EP_DL:
          fill(0); stroke(0); strokeWeight(2);
          Ellipse(i*width/8,j*height/8,4,4);
          break;
        case SEG_UH:
          fill(0); stroke(0); strokeWeight(2);
          Line((i-1)*width/8,j*height/8,(i+1)*width/8,j*height/8);
          Line(i*width/8,j*height/8,i*width/8,(j-1)*height/8);
          break;
        case SEG_DH:
          fill(0); stroke(0); strokeWeight(2);
          Line((i-1)*width/8,j*height/8,(i+1)*width/8,j*height/8);
          Line(i*width/8,j*height/8,i*width/8,(j+1)*height/8);
          break;
        case SEG_VL:
          fill(0); stroke(0); strokeWeight(2);
          Line(i*width/8,(j-1)*height/8,i*width/8,(j+1)*height/8);
          Line(i*width/8,j*height/8,(i-1)*width/8,j*height/8);
          break;
        case SEG_VR:
          fill(0); stroke(0); strokeWeight(2);
          Line(i*width/8,(j-1)*height/8,i*width/8,(j+1)*height/8);
          Line(i*width/8,j*height/8,(i+1)*width/8,j*height/8);
          break;
        default:
          fill(200); stroke(200); strokeWeight(1);
            Ellipse(i*width/8,j*height/8,4,4);
          break;
        }
    }
  }
  //Lazer Path (if it is being drawn)
  if(lazerPath.length !== 0){
    fill(255,0,0); stroke(255,0,0); strokeWeight(1);
    lazerPath.forEach((e,i)=>{
      if(i === 0) return;
      let x = e[0][0];
      let y = e[0][1];
      let x0 = lazerPath[i-1][0][0];
      let y0 = lazerPath[i-1][0][1];
      Line(x0*width/8,y0*height/8,x*width/8,y*height/8);
      Ellipse(x*width/8,y*height/8,4,4);
    });
  }
  //L.A.S.E.R. pointer
  fill(255,25,25); stroke(225,25,25); strokeWeight(2);
  Triangle(0,0,width/8,0,0,height/8);
  //Players
  ///1 - Black
  fill(0); stroke(0); strokeWeight(0.5);
  Ellipse(width/16,15*height/16,width/16,height/16);
  ///2 - White
  fill(255); stroke(0); strokeWeight(0.5);
  Ellipse(15*width/16,height/16,width/16,height/16);
  //Triangles
  fill(250); stroke(0); strokeWeight(1);
  if(t1) Triangle(width/2,height/2,width/2,3*height/8,3*width/8,height/2); // /|
  if(t2) Triangle(width/2,height/2,width/2,3*height/8,5*width/8,height/2); // |\
  if(t3) Triangle(width/2,height/2,width/2,5*height/8,5*width/8,height/2); // |/
  if(t4) Triangle(width/2,height/2,width/2,5*height/8,3*width/8,height/2); // \|
  //Preview segment
  
  fill(0,0,0,100); stroke(0,0,0,100); strokeWeight(1);
  if(prevSegX === -1){
    const mx = round(8*mouseX/width), my = round(8*mouseY/width);
    if(!rot){
        line((mx-1)*width/8,my*height/8,(mx+1)*width/8,my*height/8);
        ellipse((mx-1)*width/8,my*height/8,4,4); ellipse((mx+1)*width/8,my*height/8,4,4);
    }else{
        line(mx*width/8,(my-1)*height/8,mx*width/8,(my+1)*height/8);
        ellipse(mx*width/8,(my-1)*height/8,4,4); ellipse(mx*width/8,(my+1)*height/8,4,4);
    }
  }else{
    if(!prevSegR){
        Line((prevSegX-1)*width/8,prevSegY*height/8,(prevSegX+1)*width/8,prevSegY*height/8);
        Ellipse((prevSegX-1)*width/8,prevSegY*height/8,4,4); Ellipse((prevSegX+1)*width/8,prevSegY*height/8,4,4);
    }else{
        Line(prevSegX*width/8,(prevSegY-1)*height/8,prevSegX*width/8,(prevSegY+1)*height/8);
        Ellipse(prevSegX*width/8,(prevSegY-1)*height/8,4,4); Ellipse(prevSegX*width/8,(prevSegY+1)*height/8,4,4);
    }
  }
},
placeSegment = (x,y)=>{
  if(x < 1 || x > 7 || y < 1 || y > 7) return;
  const temp = grid.slice().map(x=>x.slice());
  if(!rot){
    if(grid[x][y] === "" || grid[x][y] === SEG_EP_H) temp[x][y] = SEG_H;
    else if(grid[x][y].split("")[0] === "1" && grid[x][y].split("")[1] === "1") temp[x][y] = SEG_VH;
    else if(grid[x][y].split("")[0] === "1") temp[x][y] = SEG_UH;
    else if(grid[x][y].split("")[1] === "1") temp[x][y] = SEG_DH;
    else if(grid[x][y] === SEG_EP_V){
      if(grid[x][y-1].split("")[1] === "1") temp[x][y] = SEG_UH;
      if(grid[x][y+1].split("")[0] === "1") temp[x][y] = SEG_DH;
    }
    
    if(grid[x-1][y] === "") temp[x-1][y] = SEG_EP_H;
    else if(grid[x-1][y] === SEG_EP_H && grid[max(0,x-2)][y] === SEG_H) temp[x-1][y] = SEG_H;
    else if(grid[x-1][y] === SEG_VL) temp[x-1][y] = SEG_VH;
    else if(grid[x-1][y] === SEG_EP_V){
      if(grid[x-1][y-1].split("")[1] === "1") temp[x-1][y] = SEG_EP_UR;
      if(grid[x-1][y+1].split("")[0] === "1") temp[x-1][y] = SEG_EP_RD;
    }else if(grid[x-1][y] === SEG_V) temp[x-1][y] = SEG_VR;
    
    if(grid[x+1][y] === "") temp[x+1][y] = SEG_EP_H;
    else if(grid[x+1][y] === SEG_EP_H && grid[min(8,x+2)][y] === SEG_H) temp[x+1][y] = SEG_H;
    else if(grid[x+1][y] === SEG_VR) temp[x+1][y] = SEG_VH;
    else if(grid[x+1][y] === SEG_EP_V){
      if(grid[x+1][y-1].split("")[1] === "1") temp[x+1][y] = SEG_EP_LU;
      if(grid[x+1][y+1].split("")[0] === "1") temp[x+1][y] = SEG_EP_DL;
    }else if(grid[x+1][y] === SEG_V) temp[x+1][y] = SEG_VL;
  }else{
    if(grid[x][y] === "" || grid[x][y] === SEG_EP_V) temp[x][y] = SEG_V;
    else if(grid[x][y].split("")[2] === "1" && grid[x][y].split("")[3] === "1") temp[x][y] = SEG_VH;
    else if(grid[x][y].split("")[2] === "1") temp[x][y] = SEG_VL;
    else if(grid[x][y].split("")[3] === "1") temp[x][y] = SEG_VR;
    else if(grid[x][y] === SEG_EP_H){
      if(grid[x-1][y].split("")[3] === "1") temp[x][y] = SEG_VL;
      if(grid[x+1][y].split("")[2] === "1") temp[x][y] = SEG_VR;
    }
    
    if(grid[x][y-1] === "") temp[x][y-1] = SEG_EP_V;
    else if(grid[x][y-1] === SEG_EP_V && grid[x][max(0,y-2)] === SEG_V) temp[x][y-1] = SEG_V;
    else if(grid[x][y-1] === SEG_UH) temp[x][y-1] = SEG_VH;
    else if(grid[x][y-1] === SEG_EP_H){
      if(grid[x-1][y-1].split("")[3] === "1") temp[x][y-1] = SEG_EP_DL;
      if(grid[x+1][y-1].split("")[2] === "1") temp[x][y-1] = SEG_EP_RD;
    }else if(grid[x][y-1] === SEG_H) temp[x][y-1] = SEG_DH;
    
    if(grid[x][y+1] === "") temp[x][y+1] = SEG_EP_V;
    else if(grid[x][y+1] === SEG_EP_V && grid[x][min(8,y+2)] === SEG_V) temp[x][y+1] = SEG_V;
    else if(grid[x][y+1] === SEG_DH) temp[x][y+1] = SEG_VH;
    else if(grid[x][y+1] === SEG_EP_H){
      if(grid[x-1][y+1].split("")[3] === "1") temp[x][y+1] = SEG_EP_LU;
      if(grid[x+1][y+1].split("")[2] === "1") temp[x][y+1] = SEG_EP_UR;
    }else if(grid[x][y+1] === SEG_H) temp[x][y+1] = SEG_UH;
    
  }
  grid = temp.slice().map(x=>x.slice());
},
arrEq = (a,b)=>{
  return a.every((e,i)=>(e===b[i]));
},
bounceLazer = ()=>{
  let pos = [0,0];
  let dir = [1,1];
  lazerPath = [];
  let first = true;
  while(true){
    let infLoop = false;
    lazerPath.forEach(x=>{
      if(arrEq(x[0],pos) && arrEq(x[1],dir)) infLoop = true;
    });
    if(infLoop) break;
    //if(lazerPath.length > 100) break; //Failsafe (not needed anymore)
    lazerPath.push([pos.slice(),dir.slice()]);
    if(!first){
      if(pos[0] === 4 && pos[1] === 4){
        if(dir[0] === 1){
          if(dir[1] === 1){
            if(t1){
              t1 = false; break;
            }else if(t3){
              t3 = false; break;
            }
          }else{
            if(t4){
              t4 = false; break;
            }else if(t2){
              t2 = false; break;
            }
          }
        }else{
          if(dir[1] === 1){
            if(t2){
              t2 = false; break;
            }else if(t4){
              t4 = false; break;
            }
          }else{
            if(t3){
              t3 = false; break;
            }else if(t1){
              t1 = false; break;
            }
          }
        }
      }
        let seg = grid[pos[0]][pos[1]];
      //If segment is H,V,VH,UH,DH,VL,VR
      if(seg.split("")[2] === "1" && seg.split("")[3] === "1"){
                if((seg.split("")[1] === "1" && dir[1] === -1) || (seg.split("")[0] === "1" && dir[1] === 1)) dir[0] = -dir[0];
        dir[1] = -dir[1];
      }else if(seg.split("")[0] === "1" && seg.split("")[1] === "1"){
        if((seg.split("")[3] === "1" && dir[0] === -1) || (seg.split("")[2] === "1" && dir[1] === 1)) dir[1] = -dir[1];
        dir[0] = -dir[0];
        //EP_H, EP_V
      }else if(seg === SEG_EP_H){
        if(dir[0] === 1){ // ._ or _.
          if(grid[pos[0]-1][pos[1]].split("")[3] === "1") dir[1] = -dir[1]; //_. R
            if(grid[pos[0]+1][pos[1]].split("")[2] === "1") dir[0] = -dir[0]; //._ R
        }else{
          if(grid[pos[0]-1][pos[1]].split("")[3] === "1") dir[0] = -dir[0]; //_. L
            if(grid[pos[0]+1][pos[1]].split("")[2] === "1") dir[1] = -dir[1]; //._ L
        }
      }else if(seg === SEG_EP_V){
        if(dir[1] === 1){
                if(grid[pos[0]][pos[1]-1].split("")[1] === "1") dir[0] = -dir[0]; // ! D
            if(grid[pos[0]][pos[1]+1].split("")[0] === "1") dir[1] = -dir[1]; // ^| D
        }else{
            if(grid[pos[0]][pos[1]-1].split("")[1] === "1") dir[1] = -dir[1]; // ! U
          if(grid[pos[0]][pos[1]+1].split("")[0] === "1") dir[0] = -dir[0]; // ^| U
        }
      //EP_LU, EP_UR, EP_RD, EP_DL
      }else{
        switch(seg){
          case SEG_EP_LU:
            if(dir[0] === dir[1]) dir = dir.map(x=>-x);
            else if(dir[0] === 1) dir[1] = 1;
            else dir[0] = 1;
            break;
          case SEG_EP_UR:
            if(dir[0] !== dir[1]) dir = dir.map(x=>-x);
            else if(dir[0] === 1) dir[0] = -1;
            else dir[1] = 1;
            break;
          case SEG_EP_RD:
            if(dir[0] === dir[1]) dir = dir.map(x=>-x);
            else if(dir[0] === 1) dir[0] = -1;
            else dir[1] = -1;
            break;
          case SEG_EP_DL:
            if(dir[0] !== dir[1]) dir = dir.map(x=>-x);
            else if(dir[0] === 1) dir[1] = -1;
            else dir[0] = 1;
            break;
        }
      }
    if(pos[0] === 0 && pos[1] === 8){
      //Black loses
      phase = 7; phaseChange();
      break;
    }else if(pos[0] === 8 && pos[1] === 0){
        //White loses
      phase = 8; phaseChange();
      break;
    }
    }else first = false;
    let npos = pos.map((x,y)=>x+dir[y]);
    pos = npos.slice();
  }
},
      //Segment Constants
      
            SEG_H = "00110",      // ___
            SEG_EP_H = "00001",   // . .
      
            SEG_V = "11000",      //  |
            SEG_EP_V = "00001_1", //  :
      
            SEG_EP_LU = "10101",  // _|
      SEG_EP_UR = "10011",  //  |_
      SEG_EP_RD = "01011",  //  |^
      SEG_EP_DL = "01101",  // ^| 
      
      SEG_UH = "10110",     // _|_
      SEG_DH = "01110",     // ^|^
      SEG_VL = "11100",     // -|
      SEG_VR = "11010",     //  |-
​
            SEG_VH = "11110",     // -|-
      
clearGrid = ()=>{
  for(let i = 0; i < 9; i++){
    grid[i] = [];
    for(let j = 0; j < 9; j++){
      if(i === 0 || i === 8) grid[i][j] = SEG_V;
        else if(j === 0 || j === 8) grid[i][j] = SEG_H;
        else grid[i][j] = "";
        }
    }
  grid[0][0] = SEG_EP_RD;
  grid[0][8] = SEG_EP_UR;
  grid[8][8] = SEG_EP_LU;
  grid[8][0] = SEG_EP_DL;
},
placeRandom = ()=>{
  let x = floor(random(1,8));
  let y = floor(random(1,8));
  let temp = rot;
  rot = floor(random(2));
  placeSegment(x,y);
  rot = temp;
},
flipScreen = ()=>{
  if(screenFlipped){
    Line = (x1,y1,x2,y2)=>{
        line(x1,y1,x2,y2);
    };
    Ellipse = (x,y,r1,r2)=>{
        ellipse(x,y,r1,r2);
    };
    Triangle = (x1,y1,x2,y2,x3,y3)=>{
        triangle(x1,y1,x2,y2,x3,y3);
    };
  }else{
    Line = (y1,x1,y2,x2)=>{
        line(x1,y1,x2,y2);
    };
    Ellipse = (y,x,r1,r2)=>{
        ellipse(x,y,r1,r2);
    };
    Triangle = (y1,x1,y2,x2,y3,x3)=>{
        triangle(x1,y1,x2,y2,x3,y3);
    };
  }screenFlipped = !screenFlipped;
  //if(phase === 1 || phase === 4){
    //prevSegR = !prevSegR;
    //prevSegX = [prevSegY, prevSegY = prevSegX][0];
  //}
},
phaseChange = ()=>{
    if(phase === -1){
    lazerPath = [];
        document.getElementById("cont").innerHTML = "<button onclick=\"phase++;phaseChange();\">Start game!</button>";
    }else if(phase === 0){
    lazerPath = [];
    document.getElementById("cont").innerHTML = "Click to place a segment.<br>Use the mouse wheel to rotate.";
  }else if(phase === 1){
    document.getElementById("cont").innerHTML = "Confirm move.<br><button onclick=\"phase++;phaseChange();\">Yes</button><button onclick=\"phase = 0;prevSegX = -1;phaseChange();\">No</button>";
  }else if(phase === 2){
    let temp = rot;
    rot = prevSegR;
    placeSegment(prevSegX,prevSegY);
    prevSegX = -1;
    rot = temp;
    document.getElementById("cont").innerHTML = "Wait for your opponent to finish.<br><button onclick=\"phase++;phaseChange();\">Next</button>";
  }else if(phase === 3){
    document.getElementById("cont").innerHTML = "Share screens with your opponent.<br>Place your opponent's segment.<br>Use the mouse wheel to rotate.";
  }else if(phase === 4){
    document.getElementById("cont").innerHTML = "Confirm opponent's move.<br><button onclick=\"phase++;phaseChange();\">Yes</button><button onclick=\"phase = 0;prevSegX = -1;phaseChange();\">No</button>";
  }else if(phase === 5){
    let temp = rot;
    rot = prevSegR;
    placeSegment(prevSegX,prevSegY);
    prevSegX = -1;
    rot = temp;
    document.getElementById("cont").innerHTML = "<button onclick=\"bounceLazer();phase++;phaseChange();\">Fire the lazer!</button>";
  }else if(phase === 6){
    document.getElementById("cont").innerHTML = "<button onclick=\"phase = 0;phaseChange();\">Continue (clears the lazer)</button>";
  }else if(phase === 7){
    document.getElementById("cont").innerHTML = "Black loses! Black wins!";
  }else if(phase === 8){
    document.getElementById("cont").innerHTML = "White loses! Black wins!"
  }
};
​
function setup(){
  createCanvas(486,486);
    clearGrid();
  Line = (x1,y1,x2,y2)=>{
    line(x1,y1,x2,y2);
  };
  Ellipse = (x,y,r1,r2)=>{
    ellipse(x,y,r1,r2);
  };
  Triangle = (x1,y1,x2,y2,x3,y3)=>{
    triangle(x1,y1,x2,y2,x3,y3);
  };
  phaseChange();
}
function draw(){
  background(220);
  render();
}
function mouseWheel(){
  if(phase === 0 || phase === 3){
    rot = !rot;
    return false;
  }
}
​
function mousePressed(){
  if(mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) return;
  if(phase === 0 || phase === 3){
    const mx = round(8*mouseX/width), my = round(8*mouseY/height);
    prevSegX = mx;
    prevSegY = my;
    prevSegR = rot;
    if(screenFlipped){
      prevSegR = !prevSegR;
      prevSegX = [prevSegY, prevSegY = prevSegX][0];
    }
    phase++; phaseChange();
  }
}
Cookies

Sketch Files

Console

Preview
