Web开发入门：太空游戏开发第三部分 - 实现元素移动-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00312/article/details/148323396

Web开发入门：太空游戏开发第三部分 - 实现元素移动

Web-Dev-For-Beginners 24 Lessons, 12 Weeks, Get Started as a Web Developer 项目地址: https://gitcode.com/gh_mirrors/we/Web-Dev-For-Beginners

前言

在太空游戏开发系列教程的第三部分中，我们将重点讲解如何让游戏元素动起来。移动是游戏开发中最基础也最重要的功能之一，无论是玩家控制的飞船还是自动移动的敌机，都需要通过编程实现平滑的运动效果。

游戏移动的基本原理

在Canvas中实现物体移动主要基于以下三个核心步骤：

更新对象位置：通过修改对象的x和y坐标值来改变其位置
清空画布：在重绘前需要清除之前绘制的内容
重绘对象：在新的位置重新绘制对象

这种"更新-清除-重绘"的循环形成了动画的基本原理。在游戏中，我们通常以每秒60帧的频率执行这个循环，以产生流畅的动画效果。

移动类型实现

键盘控制移动

实现玩家控制的移动需要监听键盘事件：

window.addEventListener('keyup', (evt) => {
  if (evt.key === 'ArrowUp') {
    hero.y -= 5; // 向上移动
  }
  // 其他方向处理...
});

需要注意的是，某些键（如方向键）会触发浏览器的默认行为（如页面滚动），我们需要阻止这些默认行为：

function preventDefaultForArrowKeys(e) {
  if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].indexOf(e.key) !== -1) {
    e.preventDefault();
  }
}
window.addEventListener('keydown', preventDefaultForArrowKeys);

自动移动

对于非玩家控制的元素（如敌机），我们可以使用定时器实现自动移动：

class Enemy extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.moveInterval = setInterval(() => {
      this.y += 2; // 向下移动
      if(this.y > canvas.height) {
        clearInterval(this.moveInterval); // 移出屏幕后停止
      }
    }, 100); // 每100毫秒移动一次
  }
}

游戏循环优化

游戏循环是游戏开发中的核心概念，它负责在每一帧更新游戏状态并重绘画面。一个基本的游戏循环实现如下：

function gameLoop() {
  // 1. 更新所有游戏对象状态
  updateGameObjects();
  
  // 2. 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 3. 重绘所有游戏对象
  drawGameObjects();
  
  // 4. 请求下一帧
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

使用requestAnimationFrame比setInterval更优，因为它会根据浏览器的刷新率自动调整调用频率，并且会在标签页不可见时暂停，节省系统资源。

面向对象设计

为了更好地组织代码，我们采用面向对象的设计模式：

基础游戏对象类：定义所有游戏对象的公共属性和方法

class GameObject {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 0;
    this.height = 0;
    this.img = null;
  }
  
  draw(ctx) {
    ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
  }
}

派生类：继承基础类并实现特定功能

class Hero extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.speed = 5;
  }
  
  move(direction) {
    // 根据方向更新位置
  }
}

事件发布-订阅模式

为了解耦游戏中的各种交互，我们实现了一个简单的事件系统：

class EventEmitter {
  constructor() {
    this.listeners = {};
  }
  
  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }
  
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(cb => cb(data));
    }
  }
}

// 使用示例
const events = new EventEmitter();
events.on('enemyDestroyed', (enemy) => {
  // 处理敌机被摧毁逻辑
});