Canvas - Pacman-alike-playfield (work-in-progress)

canvas-pacman-alike-playfield-work-in-progress.markdown

Canvas - Pacman-alike-playfield (work-in-progress)

open your console, to see how the current position in the map is updated, when you accelerate with the cursor keys

A Pen by Raphael on CodePen.

License.

canvas-pacman-alike-playfield.markdown

Canvas - Pacman-alike-playfield

open your console, to see how the current position in the map is updated, when you accelerate with the cursor keys

A Pen by Raphael on CodePen.

License.

index.pug

canvas(width=300,height=300)
.btnWrap
  button.left='left'
  button.up='up'
  button.right='right'
  button.down='down'
  
.overlay
  p.text-2x.m-xs-b-lg='starting app ...'
  
div.info.button.text-2x.m-xs-b-lg(title="You can use the arrow keys, too")='Click here to see the map to get from left to top right!'
  br
  .innerText=''

script.babel

let move: Function;
let draw: Function;
let printMap: Function;

(function() {
  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");
  var size = 300;
  var fieldSize = size / 8;
  var playerPosition = { x: 0, y: 0 };

  const free = 0;
  const wall = 1;
  const player = 2;
  var level = [
    [2, 1, 1, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 1, 0],
    [0, 1, 0, 1, 0, 1, 0, 0],
    [0, 0, 0, 1, 0, 1, 0, 1],
    [1, 1, 1, 1, 0, 1, 0, 1],
    [1, 0, 0, 0, 0, 1, 0, 1],
    [1, 0, 1, 1, 1, 1, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1]
  ];

  let codes = [];
  codes[38] = "up";
  codes[40] = "down";
  codes[37] = "left";
  codes[39] = "right";

  var playerAt = playerPosition;

  draw = () => {
    ctx.fillStyle = "darkgray";
    ctx.fillRect(0, 0, size, size);
    ctx.fillStyle = "lightgreen";
    ctx.fillRect(
      playerPosition.x * fieldSize,
      playerPosition.y * fieldSize,
      fieldSize,
      fieldSize
    );

    printMap();
    return true;
  };
  let onKeyDown = e => {
    let code = codes[e.keyCode] != undefined
      ? codes[e.keyCode]
      : e.target.className;

    move(code) &&
      draw() &&
      setTimeout(() => {
        Array.from(document.querySelectorAll(".btnWrap button")).forEach(el =>
          el.classList.remove("active")
        );
        return true;
      }, 400) &&
      document.querySelector("." + code).classList.add("active");
    setTimeout(() => document.querySelector("." + code).blur(), 400);
  };

  Array.from(document.querySelectorAll("button")).forEach(el =>
    el.addEventListener("click", onKeyDown, false)
  );

  window.addEventListener("keydown", onKeyDown);
  move = direction => {
    var current = JSON.parse(JSON.stringify(playerPosition));

    var hasMoved = false;
    switch (direction) {
      case "up":
        if (
          playerPosition.y > 0 &&
          level[playerPosition.y - 1] &&
          level[playerPosition.y - 1][playerPosition.x] === free
        ) {
          --playerPosition.y;
          hasMoved = true;
        }
        break;
      case "down":
        if (
          playerPosition.y < level.length - 1 &&
          level[playerPosition.y + 1] &&
          level[playerPosition.y + 1][playerPosition.x] === free
        ) {
          ++playerPosition.y;
          hasMoved = true;
        }
        break;
      case "left":
        if (
          playerPosition.x > 0 &&
          level[playerPosition.y][playerPosition.x - 1] === free
        ) {
          --playerPosition.x;
          hasMoved = true;
        }
        break;
      case "right":
        if (
          playerPosition.x < level[playerPosition.y].length - 1 &&
          level[playerPosition.y][playerPosition.x + 1] === free
        ) {
          ++playerPosition.x;
          hasMoved = true;
        }
        break;
    }

    if (hasMoved) {
      level[current.y][current.x] = free;
      level[playerPosition.y][playerPosition.x] = player;
      playerAt = playerPosition;
      console.clear();
      console.log("Player has moved " + direction);
    }
    return hasMoved;
  };
  let toggleView = false;
  let onWindowResize = update => {
    if (update) toggleView = window.innerWidth <= 414;

    if (toggleView)
      document.querySelector(".info.button").classList.add("active");
    else document.querySelector(".info.button").classList.remove("active");
  };

  onWindowResize(false);

  let printMap = () => {
    var str = "";

    var info = "Player at " + playerAt.y + " " + playerAt.x + "\n <br>";

    for (let row of level) {
      str += row.toString().split(",").join("  ") + "\n <br>";
    }
    document.querySelector(".info.button .innerText").innerHTML =
      info +
      str
        .replace(/0/gi, '<b class="zero" style="color:#bbb;">0</b>')
        .replace("2", '<b style="color:darkgreen;">2</b>');
    return info + str;
  };

  move();
  draw();
  console.clear();

  setTimeout(
    el => {
      document.querySelector(".overlay").classList.add("hidden");
      window.addEventListener("resize", onWindowResize);
    },
    500,
    document.querySelector(".up")
  );

  document.querySelector(".info.button").addEventListener(
    "click",
    function(e) {
      toggleView = !toggleView;
      onWindowResize(false);
    },
    false
  );
  console.log("Legend:\n player is 2,\nfield free-to-go is 0,\nno-go is 1");
  printMap();
})();

