Puzzle-60 |碰撞之星

简介

Puzzle-60 |碰撞之星 是一个基于 HTML、CSS、JavaScript 技术开发的益智小游戏。该游戏的目标是通过控制小球避开障碍物并获得星星，直到所有星星都被收集到为止。

如何玩

1. 使用方向键（↑、↓、←、→）或 WASD 控制小球的运动方向；
2. 小球碰到墙壁或障碍物会导致失败，需要重新开始；
3. 收集所有的星星，即可进入下一关卡；
4. 获得越多的星星，得分越高。

技术栈

• HTML
• CSS
• JavaScript
• Canvas 2D API

代码示例

// 初始化游戏
function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

  //初始化玩家和障碍物
  player = new Player();
  obstacles = [];
  for (var i = 0; i < obstacleCount; i++) {
    obstacles.push(new Obstacle());
  }

  // 监听键盘事件
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 37 || e.keyCode == 65) {
      player.moveLeft();
    } else if (e.keyCode == 38 || e.keyCode == 87) {
      player.moveUp();
    } else if (e.keyCode == 39 || e.keyCode == 68) {
      player.moveRight();
    } else if (e.keyCode == 40 || e.keyCode == 83) {
      player.moveDown();
    }
  });

  // 设置循环
  setInterval(gameLoop, 50);
}