16、探索 JavaScript 游戏开发：从动态 HTML 到精灵动画

探索 JavaScript 游戏开发：从动态 HTML 到精灵动画

1. 动态 HTML 与潜行潜艇游戏

在 JavaScript 游戏开发中，动态 HTML 是一个重要的基础。以潜行潜艇游戏为例，我们可以看到如何运用动态 HTML 实现元素移动、声音播放等功能。

在游戏中，潜艇的移动通过更新 currentRow 和 currentCol 变量，并改变潜艇图形的位置来实现。以下是相关代码：

document.all.sub.style.pixelLeft += dx;
document.all.sub.style.pixelTop += dy;

游戏还会检查潜艇是否到达开阔海域，如果是，玩家获胜，游戏重置：

if (currentCol > 10) {
    playSound("dive");
    alert("You Win!!!");
    init();
}

同时，游戏会检查当前单元格是否有船只，如果有，播放相应声音，当被击中次数达到 3 次时，游戏结束：

if (grid[currentRow][currentCol] == 1) {
    playSound("ping");
    numHits++;
    if (numHits >= 3) {