20、深入探索 HTML5 游戏开发与高级特性

深入探索 HTML5 游戏开发与高级特性

1. 贪吃蛇游戏的优化与 HTML5 存储

在游戏开发中，贪吃蛇游戏是一个经典案例。为了让游戏更加吸引人，我们可以利用 HTML5 的一些特性进行优化。例如，使用 canvas 元素绘制游戏画面时，我们可以通过以下代码显示一系列截图：

// Display a list of images to the user
function drawScreenShots(imgs) {
  var panel = document.querySelector("#screenShots");
  for (var i = 0, len = imgs.length; i < len; i++) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = imgs[i].src;
    a.appendChild(imgs[i]);
    panel.appendChild(a);
  }
}

在绘制贪吃蛇和水果时， canvas 中除了代表它们的点之外的其他点都会被忽略，这会生成一个透明图像。如果想要图像有实际的背景颜色，可以在绘制蛇和水果之前调用 fillRect() 方法覆盖整个 canvas 表面，或者遍历渲染上下文中 pixelData 数组的每个像素，并将 alpha 通道设置为 100% 不透