Skip to content

Instantly share code, notes, and snippets.

@riston

riston/maze.js

Created April 23, 2017 15:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save riston/a2cca56f8201d7ae5b8912c7a1098332 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save riston/a2cca56f8201d7ae5b8912c7a1098332 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. riston created this gist Apr 23, 2017.
    176 changes: 176 additions & 0 deletions maze.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,176 @@

    const ACTORS = {
    N: 1,
    S: 2,
    E: 4,
    W: 8,
    SP: 16,
    EP: 32,
    }

    class Game {
    constructor(maze, size) {
    this.size = size;
    this.maze = maze;
    }

    createWalls(fields, width, height) {
    const wallsLen = Math.floor(Math.random() * (width * height));

    for (let x = 0; x < wallsLen; x++) {
    fields[Math.floor(x / width)][x % height] = 1;
    }
    return fields;
    }

    renderField({ two }) {
    const rectSize = 30;
    const lineWidth = 5;
    const rectSizeH2 = rectSize / 2;
    const [xOffset, yOffset] = [0,0];
    const fields = [];
    const maze = this.maze;
    const size = this.size;

    const makeLine = (x1, y1, x2, y2) => {
    let line = two.makeLine(x1, y1, x2, y2);
    line.stroke = "#FFF";
    line.cap = "butt";
    line.join = "butt";
    line.linewidth = 4;
    return line;
    };

    for (let i = 0; i < size * size; i++) {
    let x = i % size;
    let y = Math.floor(i / size);
    let block = [];

    let rect = two.makeRectangle(x * rectSize, y * rectSize, rectSize, rectSize);
    rect.linewidth = 4;

    block.push(rect);

    if (maze[i] & ACTORS.N) {
    console.log("N");
    const x1 = x * rectSize - rectSizeH2 + 2;
    const y1 = y * rectSize - rectSizeH2;
    const x2 = x1 + rectSize - 4;
    const y2 = y1;

    let line = makeLine(x1, y1, x2, y2);
    block.push(line);
    }

    if (maze[i] & ACTORS.E) {
    console.log("E");
    const x1 = x * rectSize + rectSizeH2;
    const y1 = y * rectSize - rectSizeH2 + 2;
    const x2 = x1;
    const y2 = y1 + rectSize - 4;

    let line = makeLine(x1, y1, x2, y2);
    block.push(line);
    }

    if (maze[i] & ACTORS.S) {
    console.log("S");
    const x1 = x * rectSize - rectSizeH2 + 2;
    const y1 = y * rectSize + rectSizeH2;
    const x2 = x1 + rectSize - 4;
    const y2 = y1;

    let line = makeLine(x1, y1, x2, y2);
    block.push(line);
    }

    if (maze[i] & ACTORS.W) {
    console.log("W");
    const x1 = x * rectSize - rectSizeH2;
    const y1 = y * rectSize - rectSizeH2 + 2;
    const x2 = x1;
    const y2 = y1 + rectSize - 4;

    let line = makeLine(x1, y1, x2, y2);
    block.push(line);
    }

    if (maze[i] & ACTORS.SP) {
    let circle = two.makeCircle(x * rectSize, y * rectSize, 10);
    circle.fill = "#F44";
    circle.linewidth = 3;
    block.push(circle);
    }

    if (maze[i] & ACTORS.EP) {
    let rect = two.makeRectangle(x * rectSize, y * rectSize, 10, 10);
    rect.fill = "#4F4";
    rect.linewidth = 3;
    block.push(rect);
    }

    console.log(x, y);
    fields.push(two.makeGroup(block));
    }
    return two.makeGroup(fields);
    }

    moveActor(x, y) {

    }

    render({ two }) {
    const field = this.renderField({ two });

    // field.linewidth = 0.3;
    // field.stroke = "#000";
    field.translation.set(50, 50);
    }

    update() {
    // this.snake.update();
    }

    setSnakeDirection(x1, y) {
    // this.snake.direction = [x, y];
    }
    }

    var two = new Two({
    fullscreen: true,
    autostart: true,
    type: Two.Types.SVG,
    })
    .appendTo(document.body);

    var rect = two.makeRectangle(two.width / 2, two.height / 2, 50 ,50);

    // const field = [6, 12, 10, 3, 2, 3, 1, 5, 9];
    // const field = [4, 12, 12, 12, 10, 6, 10, 6, 10, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 5, 9, 5, 9];
    // const field = [4 ,12 ,12 ,12 ,12 ,12 ,12 ,12 ,12 ,10 ,2 ,6 ,10 ,6 ,10 ,6 ,10 ,6 ,10 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,5 ,9 ,5 ,9 ,5 ,9 ,5 ,9 ,5 ,9]
    // const field = [2 ,6 ,12 ,14 ,12 ,10 ,6 ,12 ,12 ,10 ,3 ,3 ,6 ,9 ,6 ,9 ,5 ,10 ,2 ,3 ,3 ,1 ,7 ,10 ,5 ,12 ,10 ,3 ,3 ,3 ,5 ,10 ,3 ,3 ,6 ,10 ,3 ,3 ,5 ,9 ,6 ,9 ,1 ,3 ,3 ,5 ,9 ,7 ,12 ,10 ,5 ,12 ,10 ,3 ,5 ,12 ,10 ,5 ,8 ,3 ,6 ,8 ,5 ,9 ,4 ,10 ,5 ,12 ,10 ,3 ,7 ,14 ,12 ,14 ,12 ,13 ,12 ,8 ,3 ,3 ,3 ,5 ,10 ,1 ,6 ,12 ,10 ,6 ,9 ,3 ,5 ,8 ,5 ,12 ,13 ,8 ,5 ,13 ,12 ,9];
    // const field = [2 ,6 ,12 ,12 ,10 ,6 ,12 ,10 ,6 ,10 ,5 ,9 ,4 ,10 ,5 ,9 ,6 ,9 ,1 ,3 ,6 ,12 ,12 ,11 ,6 ,10 ,3 ,6 ,14 ,11 ,7 ,10 ,2 ,5 ,9 ,3 ,3 ,3 ,3 ,3 ,1 ,3 ,7 ,12 ,12 ,9 ,3 ,3 ,3 ,1 ,6 ,9 ,5 ,10 ,2 ,6 ,9 ,1 ,5 ,10 ,7 ,10 ,6 ,13 ,9 ,5 ,12 ,12 ,10 ,3 ,3 ,3 ,5 ,10 ,6 ,10 ,6 ,12 ,9 ,3 ,3 ,3 ,4 ,9 ,3 ,5 ,9 ,6 ,10 ,3 ,1 ,5 ,12 ,12 ,13 ,12 ,12 ,9 ,5 ,9];
    const field = [20 ,10 ,6 ,14 ,12 ,10 ,4 ,12 ,12 ,10 ,6 ,9 ,3 ,5 ,10 ,5 ,10 ,6 ,12 ,9 ,5 ,10 ,1 ,6 ,9 ,2 ,3 ,5 ,12 ,10 ,2 ,5 ,10 ,3 ,6 ,11 ,3 ,6 ,12 ,11 ,7 ,10 ,5 ,9 ,1 ,3 ,3 ,5 ,10 ,3 ,3 ,7 ,12 ,12 ,12 ,9 ,5 ,10 ,3 ,3 ,3 ,3 ,6 ,12 ,12 ,12 ,10 ,3 ,3 ,3 ,3 ,3 ,3 ,4 ,14 ,8 ,3 ,3 ,3 ,3 ,3 ,3 ,3 ,6 ,11 ,6 ,9 ,3 ,3 ,3 ,1 ,5 ,45 ,9 ,1 ,5 ,12 ,13 ,9 ,1];
    const size = 10;
    const game = new Game(field, size);
    game.render({ two });

    document.addEventListener("keyup", e => {
    const { code } = e;
    if ("ArrowUp" === code) {
    game.moveActor(0, -1);
    } else if ("ArrowDown" === code) {
    game.moveActor(0, 1);
    } else if ("ArrowRight" === code) {
    game.moveActor(1, 0);
    } else if ("ArrowLeft" === code) {
    game.moveActor(-1, 0);
    }
    });

    two.bind("update", function (frameCount) {
    if (frameCount % 20 === 0) {
    game.update();
    }
    rect.rotation += 0.001;
    });