您可能已经看到，在某些游戏中，移动的背景与对角线有关。看一下Megaman x Storm Eagle Stage https://youtu.be/Wfm3ZvcxOKQ?t=1m33s的示例，云从上到下，从右到左（对角线）移动。我需要使用CSS3或任何种类的javascript和图块纹理来达到相同的效果。
在哪里可以找到指导如何制作该教程的教程？我找到了一些，但是它们是用于创建动态对象的。
嗨，这可以使用基本的javascript或任何javascript库解决。我将给出一个小的工作示例，或者您可以跳到此js小提琴https://jsfiddle.net/lesshardtofind/a2Lx51xy/
在您的html中，您只需要一个元素。
<div class='background'></div>
该课程供我们选择。首先用一些css制作它，这样我们就可以看到图片了。
.background{
background-image: url('yourImageUrl.com/image.png');
height: 500px;
width: 500px;
}
因此，背景图片会应用您的纹理，高度和宽度，从而会应用值，以便您可以看到div，否则它将为0，并且内部没有实际标记。
现在是有趣的部分。JavaScript可以获取此div元素并应用样式。通常，我会在jQuery中执行此操作，但是由于您只指定了javaScript，因此我将保留外部库。
var x = 0;
var y = 0;
var xSpeed = 5;
var ySpeed = 5;
var interval = setInterval(function(){
var xVal = x + 'px';
var yVal = y + 'px';
var bg = document.getElementsByClassName('background')[0].style.backgroundPosition = xVal + " " + yVal;
x-=xSpeed;
y+=ySpeed;
}, 100);
为了说明这一点，我将设置为背景x，y并且将背景坐标从零开始。最好设置默认值，否则将引发未定义的行为。xSpeed和ySpeed只是变量，您可以更改加速或减速动画的值。interval是存储该setInterval函数设置的间隔的变量。setInterval接受一个函数和一个时间值作为参数。该函数将在每个时间间隔被调用，该时间是等待再次调用该函数所需的时间。
document.getElementsByClassname('background')返回我使用[0]索引访问的数组。然后style允许您将值应用于backgroundPosition。请注意，我在每个数字的末尾应用了“ px”，因此它们将是一个字符串，例如“ 3px 5px”，这是预期的样子。
然后使用-=和施加速度+=。由于dom从0开始，在浏览器的左上角为0，因此添加到Y会向下移动，从X减去会向左移动。
最后，这是可行的，因为默认情况下将背景设置为重复，因此图像将继续向下和向左漂移。如果提供平铺图像，则在一个重复和下一个重复之间将看不到接缝。
编辑：添加全屏
您可以通过确保其父对象也具有设置的宽度和高度来将全屏添加到您的子对象。因此，将您的CSS更改为。
body, html{
height: 100%;
width: 100%;
}
.background{
background-image: url('http://bgfons.com/upload/sky_texture1998.jpg');
height: 100%;
width: 100%;
border: 1px solid red;
}
在%高度上，您需要一个父节点来继承高度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句