script.js

move = Function;
draw = Function;
printMap = Function;

(function() {
  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");
  var size = 300;
  var fieldSize = size / 8;
  var playerPosition = { x: 0, y: 0 };

  var free = 0;
  var wall = 1;
  var player = 2;
  var level = [
    [2, 1, 1, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 1, 0],
    [0, 1, 0, 1, 0, 1, 0, 0],
    [0, 0, 0, 1, 0, 1, 0, 1],
    [1, 1, 1, 1, 0, 1, 0, 1],
    [1, 0, 0, 0, 0, 1, 0, 1],
    [1, 0, 1, 1, 1, 1, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1]
  ];

  let codes = [];
  codes[38] = "up";
  codes[40] = "down";
  codes[37] = "left";
  codes[39] = "right";

  var playerAt = playerPosition;

  draw = () => {
    ctx.fillStyle = "darkgray";
    ctx.fillRect(0, 0, size, size);
    ctx.fillStyle = "#f00";
    ctx.fillRect(
      playerPosition.x * fieldSize,
      playerPosition.y * fieldSize,
      fieldSize,
      fieldSize
    );

    printMap();
    return true;
  };
  let onKeyDown = e => {
    let code = codes[e.keyCode] != undefined
      ? codes[e.keyCode]
      : e.target.className;

    move(code) &&
      draw() &&
      setTimeout(() => {
        Array.from(document.querySelectorAll("button")).forEach(el =>
          el.classList.remove("active")
        );
        return true;
      }, 400) &&
      document.querySelector("." + code).classList.add("active");
    setTimeout(() => document.querySelector("." + code).blur(), 400);
  };

  Array.from(document.querySelectorAll("button")).forEach(el =>
    el.addEventListener("click", onKeyDown, false)
  );

  window.addEventListener("keydown", onKeyDown);
  move = direction => {
    //console.log("moving", direction);
    var current = JSON.parse(JSON.stringify(playerPosition));

    var hasMoved = false;
    switch (direction) {
      case "up":
        if (
          playerPosition.y > 0 &&
          level[playerPosition.y - 1] &&
          level[playerPosition.y - 1][playerPosition.x] === free
        ) {
          --playerPosition.y;
          hasMoved = true;
        }
        break;
      case "down":
        if (
          playerPosition.y < level.length - 1 &&
          level[playerPosition.y + 1] &&
          level[playerPosition.y + 1][playerPosition.x] === free
        ) {
          ++playerPosition.y;
          hasMoved = true;
        }
        break;
      case "left":
        if (
          playerPosition.x > 0 &&
          level[playerPosition.y][playerPosition.x - 1] === free
        ) {
          --playerPosition.x;
          hasMoved = true;
        }
        break;
      case "right":
        if (
          playerPosition.x < level[playerPosition.y].length - 1 &&
          level[playerPosition.y][playerPosition.x + 1] === free
        ) {
          ++playerPosition.x;
          hasMoved = true;
        }
        break;
    }

    if (hasMoved) {
      level[current.y][current.x] = free;
      level[playerPosition.y][playerPosition.x] = player;
      playerAt = playerPosition;
      console.clear();
      console.log("Player has moved " + direction);
    }
    return hasMoved;
  };

  let printMap = () => {
    //var x, y;
    //x=0, y=0;
    var str = "";

    var info = "Player at " + playerAt.y + " " + playerAt.x + "\n";

    for (let row of level) {
      str += row.toString().split(",").join("  ") + "\n";
    }
    console.log(info + str);
    return 1;
  };

  move();
  draw();
  console.clear();
  printMap();
})();

