使用canvas与 声网 Agora 来实现捕鱼（摸鱼）达猫。让我们一起快乐的跟猫一起摸鱼吧！

陈_杨
1,335 阅读3分钟

一起用代码吸猫！本文正在参与【喵星人征文活动】。

前言

今天我们使用canvas来实现捕鱼达猫的游戏，再使用 声网 Agora 来实现世界频道的功能，这也是我第一次使用声网 Agora，让我们来看看它到底好不好用吧。

先看看我们的效果图

Tab-1636131120353.gif

讲这个源码的话比较多，我讲一下大概的游戏规则与实现思路

游戏规则

  1. 初始化一只猫，进入游戏随机地图。
  2. 进入游戏后猫需要在规定的氧气值内捕鱼，捕到不同的鱼种会获取不同的鱼币。
  3. 若捕到水母会出发雷击，减少自己的氧气值。
  4. 氧气值没了游戏就结束，捕到鱼币可以在世界频道中查看自己排名

😏感觉以后掘金的挖矿游戏可以换成捕鱼游戏了，哈哈哈哈

项目结构

|-- 捕鱼达猫
    |-- images (主要用于存放猫咪实例、海底背景、鱼类、道具等)
    |-- media (主要存放各种效果音频)
    |-- c2runtime.js (主要用于绘画整个游戏的功能、以及游戏的规则。两万多行代码)
    |-- data.js (游戏的配置信息，包括图片的索引、音频的索引、鱼游动的规则呀。也是很多代码)
    |-- index.html (主入口)
    |-- index.js (声网 Agora的实例)
    |-- AgoraRTC_N-4.7.2.js (声网 Agora的SDK)

捕鱼达猫的代码有点多，我就不讲了，我会把源码放在码云上。感兴趣的小伙伴可以去看看。主要的是讲一下：声网 Agora 来实现世界频道的功能

快来体验一把！

[捕鱼达猫] (fwx.yzjobs.cn/cat/index.h…)

声网 Agora

第一步 注册

打开声网 Agora的官网，注册很快哈，啪了一声就注册成功了，我还以为声网平台也会跟其他智能AI平台需要先充钱才能用，而声网平台直接送你每个月每月10,000分钟，这就很爽啦、很良心。这给初次使用的人在探索之路过程带来了方便，不会因为时间的限制被迫充钱。好评。

第二步 文档

打开声网的api文档，你会发现也很详细，每个场景、每个使用的api都区分不同平台的使用方式，很详细。官网说兼容性很好，这个我没测，感兴趣的大家可以去测一下。

image.png

我这里主要是web的，所以就直接看web相关的api了，不说那么多了，等等你们还以为我打广告了，哈哈哈哈。

第三步 创建项目，生成api

进入声网控制台创建项目

image.png

填写项目名称与使用场景，最好是用实名认证哈。

创建成功之后就会生成一个appid

image.png

下载web.SDK与使用

上面傻瓜式的步骤弄完之后，来到了最重要的一步了，在项目中使用声网 Agora。首先下载对应场景的SDK，我这里用到的是web音频的SDK，Agora Web SDK直接进入下载即可。下载完成之后就会看到 AgoraRTC_N-4.7.2.js

项目引入SDK并使用声网的api

<script src="./AgoraRTC_N-4.7.2.js"></script>
<script>
var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

var localTracks = {
    videoTrack: null,
    audioTrack: null
};
var remoteUsers = {};
// Agora client options
var options = {
    appid: 'xxxx',
    channel: 'cat',
    uid: null,
    token: null
};

client.join(options.appid, options.channel, options.token || null)
</script>

目前只看到自己加入频道，但是还不知道怎么别人怎么加入自己创建的平台，还有不知道自己的频道有多少人。等我后续在继续了解声网 Agora的api。再继续更新

avatar
文章
阅读
粉丝