跳跃吧，猫咪！用代码实现你专属的虚拟猫宠

2024-02-09 19:36:07

在疫情肆虐的时代，很多家庭都养起了猫咪，这些可爱的小家伙为我们的生活带来了无穷的乐趣。然而，工作繁忙时，我们却无法时刻陪伴在它们身边。为了解决这一难题，本文将手把手教你使用代码实现一款跳跳猫小游戏，让你随时随地和虚拟猫咪互动，享受撸猫的乐趣。

打造游戏基础

首先，你需要创建一个新的 Vite 项目，并安装 PixiJS 和 TypeScript。完成后，新建一个名为 index.html 的文件，并粘贴以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <div id="game"></div>
    <script src="index.js"></script>
  </body>
</html>

然后，新建 index.js 文件，并粘贴以下代码：

import { Application, Sprite, Container, Loader } from "pixi.js";

// 创建 PixiJS 应用程序
const app = new Application({
  width: 800,
  height: 600,
});

// 添加画布到文档中
document.getElementById("game").appendChild(app.view);

// 加载猫咪图片
const catTexture = Loader.shared.resources["cat.png"].texture;

// 创建猫咪精灵
const cat = new Sprite(catTexture);
cat.anchor.set(0.5); // 设置锚点为中心
cat.position.set(400, 300); // 设置初始位置

// 创建容器并添加猫咪
const catContainer = new Container();
catContainer.addChild(cat);
app.stage.addChild(catContainer);

// 让猫咪上下跳跃
app.ticker.add(() => {
  catContainer.y += Math.sin(app.ticker.elapsedMS / 100) * 10;
});

添加互动

现在，猫咪已经可以在屏幕上跳跃了，但我们还需要让它可以响应用户的输入。为此，可以添加以下代码：

// 监听鼠标按下事件
app.view.addEventListener("mousedown", (e) => {
  // 计算猫咪跳跃高度
  const jumpHeight = Math.random() * 200 + 100;

  // 创建 Tween 对象并让猫咪跳跃
  TweenMax.to(catContainer, 0.5, {
    y: catContainer.y - jumpHeight,
    ease: Power0.easeNone,
  });
});