Javascript 显示屏幕项目的SVG视图框

我正在用HTML5制作一个游戏，使用

svg

标记提供多分辨率显示。游戏的大部分内容已经完成，但是在测试中我刚刚遇到了一个主要的bug，它涉及SVG对象的可见性，尽管在非本机分辨率上SVG对象在viewbox之外。我不确定这是我的代码中的缺陷，还是浏览器本身的缺陷（Google Chrome 54.0.2840.99 m（64位）和57.0.2950.0（官方版本）canary（64位））。我不得不使用GoogleChrome，因为我在项目中使用WebSQL（很多主流浏览器中都没有）

该项目是一个自上而下的滚动迷宫游戏，通过光线投射填充多边形从形状顶点绘制阴影。仅当阴影“附加”到的一个或多个顶点在屏幕上时，才会绘制阴影。问题是，当我降低分辨率（默认值为1366 x 768）时，它们不会像通常那样绘制到屏幕的顶部/底部。应该是这样的

下面是我的代码的主要精简版本。我假设如果在我的代码中有错误，它将在

shadowrays（）函数中。通常，程序将在全屏模式（F11）下运行，以确保其与窗口大小相同。要移动屏幕，请使用w、a、s和d键


window.setInterval（函数（）{
如果（抽签）{
if（按键状态[控制[2]]）{
x速度-=2；
}
if（按键状态[控制[3]]）{
x速度+=2；
}
xvelocity=xvelocity*0.93；
xscroll+=xvelocity；
setAttribute（“viewBox”（xscroll+“”+yscroll+“”+dimensions.width+“”+dimensions.height））；
centerplayer（）；
if（checkcollision（））{
xscroll-=xvelocity；
xvelocity=xvelocity*-0.8；
}
如果（按键状态[控制[0]]）{
yvelocity+=2；
}
if（按键状态[控制[1]]）{
yvelocity-=2；
}
yvelocity=yvelocity*0.93；
yscroll-=yvelocity；
setAttribute（“viewBox”（xscroll+“”+yscroll+“”+dimensions.width+“”+dimensions.height））；
centerplayer（）；
if（checkcollision（））{
yscroll+=yvelocity；
yvelocity=yvelocity*-0.8；
}
阴影线（）；
}
}, 16.666666666666667);
var keystate={}；
window.addEventListener（“向下键”，函数（e）{
如果（！（（e.keycode|e.which）>111）和（（e.keycode|e.which）<124）））{
keystate[e.keycode | | e.which]=true；
}
}，对）；
window.addEventListener（“键控”，函数（e）{
keystate[e.keycode | | e.which]=false；
}，对）；
函数shadowrays（）{
var kill=document.getElementsByClassName（“shadowray”）；
while（杀死[0]）{
kill[0].parentNode.removeChild（kill[0]）；
}
var len=level.length，
形状={}，
点数=[]，
多边形=[]，
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；
对于（i=1；i如果（（（Math.abs（p1x-cx）发现有一个非常简单的解决方案，那么我所要做的就是在
svg
标记中添加一个
preserveSpectratio=“none”
，这将使它扩展到填充所有窗口


window.setInterval（函数（）{
如果（抽签）{
if（按键状态[控制[2]]）{
x速度-=2；
}
if（按键状态[控制[3]]）{
x速度+=2；
}
xvelocity=xvelocity*0.93；
xscroll+=xvelocity；
setAttribute（“viewBox”（xscroll+“”+yscroll+“”+dimensions.width+“”+dimensions.height））；
centerplayer（）；
if（checkcollision（））{
xscroll-=xvelocity；
xvelocity=xvelocity*-0.8；
}
如果（按键状态[控制[0]]）{
yvelocity+=2；
}
if（按键状态[控制[1]]）{
yvelocity-=2；
}
yvelocity=yvelocity*0.93；
yscroll-=yvelocity；
setAttribute（“viewBox”（xscroll+“”+yscroll+“”+dimensions.width+“”+dimensions.height））；
centerplayer（）；
if（checkcollision（））{
yscroll+=yvelocity；
yvelocity=yvelocity*-0.8；
}
阴影线（）；
}
}, 16.666666666666667);
var keystate={}；
window.addEventListener（“向下键”，函数（e）{
如果（！（（e.keycode|e.which）>111）和（（e.keycode|e.which）<124）））{
keystate[e.keycode | | e.which]=true；
}
}，对）；
window.addEventListener（“键控”，函数（e）{
keystate[e.keycode | | e.which]=false；
}，对）；
函数shadowrays（）{
var kill=document.getElementsByClassName（“shadowray”）；
while（杀死[0]）{
kill[0].parentNode.removeChild（kill[0]）；
}
var len=level.length，
形状={}，
点数=[]，
多边形=[]，
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；
对于（i=1；i如果（（（Math.abs（p1x-cx））那么，当屏幕不是16:9时，设计效果如何？占据尽可能多的空间并裁剪不合适的内容，适合窗口但增加空白，或拉伸以适应但改变比例？@pawel stretch to fit最好，但如果真的不可能，我认为“覆盖”它的各个部分也会起作用（但我也不确定如何计算这两者），拉伸到适合实际上是最简单的一个