https://developer.mozilla.org/zh-CN/docs/Games 的学习案例

游戏开发

[toc]

一. 序言

得益于JavaScript实时编译技术性能的大幅提升，以及新开放的API,开发基于HTML5的游戏更加容易.

1 功能与对应的技术

浏览器web平台实现的功能与对应的技术:

功能	技术
音频	`Web Audio API`
图形	`WebGL (OpenGL ES 2.0)`
输入	`Touch events`, `Gamepad API`, `设备传感器`, `WebRTC`,`Full Screen API`, `Pointer Lock API`
语言	`JavaScript` (或是`C/C++`使用`Emscripten`来编译成`JavaScript`)
网络	`WebRTC`和/或`WebSockets`
存储	`IndexedDB`或是 “云(存储)”
`Web`	`HTML`, `CSS`, `SVG`,`Social API`(还有其他很多很多东西！)

2 游戏结构与工作流程

2.1 呈现\接受\解析\计算\重复

每个视频游戏的目标是向用户呈现一个场景,接受用户的输入,将输入解析成动作信息,并计算这些动作在场景中的变化,游戏场景是不断重复的,直到有终止游戏的信号出现.

有一些游戏是通过用户输入来驱动游戏循环的,通过输入来判断下一个要呈现的游戏场景,如: 找不同游戏

有一些游戏是控制每个时间点,每一帧都遍历游戏逻辑,实现呈现场景状态.

2.2 构建一个游戏循环

游戏场景是循环渲染的结果,在循环过程中响应事件回调函数,处理用户输入事件.window.requestAnimationFrame()回调调用函数本身可以形成循环.

window.main = function(){
  window.requestAnimationFrame(main);
  //无论你的主循环需要做什么
};
main(); //开始循环

上面的程序中出现了两个问题:

main()函数污染了window对象
没有提供停止循环的方法

第一个问题可以使用立即调用的函数表达式(IIFE)创建创建游戏循环.第二个问题可以创建一个Game主体对象,保存requestAnimationFrame返回值stopKey,需要停止循环时,调用window.cancelAnimationFrame()方法,并传入stopKey.

;(function(){
  function main(){
    Game.stopKey = window.requestAnimationFrame(main);
    //你的主循环内容
  }
  main(); //开始循环
})();

requestAnimationFrame方法会给回调函数传入一个精确到千分之一毫秒的事件对象DOMHighResTimeStamp,用来记录循环时间.

;(function(){
    Game = {}
    function main(tFrame) {
        Game.stopKey = requestAnimationFrame(main)
        console.log(tFrame)
    }
    main()
})();

每帧的工作时间

;(function(){
    function init() {
        Game = {
            tickLength: 16,                 // 20Hz
            lastTick: performance.now(),    // 最后更新时间
            stopKey: 0
        }
    }
    function updateBatch(tickNum) {
        for(let i = 0; i < tickNum; i++) {
            Game.lastTick = Game.lastTick + Game.tickLength
            update(Game.lastTick)
        }
    }
    function update(lastTick) {
        console.log('update: ' + lastTick)
    }
    function render(tFrame) {
    }
    function main(tFrame) {
        Game.stopKey = requestAnimationFrame(main)
        let nextTick = Game.lastTick + Game.tickLength
        let tickNum = 0
        /*
        console.log('tFrame: ' + tFrame)
        console.log('Game.lastTick: ' + Game.lastTick)
        console.log('nextTick: ' + nextTick)
        */
        if (tFrame > nextTick) {
            let sinceTick = tFrame - Game.lastTick
            tickNum = Math.floor((tFrame - Game.lastTick) / Game.tickLength)
        }
//        console.log('tFrame: ' + tFrame)
//        console.log('now: ' + performance.now())
        updateBatch(tickNum)
        render(tFrame)
        Game.lastTick = tFrame
    }
    init()
    main()
})();

二. 游戏开发技术

1 Canvas

<canvas>是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

<canvas>标签
```
  <canvas id="canvas"></canvas>
```

js获取canvas对象以及上下文(context)

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

根据上下文(context)绘制图像

  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 100, 100);

1.1 基本用法

1.1.1 canvas标签

<canvas> 标签只有两个属性 —— width和height,默认值分别为300px和150px,用来定义画布的大小.

如果浏览器不支持canvas标签,会显示canvas标签的内部元素,闭合标签</canvas>不能省略.

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

1.1.2 context渲染上下文

<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容

通过getContext()方法可以获取画布的context,2D渲染上下文需要传入参数'2d'.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

为了防止浏览器不支持canvas标签而获取context失败,需要在获取context之气那检查支持性

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

模板:

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

1.2 绘制图形

Canvas坐标系是从左往右为x轴正轴,从上到下是y轴正轴.

1.2.1 矩形

填充矩形
```
 context.fillRect(x, y, width, height)
```

矩形边框

 context.strokeRect(x, y, width, height)

清除矩形区域
```
 context.clearRect(x, y, width, height)
```

1.2.2 路径

路径是由许多子路径构成的,所有子路径存放在一个列表中,当调用beginPath()方法时,清空列表,重新绘制路径.

开始路径
```
 context.beginPath()
```
移动笔触,设置起始位置
```
 context.moveTo(x, y)
```

绘制路径

线
```
  context.lineTo(x, y)
```

圆弧

  // x, y: 位置
  // r: 半径
  // startRadian: 起点弧度
  // endRadian: 终点弧度
  // anticlockwise: 是否顺时针,默认true
  context.arc(x, y, r, startRadian, endRadian, anticlockwise)
  // 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点
  context.arcTo(x1, y1, x2, y2, r)

贝塞尔曲线

二次贝塞尔曲线

  // cp1x, cp1y: 控制点
  // x, y: 结束点
  context.quadraticCurveTo(cp1x, cp1y, x, y)

三次贝塞尔曲线

  // cp1x, cp1y: 第一控制点
  // cp2x, cp2y: 第二控制点
  // x, y: 结束点
  context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

矩形
```
  context.rect(x, y, width, height)
```

闭合路径,路径首尾连接
```
 context.closePath()
```
绘制路径
- 绘制边框
```
  context.stroke()
```
- 填充图形
```
  context.fille()
```

Path2D对象

 let path = new Path2D
 path.rect(200, 100, 100, 50)
 path.moveTo(250, 100)
 path.arc(250, 125, 25, - Math.PI / 2, Math.PI / 2)
 path.bezierCurveTo(237.5, 112.5, 262.5, 137.5, 250, 100)
 context.stroke(path)

1.2.3 色彩

context有两种色彩属性:

fillStyle: 填充颜色
strokeStyle: 边框颜色

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

参考

Canvas 绘图模糊问题解析