master

分支 (3)

管理

管理

master

patch-2

patch-1

platformre
/
level.html

<!DOCTYPE html>
<html>
  <head>
    <title>Level rendering test</title>
    <meta charset="UTF-8">
    <style>
.level {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}
.lvl {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.levelRow {
  height: 40px;
}
.levelBlock {
  height: 40px;
  width: 40px;
  display: inline-block;
}
.air {
  background: none;
  fill: none;
}
.ground {
  background: #212121;
  fill: #212121;
}
.lava {
  background: #FF5722;
  fill: #FF5722;
}
    </style>
  </head>
  <body>
    <p><b>Look.</b></p>
    <div class="level"></div>
    <svg class="lvl"></svg>

    <script src="../sheep.js"></script>
    <script>
var levels=[ /* space=air, @=ground, #=lava */
  [
  "@@@@@@@@@@@@@@@",
  "@         @@@@@",
  "@  @@@@@      @",
  "@         @ @@@",
  "@@@@@#@@@@@@@@@",
  ],
];
function render(level) {
  var data="";
  for (var i=0;i<levels[level].length;i++) { // j is x, i is y <rect x=50 y=20 width=150 height=150 class=air/>
    for (var j=0;j<levels[level][i].length;j++) {
      switch (levels[level][i][j]) {
        case "@":
          data+="<rect x="+(j*40)+" y="+(i*40)+" width=40 height=40 class=ground></rect>";
          break;
        case "#":
          data+="<rect x="+(j*40)+" y="+(i*40)+" width=40 height=40 class=lava></rect>";
          break;
      }
    }
  }
  document.querySelector(".lvl").innerHTML=data;
  document.querySelector(".lvl").style.width=(levels[level][0].length*40)+"px";
  document.querySelector(".lvl").style.height=(levels[level].length*40)+"px";
}
render(0);
    </script>
  </body>
</html>