Hilo 开发 HTML5 小游戏——踩过的坑

2024-01-15 15:55:52

微信内横竖屏切换

第一次开发小游戏，使用的是 Hilo 框架。由于项目开发时间比较紧张，对游戏和 Canvas 都没有了解过。虽然代码写得不好，但还是记录下踩过的坑！

本文以碎碎念的方式撰写，并不深入，若有写错的地方，希望大家能不吝赐教。

游戏是一款微信内的横屏游戏。如果强制横屏，提示用户去控制横竖屏开关并不友好。因此，需要采用其他方法来实现横屏。

首先，需要在游戏的主 HTML 文件中添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这段代码的作用是将游戏的视口宽度设置为设备的宽度，初始缩放比例和最大缩放比例都设置为 1，并禁止用户缩放。

然后，需要在游戏的 CSS 文件中添加以下代码：

body {
  width: 100%;
  height: 100%;
}

#gameCanvas {
  width: 100%;
  height: 100%;
}

这段代码的作用是将游戏的画布宽度和高度都设置为 100%，以确保游戏能够全屏显示。

Canvas 中的资源加载

在 Canvas 中加载资源时，需要特别注意以下几点：

资源的路径必须正确。
资源必须是支持的格式。
资源必须完全加载完成才能使用。

如果资源的路径不正确，则无法加载资源。如果资源的格式不支持，则无法正确显示资源。如果资源没有完全加载完成，则可能导致游戏出现错误。

为了确保资源能够正确加载，可以在游戏的主脚本文件中添加以下代码：

const loader = new Hilo.LoadQueue();

loader.add({
  id: 'image1',
  src: 'images/image1.png'
});

loader.add({
  id: 'image2',
  src: 'images/image2.png'
});

loader.add({
  id: 'sound1',
  src: 'sounds/sound1.mp3'
});

loader.on('complete', function() {
  // 资源加载完成，可以开始游戏了
});

loader.start();

这段代码的作用是创建一个加载队列，并向加载队列中添加需要加载的资源。当加载队列中的所有资源都加载完成时，就会触发 complete 事件。在 complete 事件的处理函数中，可以开始游戏。

Canvas 中的点击事件

在 Canvas 中处理点击事件时，需要特别注意以下几点：

点击事件只能在画布元素上触发。
点击事件只能在画布元素的可见区域内触发。
点击事件只能由鼠标或触控笔触发。

如果点击事件不在画布元素上触发，则无法捕获到点击事件。如果点击事件不在画布元素的可见区域内触发，则无法捕获到点击事件。如果点击事件不是由鼠标或触控笔触发，则无法捕获到点击事件。

为了确保能够捕获到点击事件，可以在游戏的主脚本文件中添加以下代码：

const canvas = document.getElementById('gameCanvas');

canvas.addEventListener('click', function(e) {
  // 点击事件处理函数
});

这段代码的作用是为画布元素添加一个点击事件监听器。当画布元素被点击时，就会触发点击事件监听器中的函数。在点击事件监听器的函数中，可以处理点击事件。

游戏的暂停和继续

在游戏中，需要提供暂停和继续的功能。暂停功能可以使游戏暂时停止，继续功能可以使游戏继续运行。

为了实现游戏的暂停和继续，可以在游戏的主脚本文件中添加以下代码：

let isPaused = false;

function pauseGame() {
  isPaused = true;
}

function resumeGame() {
  isPaused = false;
}

// 游戏的主循环
function gameLoop() {
  if (!isPaused) {
    // 更新游戏状态
    // 渲染游戏画面
  }

  requestAnimationFrame(gameLoop);
}

gameLoop();

这段代码的作用是定义一个 isPaused 变量，并定义 pauseGame() 和 resumeGame() 两个函数。pauseGame() 函数的作用是将 isPaused 变量设置为 true，以暂停游戏。resumeGame() 函数的作用是将 isPaused 变量设置为 false，以继续游戏。

在游戏的主循环中，如果 isPaused 变量为 true，则暂停游戏。如果 isPaused 变量为 false，则继续游戏。

以上就是我在使用 Hilo 框架开发 HTML5 小游戏的过程中踩过的坑。希望能够帮助其他开发者避免踩同样的坑。