4、泡泡射击游戏开发：从界面搭建到精灵动画实现

原创于 2025-10-01 09:11:22 发布 · 26 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#泡泡射击游戏 #JavaScript #HTML

HTML5游戏开发实战专栏收录该内容

17 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

泡泡射击游戏开发：从界面搭建到精灵动画实现

1. 用户界面与显示脚本

首先，我们要创建一个类来处理用户界面和一些页面显示功能。在 _js 文件夹中创建一个名为 ui.js 的新文件，并添加以下代码：

var BubbleShoot = window.BubbleShoot || {};
BubbleShoot.ui = (function($){
  var ui = {
    init : function(){
    },
    hideDialog : function(){
      $(".dialog").fadeOut(300);
    }
  };
  return ui;
})(jQuery);

这段代码中， UI 对象遵循与之前 Game 类相同的模式。 hideDialog 函数使用了简单的 jQuery 代码，使所有带有 dialog CSS类的HTML元素淡出。与 Game 类模式的结构差异在于，我们不是创建一个 ui 类，而是创建一个单一对象并为其附加方法，这种结构类似于其他语言中静态类的使用方式。

为了演示即使函数执行时作用域也能保留，我们可以在 innerMyVar 函数中添加一个超时：