【开发日志】网页版定轨下落式音游开发笔记

It has been 675 days since the last update, the content of the article may be outdated.

本文为网页版定轨下落式音游开发笔记，初衷是记录在开发过程中的一些技术问题，类似老船长的航海日志，希望未来能看见到岸的那一天。
本项目由ChatGPT作为技术顾问，Niord负责主要推进。

Javascript的键盘事件监听器

在 JavaScript 中，可以使用 addEventListener 方法来监听键盘事件。
举个例子，如果要在按下 A 键时打印一条消息，可以这样写：

plaintext

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 65) {
    console.log("A 键被按下了！");
  }
});

还可以使用 keyup 事件监听键盘抬起事件，以及 keypress 事件监听键盘敲击事件。

HTML5的Canvas元素

HTML5 中的 canvas 元素是一个可以使用 JavaScript 在浏览器中绘制图形的元素。
使用 canvas 元素需要在 HTML 文档中添加一个 canvas 元素，然后通过 JavaScript 来访问这个元素并绘制图形。
例如，下面是一个简单的 canvas 元素：

plaintext

1	<canvas id="myCanvas" width="200" height="100"></canvas>

这段代码会创建一个 canvas 元素，并设置它的宽度为 200 像素，高度为 100 像素。
然后，可以使用 JavaScript 来访问这个 canvas 元素并绘制图形。例如，下面的代码会在 canvas 中绘制一条直线：

plaintext

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.moveTo(0, 0);
context.lineTo(200, 100);
context.stroke();

在 canvas 元素中绘制了一条从 (0, 0) 到 (200, 100) 的直线。

canvas 元素还可以用来显示图片、视频等多媒体内容，或者将 canvas 元素作为图像的来源，从而实现图像处理和转换等功能。

AJAX加载谱面文件

使用 AJAX（Asynchronous JavaScript and XML）可以在不重新加载整个页面的情况下，使用 JavaScript 向服务器发送请求并获取响应数据。这样就可以在页面上更新部分内容，而不需要重新加载整个页面。
使用 AJAX 的一个常见例子就是在网页中使用搜索框时，可以在输入搜索关键词时实时地将关键词发送到服务器进行搜索，并在搜索结果返回时更新页面上的搜索结果。
AJAX 的实现需要使用 JavaScript 的 XMLHttpRequest 对象，以及一些服务器端的技术，如 PHP、Java、ASP.NET 等。
下面是一个简单的示例代码，展示了如何使用 AJAX 加载音乐谱面文件：

plaintext

var request = new XMLHttpRequest();
request.open("GET", "music.json", true);
request.responseType = "json";
request.onload = function() {
  var musicData = request.response;
  // 在这里处理谱面文件
};
request.send();

这段代码中，首先创建了一个 XMLHttpRequest 对象，然后使用 open 方法初始化 HTTP 请求，设置请求方法为 GET，请求地址为 “music.json”，并设置为异步请求。
然后设置 responseType 属性为 “json”，表示期望响应数据为 JSON 格式。
接下来，设置 onload 属性为一个回调函数，在响应数据返回时执行。在回调函数中，使用 response 属性获取响应数据，并将其赋值给变量 musicData。
最后，使用 send 方法发送请求。

这段代码的意思是：使用 AJAX 发送一个 GET 请求，获取 “music.json” 文件，并在响应数据返回时将其转化为 JSON 格式并保存在变量 musicData 中。

所以，简单来说，使用 AJAX 加载音乐谱面文件的流程是：
1.在服务器端准备一个 JSON 格式的音乐谱面文件。
2.使用 JavaScript 的 XMLHttpRequest 对象发送 HTTP 请求，获取该文件。
3.在响应数据返回时，将其自动转化为 JSON 格式并保存在变量中。
4.使用保存的谱面数据进行游戏的绘制等操作。

如何实现从变量musicdata到音符的显示

下面是一个简单的示例代码，展示了如何实现从 musicData 到实际 note 显示并下落的过程：

plaintext

// 定义一个函数来更新游戏界面
function updateGame() {
  // 遍历 musicData 中的每一个 note
  for (var i = 0; i < musicData.length; i++) {
    var note = musicData[i];
    // 根据 note 的数据来绘制音符
    drawNote(note.x, note.y, note.color);
    // 使音符下落
    note.y += note.speed;
    // 如果音符超出了界面，则从 musicData 中移除它
    if (note.y > canvas.height) {
      musicData.splice(i, 1);
      i--;
    }
  }
  // 重复执行 updateGame 函数，以持续更新游戏界面
  requestAnimationFrame(updateGame);
}

// 调用 updateGame 函数开始更新游戏界面
updateGame();

这段代码中，首先定义了一个函数 updateGame，用于更新游戏界面。
在函数中，使用循环遍历 musicData 中的每一个 note，并根据 note 的数据来绘制音符。这里使用的是一个名为 drawNote 的函数，你需要自己定义这个函数来绘制音符。
然后，使用 note.y += note.speed 将音符下落，使用 if 语句判断音符是否超出了界面，如果是则使用 splice 方法从 musicData 中移除该音符。
最后，使用 requestAnimationFrame 方法重复执行 updateGame 函数，以持续更新游戏界面。
这段代码的意思是：每一帧都遍历 musicData 中的所有音符，根据音符的数据绘制音符，然后使其下落，如果超出界面则从 musicData 中移除。并且持续不断地执行这个过程，以更新游戏界面。
这样就可以实现从 musicData 到实际 note 显示并下落的过程。