p5.js实现声音控制警察抓小偷游戏

黑巧

这是一款非常有趣的游戏，玩家扮演警察追捕小偷，通过大声喊话来控制警察的速度，抓住小偷。游戏中，小偷会在棋盘上移动，而警察则会向小偷靠近。如果警察追上小偷，就算警察胜利；如果小偷逃脱到棋盘的最下方，那么小偷胜利。老少皆宜哦 。
一、游戏介绍

1. 玩法指南

点击开始游戏按钮小偷会在棋盘上移动，游戏会调用麦克风，玩家通过大声狂呼乱叫，此时警察则会向小偷靠近，你喊得越大声，警察移动速度越快，当警察追上小偷，就算警察胜利；如果小偷跑到的右下方出口处逃脱，那么小偷胜利。
2.运行效果

游戏体验链接：https://juejin.cn/user/3421335917699335 由于GitHub page的缘故，页面加载可能会慢一点，大家耐心等待哈！记得要同意麦克风的调用权限申请哦。

grapRuningDemo.gif



policeWinDemo.gif



thiefWinDemo.gif

二、用到的JS库

• p5.js 库基于 Processing，是一个 JavaScript 库，可以轻松地创建交互式图形和动态图像。它的核心是使用 HTML5 Canvas 元素来创建图形。p5.js 提供了简单易用的 API，让编写和理解代码变得更加容易。
  
• p5.sound.min.js 是 p5.js 库的音频处理插件，它基于 Web Audio API，可以加载、播放和操纵音频文件。Web Audio API 是 HTML5 中的一项标准，提供了低延迟、高品质的音频处理能力，可以通过 JavaScript 对音频进行混合、变形、过滤等操作。
  

三、游戏开发思路

• 设计游戏规则和界面
  
• 使用p5.js绘制游戏界面和元素，这比自己用原生canvas写迅速多了。
  
• 实现小偷和警察的移动逻辑
  
• 实现通过音量控制警察的速度
  
• 实现胜利逻辑和动画效果
  
• 添加开始游戏和重新开始的按钮
  
• 预加载音乐和图片资源
  

四、待实现的创意玩法

为了增加游戏的趣味性，可以考虑增加更多的道具和障碍物。

• 道具：可以设置一些可以帮助小偷逃脱警察追捕的道具，例如加速药水、隐身衣、烟雾弹等。这些道具可以增加小偷的移动速度、暂时让小偷隐身躲避警察的视线、或者释放烟雾干扰警察的追踪。
  
• 障碍物，可以设置一些可以对小偷和警察造成影响的障碍物，例如路障、警车、人群等。这些障碍物可以阻碍小偷的逃脱，或者让警察无法前进，从而给小偷争取时间。
  

除了增加道具和障碍物，我们还可以增加多种不同的游戏模式，例如多人模式、计时模式等等。

• 多人模式：可以让两个玩家分别扮演小偷和警察，进行对抗。
  
• 计时模式中，可以设置一个时间限制，让警察在规定时间内抓住小偷。
  

还有可以美化页面还有音效、动效等，让游戏更加丰富多彩，让玩家有更多的选择和挑战。
五、代码实现

代码里都有丰富的注释，相信大家可以快速读懂代码，如果我用原生canvas开发，估计工作量会大很多。不过，代码在封装方面还有待提高，除此之外，玩法也还有更多创意有待实现。
各位如果更好玩的实现玩法，不妨把代码fork过去实现，记得评论区告诉我，我期待你的实现。 页面的布局结构相对简单，大家可以到github页面上去阅读源码。页面布局每个人的审美不同，实现的各有千秋，大家着重理js核心代码，页面实现那是三下五除二的。
代码地址：https://juejin.cn/user/3421335917699335

你好朋友们

边撸边过