HTML5 游戏开发 |无限滚动背景

游戏设计与开发是一个新兴行业。尽管制作 AAA 游戏需要具备游戏引擎、DirectX、OpenGL 等高级知识，但小型 HTML5 视频游戏项目是一个不错的起点。

HTML5 canvas 和 javascript 可用于制作小游戏，同时学习游戏开发的基础知识，如碰撞检测、对象池等。

无限滚动背景

无限滚动的背景是一个重要的工具，在制作无休止的街机游戏（如飞翔的小鸟）或在没有时间或资源手工制作整个关卡的普通平台游戏中是必不可少的。

这个想法是连续绘制相同的图像两次，并在它占据整个屏幕时用第一个图像替换第二个图像，有效地重新启动该过程。

绘制图像

图像应该使带有 2 个图像部分的中间帧是适当的背景，并且分隔线不应该可见。可以应用相同的逻辑来创建无限侧滚动背景。
这里我们以这张空间背景图片为例：

空格键.png

它是使用 MS Paint 制作的。可以使用任何其他软件，如 Photoshop 或 Gimp。

编写代码

HTML：

 
 
 
    Infinitely Scrolling Background

JavaScript：

// inside main_javascript.js
  
var can = document.getElementById('canvas1');
  
// The 2D Context for the HTML canvas element. It
// provides objects, methods, and properties to draw and
// manipulate graphics on a canvas drawing surface.
var ctx = can.getContext('2d');
  
// canvas width and height
can.width = 600;
can.height = 600;
  
// create an image element
var img = new Image();
  
// specify the image source relative to the html or js file
// when the image is in the same directory as the file
// only the file name is required:
img.src = "spacebg.png";
  
// window.onload is an event that occurs when all the assets
// have been successfully loaded( in this case only the spacebg.png)
window.onload = function() {
    // the initial image height
    var imgHeight = 0;
  
    // the scroll speed
    // an important thing to ensure here is that can.height
    // is divisible by scrollSpeed
    var scrollSpeed = 10;
  
    // this is the primary animation loop that is called 60 times
    // per second
    function loop()
    {
        // draw image 1
        ctx.drawImage(img, 0, imgHeight);
  
        // draw image 2
        ctx.drawImage(img, 0, imgHeight - can.height);
  
        // update image height
        imgHeight += scrollSpeed;
  
        // reseting the images when the first image entirely exits the screen
        if (imgHeight == can.height)
            imgHeight = 0;
  
        // this function creates a 60fps animation by scheduling a
        // loop function call before the
        // next redraw every time it is called
        window.requestAnimationFrame(loop);
    }
  
    // this initiates the animation by calling the loop function
    // for the first time
    loop();
  
}

方法和事件

getContext(‘2d’) ： HTML5 canvas标签用于通过脚本（通常是 JavaScript）绘制图形。
但是， canvas元素没有自己的绘图能力（它只是图形的容器）——您必须使用脚本来实际绘制图形。
getContext()方法返回一个对象，该对象提供在画布上绘制的方法和属性。
句法：
```
var ctx = document.getElementbyId("canvasid").getContext('2d');
```
getContext(“2d”)对象可用于在画布上绘制文本、线条、框、圆等。
window.onload ：当一个对象被加载时， onload事件发生。它通常在 javascript 中用于在加载资产后触发函数。
句法：
```
object.onload = function() { /*myScript*/ };
```
window.onload专门发生在所有资产成功加载时，因此大多数 javascript 动画和游戏渲染代码通常完全写在window.onload触发的函数，以避免在图像之前调用drawImage()函数等问题已加载。
（尝试使用较重的图像并在window.onload= 函数 (){..}之外调用drawImage()函数）

它还可以用于检查访问者的浏览器类型和浏览器版本，并根据信息加载正确版本的网页。
window.requestAnimationFrame() ： window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法将回调作为要在重绘之前调用的参数。
只要您准备好在屏幕上更新动画，就应该调用此方法。这将要求在浏览器执行下一次重绘之前调用您的动画函数。回调的次数通常为每秒 60 次，但通常与 W3C 建议的大多数 Web 浏览器中的显示刷新率相匹配。
句法：
```
window.requestAnimationFrame(callback_function);
```
callback_funtion 传递了一个参数，一个 DOMHighResTimeStamp，它指示 requestAnimationFrame() 排队的回调开始触发的当前时间。

注意：如果您想在下一次重绘时为另一帧设置动画，您的回调例程本身必须调用 requestAnimationFrame()。

最终动画
打开 html 文件时，最终的画布动画应如下所示：

https://media.geeksforgeeks.org/wp-content/uploads/2018-05-14-12-03-12.mp4