游戏开发中的测试、上传与迷宫应用实现

# 游戏开发中的测试、上传与迷宫应用实现 ## 1. 游戏测试与上传 ### 1.1 游戏测试要点 在游戏测试方面，游戏的随机特性通常不会对测试产生影响。若需要，可在 `Math.random` 编码后替换为固定选择进行大量测试，之后再移除这些代码并重新测试。对于此类游戏，测试时需确保涵盖正确和错误的猜测，同时要分别点击国家名称和首都名称，检查颜色变化和得分情况。若添加了新回合功能，要保证得分能按预期保留或重置。 需注意，玩家可能会作弊，因为目前没有检查机制防止玩家重复正确操作，可在代码中添加改进，例如在 `facts` 内部数组中添加新元素来标记已正确回答的问题。 ### 1.2 游戏上传与视频处理 基础的 G20 游戏在 HTML 文件中已完成，可从 [www.friendsofed.com/downloads.html](www.friendsofed.com/downloads.html) 下载。带有视频奖励的游戏，需从相关网站下载视频或使用自己的视频。若使用自己的视频，需按以下步骤操作： 1. 创建或获取视频。 2. 假设要支持不同浏览器，需制作不同版本的视频。 3. 将所有文件上传到服务器。 可能需要与服务器工作人员合作，确保正确指定不同视频类型，这涉及到 `htaccess` 文件。由于 HTML5 较新，服务器支持人员可能对网页上展示视频的方式不太熟悉。另外，也可直接使用在线视频，将绝对 URL 作为视频元素中 `source` 元素的 `src` 属性。 ### 1.3 简单问答游戏的技术实现 简单问答游戏使用了以下编程技术和 HTML5 特性： - 使用 `document.createElement`、`document.getElementById` 和 `document.body.appendChild` 在运行时创建 HTML。 - 使用 `addEventListener` 设置鼠标点击事件的处理。 - 通过代码更改 CSS 设置来改变屏幕上对象的颜色。 - 使用数组的数组来存储问答内容。 - 使用 `for` 循环遍历数组。 - 使用 `do-while` 循环随机选择未使用的问题集。 - 使用 `substring` 确定正确匹配。 - 使用 `video` 和 `source` 元素显示不同浏览器可接受格式编码的视频。 ## 2. 迷宫应用开发 ### 2.1 迷宫应用概述 迷宫应用主要涉及响应鼠标事件、计算圆与线的碰撞、响应箭头键、表单输入、使用 `try` 和 `catch` 对本地存储信息进行编码、保存、解码和恢复，以及使用 `join` 和 `split` 进行信息编码和解码，还会使用 `javascript:` 在按钮中调用函数和使用单选按钮。 玩家可以绘制一组墙来组成迷宫，能够保存和加载迷宫，并通过碰撞检测确保不穿过任何墙壁来遍历迷宫。一般编程技术包括使用数组存储画布上需要绘制的所有内容，以及使用单独的数组存储迷宫的墙。由于游戏开始前墙的数量未知，因此需要灵活的处理方式。 ### 2.2 迷宫应用版本 迷宫应用有两种版本： - 单文件版本：所有功能都包含在一个 HTML 文件中，玩家可以构建迷宫、遍历迷宫，并可选择将其保存到本地计算机或恢复之前保存的墙。 - 双文件版本：一个程序用于创建迷宫，另一个文件使用单选按钮为玩家提供特定迷宫的选择。可能一人在某台计算机上创建迷宫，然后让朋友尝试遍历。 ### 2.3 关键技术点 #### 2.3.1 墙和令牌的表示 定义 `Wall` 函数来定义墙对象，`Token` 函数来定义令牌对象。墙的属性包括由鼠标操作指定的起点和终点（`sx`、`sy`、`fx`、`fy`），还有宽度、`strokestyle` 字符串和 `drawAline` 绘制方法。保存墙到本地存储时，仅保存 `sx`、`sy`、`fx` 和 `fy` 值。 令牌通过调用 `Token` 函数定义，类似于多边形记忆游戏中定义的 `Polygon` 函数。`Token` 函数存储令牌的中心（`sx` 和 `sy`）、半径（`rad`）、边数（`n`）、`fillstyle`，并关联 `drawtoken` 绘制方法和 `movetoken` 移动方法。此外，还会立即计算 `angle` 属性为 `(2*Math.PI)/n`。