style.css

button {
  width: 100px;
  height: 100px;
  margin: 5px;
  font-size: 1.3em;
  border-radius: 5px;
  border: 4px solid #505;
  background-color: #dcd;
  box-shadow: 0px 0px 10px #333;
  transition: all 300ms;
  text-transform: uppercase;
}

button:focus, button:active, button.active {
  background-color: #abc;
  background: linear-gradient(#abc 30%, #def 70%);
  border: 4px solid #eee;
  color: #f03;
  filter: blur(0.045em);
}
button:hover {
  cursor: pointer;
}
.btnWrap {
  overflow: hidden;
  display: inline;
  position: absolute;
  width: calc(50% - 10px);
  right: 10px;
}
body {
  overflow: hidden;
  background-color: slategray;
}

style.sass

.active
  .zero
    animation: blink_animation 2s
    animation-direction: alternate
    animation-delay: 1s
    @keyframes blink_animation
      0%
        color: #fff
      100%
        color: #bbb

.btnWrap button
  width: 100px
  height: 100px
  margin: 5px
  font-size: 1.3em
  border-radius: 5px
  border: 4px solid #505
  background-color: #dcd
  box-shadow: 0px 0px 10px #333
  transition: all 300ms
  text-transform: uppercase
  &:focus, &:active, &.active
    background-color: #abc
    background: linear-gradient(#abc 30%, #def 70%)
    border: 4px solid #eee
    color: #f03
    filter: blur(0.045em)
  &:hover
    cursor: pointer

.btnWrap
  top: 10px
  overflow: hidden
  display: inline
  position: absolute
  width: calc(50% - 10px)
  right: 10px
  min-width: 280px
  opacity: 1
  transition: all 1s

body
  overflow: hidden
  background-color: slategray
  padding: 7px
  transition: background-color 1s
  
.overlay
  position: absolute
  text-align: center
  top: 50px
  left: 50px
  opacity: 1
  font-size: 36px
  transition: opacity 1s, font-size 3s
  animation: fadeIn 800ms
  
  @keyframes fadeIn
    0%
      opacity: 0
    100%
      opacity: 100%
    
  
  &.hidden
    opacity: 0
    font-size: 16px  
 
div.info.button
  font-family: 'Courier'
  cursor: pointer
  display: block
  //margin: 3px
  margin-top: 12px
  //padding: 5px
  height: 45px
  display: block
  font-size: 1.1em
  font-stretch: 1.1em
  background-color: lightgray
  padding: 10px
  overflow: hidden
  line-height: 1.4em
  transition: all 1s
  color: #000
  
  .innerText
    padding: 0
    opacity: 0
    transition: padding 2s, opacity 1s
  
  &.active
    height: 300px
    overflow-y: yes
    text-decoration: none
    
    .innerText
      padding: 3px
      opacity: 1
  
      
@media screen and(max-width:414px)
  body
    background-color: #338
  .btnWrap
    opacity: 0.5
    position: absolute
    top: 40px
  
  div.info.button
    min-width: 279px
    height: 72px
  div.info.button.active
    color: transparent
    height: 282px
    .innerText
      padding: 3px
      color: black
      position: relative
      //overflow: visible
      bottom: 62px
      clear: both
      

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />