javascript - 显示屏幕外元素的 SVG View 框-6ren

javascript - 显示屏幕外元素的 SVG View 框

转载作者：行者123 更新时间：2023-11-28 15:55:56

我正在用 svg 标记为图形制作一个 HTML5 游戏，以提供多分辨率显示。游戏的大部分内容已完成，但在测试中我刚刚遇到一个重大错误，该错误涉及 SVG 对象可见，尽管在非 native 分辨率下位于 View 框之外。我不确定这是我的代码中的缺陷，还是浏览器本身的缺陷(Google Chrome 54.0.2840.99 m(64 位)和 57.0.2950.0(官方构建)canary(64 位))。我不得不使用谷歌浏览器，因为我在元素中使用 WebSQL(许多主流浏览器中都没有)。

该元素是一个自上而下的滚动迷宫游戏，阴影是通过来自形状顶点的光线转换填充多边形绘制的。只有当它们“附加”到的一个或多个顶点在屏幕上时，才会绘制阴影。问题是，当我降低分辨率(我的默认值是 1366 x 768)时，它们不会像往常一样绘制到屏幕的顶部/底部。它应该看起来像这样。

下面是我的代码的主要缩减版本。我假设如果在我的代码中有错误，它会在 shadowrays() 函数中。通常，该程序将以全屏模式 (F11) 运行，以确保它与窗口大小相同。要移动屏幕，请使用 w、a、s 和 d 键

window.setInterval(function() {
  if (draw) {
    if (keystate[controls[2]]) {
      xvelocity -= 2;
    }
    if (keystate[controls[3]]) {
      xvelocity += 2;
    }
    xvelocity = xvelocity * 0.93;
    xscroll += xvelocity;
    svg.setAttribute("viewBox", (xscroll + " " + yscroll + " " + dimensions.width + " " + dimensions.height));
    centerplayer();
    if (checkcollision()) {
      xscroll -= xvelocity;
      xvelocity = xvelocity * -0.8;
    }
    if (keystate[controls[0]]) {
      yvelocity += 2;
    }
    if (keystate[controls[1]]) {
      yvelocity -= 2;
    }
    yvelocity = yvelocity * 0.93;
    yscroll -= yvelocity;
    svg.setAttribute("viewBox", (xscroll + " " + yscroll + " " + dimensions.width + " " + dimensions.height));
    centerplayer();
    if (checkcollision()) {
      yscroll += yvelocity;
      yvelocity = yvelocity * -0.8;
    }
    shadowrays();
  }
}, 16.666666666666667);
var keystate = {};
window.addEventListener("keydown", function(e) {
  if (!(((e.keycode || e.which) > 111) && ((e.keyCode || e.which) < 124))) {
    keystate[e.keycode || e.which] = true;
  }
}, true);
window.addEventListener("keyup", function(e) {
  keystate[e.keycode || e.which] = false;
}, true);

function shadowrays() {
  var kill = document.getElementsByClassName("shadowray");
  while (kill[0]) {
    kill[0].parentNode.removeChild(kill[0]);
  }
  var len = level.length,
    shape = {},
    points = [],
    poly = [],
    p1x, p2x, p1y, p2y, p3x, p3y, p4x, p4y, p5x, p5y, p6x, p6y, cx = player.cx.animVal.value,
    cy = player.cy.animVal.value,
    m, i, n;
  for (i = 1; i < len; i += 1) {
    shape = level[i];
    points = [shape.x, shape.y, shape.x, shape.y + shape.height, shape.x + shape.width, shape.y + shape.height, shape.x + shape.width, shape.y];
    for (n = 0; n < 4; n += 1) {
      p1x = points[(n * 2) % 8];
      p2x = points[(n * 2 + 2) % 8];
      p1y = points[(n * 2 + 1) % 8];
      p2y = points[(n * 2 + 3) % 8];
      if ((((Math.abs(p1x - cx) <= dimensions.width / 2) || (Math.abs(p2x - cx) <= dimensions.width / 2)) && ((Math.abs(p1y - cy) <= dimensions.height / 2) || (Math.abs(p2y - cy) <= dimensions.height / 2))) && shape.id != "enclosure") {
        m = (p1y - cy) / (p1x - cx);
        p6y = m * (cx + dimensions.width / 2 * (Math.abs(p1x - cx) / (p1x - cx))) - m * cx + cy;
        if (Math.abs(p6y - cy) <= dimensions.height / 2) {
          p6x = (p6y - cy) / m + cx;
          p5x = p6x;
          p5y = cy + dimensions.height / 2 * (Math.abs(p6y - cy) / (p6y - cy));
        } else {
          p6y = cy + dimensions.height / 2 * (Math.abs(p6y - cy) / (p6y - cy));
          p6x = (p6y - cy) / m + cx;
          p5x = cx + dimensions.width / 2 * (Math.abs(p6x - cx) / (p6x - cx));
          p5y = p6y;
        }
        m = (p2y - cy) / (p2x - cx);
        p3y = m * (cx + dimensions.width / 2 * (Math.abs(p2x - cx) / (p2x - cx))) - m * cx + cy;
        if (Math.abs(p3y - cy) <= dimensions.height / 2) {
          p3x = (p3y - cy) / m + cx;
          p4x = p3x;
          p4y = cy + dimensions.height / 2 * (Math.abs(p3y - cy) / (p3y - cy));
        } else {
          p3y = cy + dimensions.height / 2 * (Math.abs(p3y - cy) / (p3y - cy));
          p3x = (p3y - cy) / m + cx;
          p4x = Number(cx) + Number(dimensions.width) / 2 * (Math.abs(p3x - cx) / (p3x - cx));
          p4y = p3y;
        }
        poly = [];
        poly.push(p1x + ',' + p1y, p2x + ',' + p2y, p3x + ',' + p3y, p4x + ',' + p4y, p5x + ',' + p5y, p6x + ',' + p6y);
        createpolygon(poly, "", ("s" + i + n), "shadowray");
      }
    }
  }
}

function createpolygon(points, filter, id, classt) {
  var polygon = document.createElementNS(svgns, "polygon"),
    data_points = "",
    max = points.length,
    z;
  polygon.setAttributeNS(null, "id", "p" + id);
  for (z = 0; z < max; z += 1) {
    data_points += points[z] + " ";
  }
  polygon.setAttributeNS(null, "points", data_points);
  if (filter !== "") {
    polygon.setAttributeNS(null, "filter", filter);
  }
  polygon.setAttributeNS(null, "class", classt);
  svg.appendChild(polygon);
}

function centerplayer() {
  player.setAttributeNS(null, "cx", (xscroll + dimensions.width / 2));
  player.setAttributeNS(null, "cy", (yscroll + dimensions.height / 2));
  var hitbox = document.getElementById("rhb");
  hitbox.setAttributeNS(null, "width", player.r.animVal.value * 2);
  hitbox.setAttributeNS(null, "height", player.r.animVal.value * 2);
  //            var hitboxbbox = hitbox.getBBox();
  hitbox.setAttributeNS(null, "transform", ("translate(" + (xscroll + dimensions.width / 2 - player.r.animVal.value) + ", " + (yscroll + dimensions.height / 2 - player.r.animVal.value) + ")"));
}

function draw(lvl) {
  var objects = lvl.length,
    i;
  xscroll = Number(lvl[0].xspawn);
  yscroll = Number(lvl[0].yspawn);
  xvelocity = 0;
  yvelocity = 0;
  for (i = 1; i < objects; i += 1) {
    var object = lvl[i];
    if (object.type == "rect") {
      createrectangle(object.x, object.y, object.width, object.height, "", object.id, object.class);
    } else if (object.type == "circle") {
      createcircle(object.x, object.y, object.r, "", object.id, object.class);
    } else if (object.type == "polygon") {
      createpolygon(object.points, "", object.id, object.class);
    }
  }
  createcircle("7680", "4320", "50", "", "player", "st1");
  createrectangle("0", "0", "100", "100", "", "hb", "st2");
  createrectangle(lvl[0].xexit - 50, lvl[0].yexit - 50, "100", "100", "", "exit", "exit");
  drawn = true;
}

function createcircle(posx, posy, radius, filter, id, classt) {
  var circle = document.createElementNS(svgns, "circle");
  circle.setAttributeNS(null, "id", "c" + id);
  circle.setAttributeNS(null, "cx", posx);
  circle.setAttributeNS(null, "cy", posy);
  circle.setAttributeNS(null, "r", radius);
  if (filter !== "") {
    circle.setAttributeNS(null, "filter", filter);
  }
  circle.setAttributeNS(null, "class", classt);
  svg.appendChild(circle);
}

function createrectangle(posx, posy, width, height, filter, id, classt) {
  var rectangle = document.createElementNS(svgns, "rect");
  rectangle.setAttributeNS(null, "id", "r" + id);
  rectangle.setAttributeNS(null, "x", posx);
  rectangle.setAttributeNS(null, "y", posy);
  rectangle.setAttributeNS(null, "width", width);
  rectangle.setAttributeNS(null, "height", height);
  if (filter !== "") {
    rectangle.setAttributeNS(null, "filter", filter);
  }
  rectangle.setAttributeNS(null, "class", classt);
  svg.appendChild(rectangle);
}

var svg = document.getElementById("canvas"), //the svg element
  dimensions = {
    width: 1920,
    height: 1080
  }, //view dimensions
  svgns = "http://www.w3.org/2000/svg", //the SVG name space address
  player, //player is used later in game
  level, xvelocity, yvelocity, xscroll, yscroll, //current level, speeds and positions
  controls = ["87", "83", "65", "68", "32"],
  drawn = false;

function checkcollision() {
  var r = player.r.animVal.value,
    frame = document.getElementById("renclosure").getBBox(),
    i;
  if ((player.cx.animVal.value < r) || (player.cy.animVal.value < r) || (player.cx.animVal.value > frame.width - r) || (player.cy.animVal.value > frame.height - r)) {
    return true;
  }
  var collisions = [],
    len, r0 = document.getElementById("rhb").getBoundingClientRect(),
    r1 = svg.createSVGRect();
  r1.x = r0.left;
  r1.y = r0.top;
  r1.width = r0.width;
  r1.height = r0.height;
  var collisions_node = svg.getIntersectionList(r1, null);
  len = collisions_node.length;
  for (i = 0; i < len; i += 1) {
    collisions.push(collisions_node[i]);
  }
  for (i = len - 1; i >= 0; i -= 1) {
    if (collisions[i].id == "renclosure" || collisions[i].id == "cplayer" || collisions[i].id == "rpain" || collisions[i].id == "rhb" || collisions[i].className.animVal == "shadowray") {

      collisions.splice(i, 1);
    } else if (collisions[i].id == "rexit") { //winner
      //DO STUFF
    }
  }
  if (collisions.length > 0) {
    return true;
  } else {
    return false;
  }
}

level = [{
  "id": "l0",
  "name": "pretty", //level name
  "description": "oooooo shadows", //desciption
  "xspawn": 0, //where the player starts
  "yspawn": 0,
  "xexit": 2200, //where the exit it
  "yexit": 2200,
  "bits": 50 //umber of qbits in the level
}, {
  id: "enclosure", //shape id
  type: "rect", //shape type
  x: 0, //top left x
  y: 0, //top left y
  class: "obstacle_box", //class for style
  width: 5760, //width
  height: 2160 //height
}, {
  id: "1",
  type: "rect",
  x: 150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "2",
  type: "rect",
  x: 350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "3",
  type: "rect",
  x: 550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "4",
  type: "rect",
  x: 750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "5",
  type: "rect",
  x: 950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "6",
  type: "rect",
  x: 1150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "7",
  type: "rect",
  x: 1350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "8",
  type: "rect",
  x: 1550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "9",
  type: "rect",
  x: 1750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "10",
  type: "rect",
  x: 1950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "11",
  type: "rect",
  x: 2150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "12",
  type: "rect",
  x: 2350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "13",
  type: "rect",
  x: 2550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "14",
  type: "rect",
  x: 2750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "15",
  type: "rect",
  x: 2950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "16",
  type: "rect",
  x: 3150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "17",
  type: "rect",
  x: 3350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "18",
  type: "rect",
  x: 3550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "19",
  type: "rect",
  x: 3750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "20",
  type: "rect",
  x: 3950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}];

draw(level);
player = document.getElementById("cplayer");
svg.setAttribute("viewBox", (xscroll + " " + yscroll + " " + dimensions.width + " " + dimensions.height));
centerplayer();
shadowrays();

html,
body {
  /*default font for all elements*/
  font-family: Calibri;
  /*ensures page is flush*/
  margin: 0px;
  width: 100%;
  height: 100%;
  /*default position of text*/
  text-align: center;
  /*gets rid of scrollbars*/
  overflow: hidden;
  /*cursor is always the normal pointer*/
  cursor: default;
}
#canvas {
  /*makes it flush with the page*/
  height: 100%;
  width: 100%;
  padding: 0;
  /*black background*/
  background-color: #000;
  /*more flushing*/
  position: fixed;
  left: 0px;
  top: 0px;
  border: none;
}
#border {
  height: 100%;
  width: 100%;
  padding: 0;
  /*black background*/
  background: none;
  /*more flushing*/
  position: fixed;
  left: 0px;
  top: 0px;
  border: 1px solid #000;
}
/*currently the player*/

.st1 {
  /*it's black and no outline*/
  fill: black;
  stroke: none;
}
/*the main black bits of the levels that are collidable*/

.obstacle_box {
  /*black fill*/
  fill: #000;
  /*black outline*/
  stroke: #000;
  stroke-width: 1;
  /*prevents corner curling*/
  stroke-miterlimit: 10;
}
/*the hitbox thingy*/

.st2 {
  /*no fill but darkish outline*/
  fill: none;
  stroke: #999;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
/*the exit*/

.exit {
  /*greenish fill*/
  fill: #0C3;
  /*greener outline*/
  stroke: #00FF40;
  stroke-width: 5;
  /*makes the line ends round*/
  stroke-linecap: round;
  /*makes them dashed*/
  stroke-dasharray: 10, 10;
  /*animates in a loop the outline*/
  animation: exit 0.5s linear infinite;
}
/*outline effect for the exit*/

@keyframes exit {
  0% {
    /*outline breaks offset*/
    stroke-dashoffset: 0
  }
  100% {
    stroke-dashoffset: 20
  }
}
.shadowray {
  /*black*/
  fill: #000;
  /*black*/
  stroke: #000;
  stroke-width: 1;
  stroke-miterlimit: 10;
  /*visible*/
  opacity: 1;
}
/*the edge of the level*/

#renclosure {
  /*the background you actually see*/
  fill: #EEE;
}

<svg id="canvas" viewBox="0 0 1920 1080">
  <!--for adding SVG filters to-->
  <defs id="filters"></defs>
</svg>
<div id="border"></div>

最佳答案

原来有一个非常简单的解决方案，我所要做的就是将 preserveAspectRatio="none" 添加到 svg 标签中，这将使它拉伸(stretch)到填满所有窗口。

window.setInterval(function() {
  if (draw) {
    if (keystate[controls[2]]) {
      xvelocity -= 2;
    }
    if (keystate[controls[3]]) {
      xvelocity += 2;
    }
    xvelocity = xvelocity * 0.93;
    xscroll += xvelocity;
    svg.setAttribute("viewBox", (xscroll + " " + yscroll + " " + dimensions.width + " " + dimensions.height));
    centerplayer();
    if (checkcollision()) {
      xscroll -= xvelocity;
      xvelocity = xvelocity * -0.8;
    }
    if (keystate[controls[0]]) {
      yvelocity += 2;
    }
    if (keystate[controls[1]]) {
      yvelocity -= 2;
    }
    yvelocity = yvelocity * 0.93;
    yscroll -= yvelocity;
    svg.setAttribute("viewBox", (xscroll + " " + yscroll + " " + dimensions.width + " " + dimensions.height));
    centerplayer();
    if (checkcollision()) {
      yscroll += yvelocity;
      yvelocity = yvelocity * -0.8;
    }
    shadowrays();
  }
}, 16.666666666666667);
var keystate = {};
window.addEventListener("keydown", function(e) {
  if (!(((e.keycode || e.which) > 111) && ((e.keyCode || e.which) < 124))) {
    keystate[e.keycode || e.which] = true;
  }
}, true);
window.addEventListener("keyup", function(e) {
  keystate[e.keycode || e.which] = false;
}, true);

function shadowrays() {
  var kill = document.getElementsByClassName("shadowray");
  while (kill[0]) {
    kill[0].parentNode.removeChild(kill[0]);
  }
  var len = level.length,
    shape = {},
    points = [],
    poly = [],
    p1x, p2x, p1y, p2y, p3x, p3y, p4x, p4y, p5x, p5y, p6x, p6y, cx = player.cx.animVal.value,
    cy = player.cy.animVal.value,
    m, i, n;
  for (i = 1; i < len; i += 1) {
    shape = level[i];
    points = [shape.x, shape.y, shape.x, shape.y + shape.height, shape.x + shape.width, shape.y + shape.height, shape.x + shape.width, shape.y];
    for (n = 0; n < 4; n += 1) {
      p1x = points[(n * 2) % 8];
      p2x = points[(n * 2 + 2) % 8];
      p1y = points[(n * 2 + 1) % 8];
      p2y = points[(n * 2 + 3) % 8];
      if ((((Math.abs(p1x - cx) <= dimensions.width / 2) || (Math.abs(p2x - cx) <= dimensions.width / 2)) && ((Math.abs(p1y - cy) <= dimensions.height / 2) || (Math.abs(p2y - cy) <= dimensions.height / 2))) && shape.id != "enclosure") {
        m = (p1y - cy) / (p1x - cx);
        p6y = m * (cx + dimensions.width / 2 * (Math.abs(p1x - cx) / (p1x - cx))) - m * cx + cy;
        if (Math.abs(p6y - cy) <= dimensions.height / 2) {
          p6x = (p6y - cy) / m + cx;
          p5x = p6x;
          p5y = cy + dimensions.height / 2 * (Math.abs(p6y - cy) / (p6y - cy));
        } else {
          p6y = cy + dimensions.height / 2 * (Math.abs(p6y - cy) / (p6y - cy));
          p6x = (p6y - cy) / m + cx;
          p5x = cx + dimensions.width / 2 * (Math.abs(p6x - cx) / (p6x - cx));
          p5y = p6y;
        }
        m = (p2y - cy) / (p2x - cx);
        p3y = m * (cx + dimensions.width / 2 * (Math.abs(p2x - cx) / (p2x - cx))) - m * cx + cy;
        if (Math.abs(p3y - cy) <= dimensions.height / 2) {
          p3x = (p3y - cy) / m + cx;
          p4x = p3x;
          p4y = cy + dimensions.height / 2 * (Math.abs(p3y - cy) / (p3y - cy));
        } else {
          p3y = cy + dimensions.height / 2 * (Math.abs(p3y - cy) / (p3y - cy));
          p3x = (p3y - cy) / m + cx;
          p4x = Number(cx) + Number(dimensions.width) / 2 * (Math.abs(p3x - cx) / (p3x - cx));
          p4y = p3y;
        }
        poly = [];
        poly.push(p1x + ',' + p1y, p2x + ',' + p2y, p3x + ',' + p3y, p4x + ',' + p4y, p5x + ',' + p5y, p6x + ',' + p6y);
        createpolygon(poly, "", ("s" + i + n), "shadowray");
      }
    }
  }
}

function createpolygon(points, filter, id, classt) {
  var polygon = document.createElementNS(svgns, "polygon"),
    data_points = "",
    max = points.length,
    z;
  polygon.setAttributeNS(null, "id", "p" + id);
  for (z = 0; z < max; z += 1) {
    data_points += points[z] + " ";
  }
  polygon.setAttributeNS(null, "points", data_points);
  if (filter !== "") {
    polygon.setAttributeNS(null, "filter", filter);
  }
  polygon.setAttributeNS(null, "class", classt);
  svg.appendChild(polygon);
}

function centerplayer() {
  player.setAttributeNS(null, "cx", (xscroll + dimensions.width / 2));
  player.setAttributeNS(null, "cy", (yscroll + dimensions.height / 2));
  var hitbox = document.getElementById("rhb");
  hitbox.setAttributeNS(null, "width", player.r.animVal.value * 2);
  hitbox.setAttributeNS(null, "height", player.r.animVal.value * 2);
  //            var hitboxbbox = hitbox.getBBox();
  hitbox.setAttributeNS(null, "transform", ("translate(" + (xscroll + dimensions.width / 2 - player.r.animVal.value) + ", " + (yscroll + dimensions.height / 2 - player.r.animVal.value) + ")"));
}

function draw(lvl) {
  var objects = lvl.length,
    i;
  xscroll = Number(lvl[0].xspawn);
  yscroll = Number(lvl[0].yspawn);
  xvelocity = 0;
  yvelocity = 0;
  for (i = 1; i < objects; i += 1) {
    var object = lvl[i];
    if (object.type == "rect") {
      createrectangle(object.x, object.y, object.width, object.height, "", object.id, object.class);
    } else if (object.type == "circle") {
      createcircle(object.x, object.y, object.r, "", object.id, object.class);
    } else if (object.type == "polygon") {
      createpolygon(object.points, "", object.id, object.class);
    }
  }
  createcircle("7680", "4320", "50", "", "player", "st1");
  createrectangle("0", "0", "100", "100", "", "hb", "st2");
  createrectangle(lvl[0].xexit - 50, lvl[0].yexit - 50, "100", "100", "", "exit", "exit");
  drawn = true;
}

function createcircle(posx, posy, radius, filter, id, classt) {
  var circle = document.createElementNS(svgns, "circle");
  circle.setAttributeNS(null, "id", "c" + id);
  circle.setAttributeNS(null, "cx", posx);
  circle.setAttributeNS(null, "cy", posy);
  circle.setAttributeNS(null, "r", radius);
  if (filter !== "") {
    circle.setAttributeNS(null, "filter", filter);
  }
  circle.setAttributeNS(null, "class", classt);
  svg.appendChild(circle);
}

function createrectangle(posx, posy, width, height, filter, id, classt) {
  var rectangle = document.createElementNS(svgns, "rect");
  rectangle.setAttributeNS(null, "id", "r" + id);
  rectangle.setAttributeNS(null, "x", posx);
  rectangle.setAttributeNS(null, "y", posy);
  rectangle.setAttributeNS(null, "width", width);
  rectangle.setAttributeNS(null, "height", height);
  if (filter !== "") {
    rectangle.setAttributeNS(null, "filter", filter);
  }
  rectangle.setAttributeNS(null, "class", classt);
  svg.appendChild(rectangle);
}

var svg = document.getElementById("canvas"), //the svg element
  dimensions = {
    width: 1920,
    height: 1080
  }, //view dimensions
  svgns = "http://www.w3.org/2000/svg", //the SVG name space address
  player, //player is used later in game
  level, xvelocity, yvelocity, xscroll, yscroll, //current level, speeds and positions
  controls = ["87", "83", "65", "68", "32"],
  drawn = false;

function checkcollision() {
  var r = player.r.animVal.value,
    frame = document.getElementById("renclosure").getBBox(),
    i;
  if ((player.cx.animVal.value < r) || (player.cy.animVal.value < r) || (player.cx.animVal.value > frame.width - r) || (player.cy.animVal.value > frame.height - r)) {
    return true;
  }
  var collisions = [],
    len, r0 = document.getElementById("rhb").getBoundingClientRect(),
    r1 = svg.createSVGRect();
  r1.x = r0.left;
  r1.y = r0.top;
  r1.width = r0.width;
  r1.height = r0.height;
  var collisions_node = svg.getIntersectionList(r1, null);
  len = collisions_node.length;
  for (i = 0; i < len; i += 1) {
    collisions.push(collisions_node[i]);
  }
  for (i = len - 1; i >= 0; i -= 1) {
    if (collisions[i].id == "renclosure" || collisions[i].id == "cplayer" || collisions[i].id == "rpain" || collisions[i].id == "rhb" || collisions[i].className.animVal == "shadowray") {

      collisions.splice(i, 1);
    } else if (collisions[i].id == "rexit") { //winner
      //DO STUFF
    }
  }
  if (collisions.length > 0) {
    return true;
  } else {
    return false;
  }
}

level = [{
  "id": "l0",
  "name": "pretty", //level name
  "description": "oooooo shadows", //desciption
  "xspawn": 0, //where the player starts
  "yspawn": 0,
  "xexit": 2200, //where the exit it
  "yexit": 2200,
  "bits": 50 //umber of qbits in the level
}, {
  id: "enclosure", //shape id
  type: "rect", //shape type
  x: 0, //top left x
  y: 0, //top left y
  class: "obstacle_box", //class for style
  width: 5760, //width
  height: 2160 //height
}, {
  id: "1",
  type: "rect",
  x: 150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "2",
  type: "rect",
  x: 350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "3",
  type: "rect",
  x: 550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "4",
  type: "rect",
  x: 750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "5",
  type: "rect",
  x: 950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "6",
  type: "rect",
  x: 1150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "7",
  type: "rect",
  x: 1350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "8",
  type: "rect",
  x: 1550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "9",
  type: "rect",
  x: 1750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "10",
  type: "rect",
  x: 1950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "11",
  type: "rect",
  x: 2150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "12",
  type: "rect",
  x: 2350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "13",
  type: "rect",
  x: 2550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "14",
  type: "rect",
  x: 2750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "15",
  type: "rect",
  x: 2950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "16",
  type: "rect",
  x: 3150,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "17",
  type: "rect",
  x: 3350,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "18",
  type: "rect",
  x: 3550,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "19",
  type: "rect",
  x: 3750,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}, {
  id: "20",
  type: "rect",
  x: 3950,
  y: 200,
  class: "obstacle_box",
  width: 100,
  height: 100
}];

draw(level);
player = document.getElementById("cplayer");
svg.setAttribute("viewBox", (xscroll + " " + yscroll + " " + dimensions.width + " " + dimensions.height));
centerplayer();
shadowrays();

html,
body {
  /*default font for all elements*/
  font-family: Calibri;
  /*ensures page is flush*/
  margin: 0px;
  width: 100%;
  height: 100%;
  /*default position of text*/
  text-align: center;
  /*gets rid of scrollbars*/
  overflow: hidden;
  /*cursor is always the normal pointer*/
  cursor: default;
}
#canvas {
  /*makes it flush with the page*/
  height: 100%;
  width: 100%;
  padding: 0;
  /*black background*/
  background-color: #000;
  /*more flushing*/
  position: fixed;
  left: 0px;
  top: 0px;
  border: none;
}
#border {
  height: 100%;
  width: 100%;
  padding: 0;
  /*black background*/
  background: none;
  /*more flushing*/
  position: fixed;
  left: 0px;
  top: 0px;
  border: 1px solid #000;
}
/*currently the player*/

.st1 {
  /*it's black and no outline*/
  fill: black;
  stroke: none;
}
/*the main black bits of the levels that are collidable*/

.obstacle_box {
  /*black fill*/
  fill: #000;
  /*black outline*/
  stroke: #000;
  stroke-width: 1;
  /*prevents corner curling*/
  stroke-miterlimit: 10;
}
/*the hitbox thingy*/

.st2 {
  /*no fill but darkish outline*/
  fill: none;
  stroke: #999;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
/*the exit*/

.exit {
  /*greenish fill*/
  fill: #0C3;
  /*greener outline*/
  stroke: #00FF40;
  stroke-width: 5;
  /*makes the line ends round*/
  stroke-linecap: round;
  /*makes them dashed*/
  stroke-dasharray: 10, 10;
  /*animates in a loop the outline*/
  animation: exit 0.5s linear infinite;
}
/*outline effect for the exit*/

@keyframes exit {
  0% {
    /*outline breaks offset*/
    stroke-dashoffset: 0
  }
  100% {
    stroke-dashoffset: 20
  }
}
.shadowray {
  /*black*/
  fill: #000;
  /*black*/
  stroke: #000;
  stroke-width: 1;
  stroke-miterlimit: 10;
  /*visible*/
  opacity: 1;
}
/*the edge of the level*/

#renclosure {
  /*the background you actually see*/
  fill: #EEE;
}

<svg id="canvas" viewBox="0 0 1920 1080" preserveAspectRatio="none">
  <!--for adding SVG filters to-->
  <defs id="filters"></defs>
</svg>
<div id="border"></div>

关于javascript - 显示屏幕外元素的 SVG View 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41151600/

文章推荐： ios - 带有多个 url 参数的 Siesta iOS GET 请求

文章推荐： html - Bootstrap 4 六个盒子在同一行(响应式)？

文章推荐： javascript - JSON.parse() 可以指示有效的 JSON 格式吗？

view - Laravel View 无法调用子文件夹 View
我在尝试从子文件夹调用 View 时遇到一些错误。首先，这东西能用 Route::get('/', function() { return View::make('sample'); }); 但是当我
mvvm - 显示当前 View 模型中的另一个 View 并关闭 View 模型中的 View ？
我有另一个 View 设置，并准备好等待其viewmodel。我的RelayCommand到达我的“当前” View 模型。从当前的 View 模型显示新 View 的最佳方法是什么？我一直在阅读，
view - 如何共享从其他数据集中查询其他 View 的授权 BigQuery View ？
我有一个 bigquery View ，我想与数据分析师共享，以便他们可以通过 Data Studio 访问其数据。此共享 View 对另一个数据集中的私有(private) View 进行查询，而私
view - Jenkins - 将 View 移入 View
我有 3 个 View ，并希望将它们集成到一个 View 中，以便它们成为这一 View 中的子文件夹。我怎样才能做到这一点？还是我必须制作一个 View ，然后再次手动添加和配置这些 View
views - ouchdb View ，该 View 在数组字段中搜索作为键数组传入的值
我在沙发数据库中有一些文档，这些文档的字段是不同关联文档的ID数组: { associatedAssets: ["4c67f6241f4a0efb7dc2abc24a004dfe", "270f
wpf - 共同的共享 View 。 View + View 模型或用户控件？
我正在开发一个小实用程序 View ，它将嵌入到我们的几个应用程序中。它将位于一个公共(public)图书馆中。我应该将其作为 ViewModel 以及默认的 View 实现公开，还是作为具有固定
c# - 如果不同的 View 共享同一 View 模型，如何从 View 模型中选择 View
由于我的某些 View 具有相似的功能，因此我希望能够与每个 View 共享相同的 View 模型。我的想法是将 token 传递给viewmodel的构造函数，但这将导致代码中出现许多if和else
swift - View 旋转后移动 View ， View 中触摸位置错误
我有一个目标 View (蓝色 View 和红色 View 用于左上角位置)。我试图用手指移动这个 View 。如果 View 不旋转，一切都很好。但当我旋转 View 并移动时，第一次就很好了。但
android - 尝试在空对象引用上调用虚拟方法 'android.view.View android.view.View.getRootView()'
我收到这个错误， "Attempt to invoke virtual method 'android.view.View android.view.View.getRootView()' on a
wpf - 使用数据模板将 View 与 View 模型相关联时，如何动画化从一个 View 到另一个 View 的过渡
我将发布我目前拥有的源代码，然后解释我的问题。这是我希望过渡发生的窗口这是关联的 View 模型 public class MainViewModel {
iphone - self.view = someController.view 与 [self.view addSubview :someController. view]
我正在尝试找出我遇到的错误。最初，我的同事只是使用将 View 添加到 subview 中 [self.view addSubview:someController.view]; 来自当前ViewC
wpf - MVVM:所有 View 的一个 View 模型结构与每个 View 单独的 View 模型结构？
我是 MVVM 的新手，需要一些帮助。我的应用程序由许多不同的窗口组成，这些窗口显示允许用户编辑业务层中的数据的控件。目前，每次用户打开这些窗口之一的新实例时，都会从头开始创建一个 ViewMod
java - 尝试在空对象引用上调用虚拟方法 'android.view.View android.view.View.findViewById(int)'
我一直在寻找与我类似的问题以找到解决方案，但我真的找不到类似的东西。我试图使用 asynctask 类从解析中下载帖子数组，在获取帖子后，它应该在我的页面中设置帖子数组，并执行 setAdapter
java - EJB View (本地 View 、远程 View 、无接口(interface) View )的含义是什么
这个问题在这里已经有了答案: What is local/remote and no-interface view in EJB? (2 个答案) 关闭 9 年前。我以前理解它的意思是“接口(in
ios - 我如何在堆栈 View 中找到 View 的 super View /父 View Controller
希望这不会太困惑。我有一个主视图 Controller ( MainView )，在 View 底部有一个堆栈 View ，在堆栈 View 中我有三个 View 。在一个 View 中(我们称之为
iPhone 如何将 View Controller 的 View 添加到另一个 View Controller 的 View ？
我一直在想这个问题，我真的不知道如何正确地将一个 View Controller 管理的 View 添加到另一个 View Controller 的 View 中。这不起作用，因为 View 没有完
view - 是否有任何简单的方法可以将特定文件从一个 View 复制到另一个 View 中的 clearcase？
在明显的情况下，我必须将大量文件从一个 View 复制到另一个 View 。要复制的文件名将作为输入给出。有什么想法可以通过脚本实现吗？谢谢，日语最佳答案最简单的方法是使用 clearfsimp
jquery - 如何在完整日历中查找月 View 或周 View 或日 View
我正在使用完整日历。这里我的问题是，当单击上一个按钮或下一个按钮单击功能时，如何找到月 View 、周 View 或日 View 格式的完整日历。这里正在调用下一个和上一个按钮的自定义代码。因为使用这
sql - View 与索引 View 或物化 View 的区别
我对这两者感到困惑，并试图找出差异，但没有得到我正在寻找的特定内容。在哪里使用索引 View 而不是普通 View 。它们之间的一些重要区别。最佳答案关键的区别在于物化 View 很好，物化了
cocoa - 在单个自定义 View 中将一个 View 切换到另一个 View
我在一个 xib 中有一个 CustomView，在两个不同的 xib 中有两个不同的 View 。我想在一个 CustomeView 中依次显示这两个 View 。我有一个 NSView 对象，它连

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 显示屏幕外元素的 SVG View 框