AI 助理
备案控制台
开发者社区 云计算 文章 正文

写一个简单的实时互动小游戏

2017-10-17 1562
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在写之前，我们先回顾上一篇文章，从需求、架构、设计、开发上讲述并演示了搭建一个实时通信客户端的过程，并附了图片与视频。 写这篇文章的之前，第一个互动的游戏DEMO已经写好了，先附上截图 ![image.png](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/394256538948caab4c3e5901f4d8d3da.png)

在写之前，我们先回顾上一篇文章，从需求、架构、设计、开发上讲述并演示了搭建一个实时通信客户端的过程，并附了图片与视频。
写这篇文章的之前，第一个互动的游戏DEMO已经写好了，先附上截图
image.png

很奇怪的一张图，别问我画的是啥，这个DEMO就是将2边的动画同步。

研究下代码

核心代码其实很简单

代码结构

image.png

代码结构很简单，和前一篇改动的唯一就是CanvasScene（场景类）。

深入看一看

image.png

红框里的动画是xcode推荐的动画，就是创建无限循环的精灵。
这个精灵我称之为“创建精灵”，因为它从来不实际的渲染，而是做为内存预载，后面的复制它。
看下事件：

image.png

鼠标事件中都有调用 adaptor同步信息到对端。
实际处理本地鼠标方法

image.png

处理同步方法
image.png

看，处理鼠标的三个事件里，都是复杂了“创建精灵”并渲染。
为了区分两边的绘画，在连通时我对颜色做了一个简单处理

image.png

一个简单的多点互动小游戏就搭起来了。
视频地址
http://v.youku.com/v_show/id_XMzA4MTYzMTMxMg==.html?spm=a2h3j.8428770.3416059.1

xiaofei
目录
相关文章
菊头蝙蝠
|
关系型数据库 MySQL 数据库
Linux C/C++ 开发（学习笔记七）：Mysql数据库C/C++编程实现 插入/读取/删除
Linux C/C++ 开发（学习笔记七）：Mysql数据库C/C++编程实现 插入/读取/删除
菊头蝙蝠
500 0
RedEric
|
传感器 小程序
微信小程序新版隐私协议弹窗实现最新版
微信小程序新版隐私协议弹窗实现最新版
RedEric
2833 1
卡尔特斯
UniApp 获取当前页面标题（navigationBarTitleText）
UniApp 获取当前页面标题（navigationBarTitleText）
卡尔特斯
2085 0
c的前世今生
|
传感器 缓存 网络协议
CoAP 协议与 HTTP 协议的区别
CoAP（Constrained Application Protocol）协议是为资源受限的设备设计的轻量级协议，适用于物联网场景。相比HTTP，CoAP具有低功耗、低带宽占用和简单易实现的特点，支持多播通信和无连接的交互模式。
c的前世今生
438 2
chnjames
|
缓存 JavaScript 前端开发
深入理解 Vue 3 的 Composition API 与新特性
本文详细探讨了 Vue 3 中的 Composition API，包括 setup 函数的使用、响应式数据管理（ref、reactive、toRefs 和 toRef）、侦听器（watch 和 watchEffect）以及计算属性（computed）。我们还介绍了自定义 Hooks 的创建与使用，分析了 Vue 2 与 Vue 3 在响应式系统上的重要区别，并概述了组件生命周期钩子、Fragments、Teleport 和 Suspense 等新特性。通过这些内容，读者将能更深入地理解 Vue 3 的设计理念及其在构建现代前端应用中的优势。
chnjames
459 1
深入理解 Vue 3 的 Composition API 与新特性
lqj_本人
|
API UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（透明度设置）
在HarmonyOS 5.0中，ArkTS引入了透明度设置属性`opacity`，允许开发者自定义组件的透明度，从而创建复杂的视觉效果和提升用户体验。本文详细解读了`opacity`属性的用法，并提供了示例代码，展示了如何在不同透明度下展示组件。透明度设置在UI开发中具有多种用途，如创建重叠效果、增强美观性和实现动画效果。
lqj_本人
1107 7
lqj_本人
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（边框设置）
在HarmonyOS 5.0中，ArkTS提供了丰富的边框设置属性，允许开发者自定义组件的边框样式，提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法，并提供了示例代码，展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用，如区分组件、强调重要元素和美化界面。
lqj_本人
1149 6
LeapMay
|
机器学习/深度学习 算法 计算机视觉
NeRF-Pose: A First-Reconstruct-Then-Regress Approach for Weakly-supervised 6D Object Pose Estimation
NeRF-Pose: A First-Reconstruct-Then-Regress Approach for Weakly-supervised 6D Object Pose Estimation
LeapMay
456 0
一颗小树x
|
传感器 机器学习/深度学习 自动驾驶
【多模态融合】CRN 多视角相机与Radar融合 实现3D检测、目标跟踪、BEV分割 ICCV2023
本文介绍使用雷达与多视角相机融合，实现3D目标检测、3D目标跟踪、道路环境BEV分割，它是来自ICCV2023的。CRN，全称是Camera Radar Net，是一个多视角相机-雷达融合框架。 通过融合多视角相机和雷达的特性，生成语义丰富且空间精确的BEV特征图。实现3D物体检测、跟踪和BEV分割任务。
一颗小树x
1612 57
郑小健
|
数据采集 机器学习/深度学习 数据可视化
数据挖掘实战：Python在金融数据分析中的应用案例
Python在金融数据分析中扮演关键角色，用于预测市场趋势和风险管理。本文通过案例展示了使用Python库（如pandas、numpy、matplotlib等）进行数据获取、清洗、分析和建立预测模型，例如计算苹果公司（AAPL）股票的简单移动平均线，以展示基本流程。此示例为更复杂的金融建模奠定了基础。【6月更文挑战第13天】
郑小健
2845 3

热门文章

最新文章

  • 1
    中文大模型体验测评系列（一）
  • 2
    七招教你处理非平衡数据——避免得到一个“假”模型
  • 3
    python web service开发
  • 4
    《Cadence 16.6电路设计与仿真从入门到精通》——1.4 Cadence SPB 16.6的启动　
  • 5
    百度网盘搜索引擎
  • 6
    想在Daydream View上看成人内容，GameLink为你准备好一切
  • 7
    真正实现性能可预期的ECS实例（突发性能实例t5）
  • 8
    一文讲透 RocketMQ 消费者是如何负载均衡的
  • 9
    Silverlight版本的LoadMask
  • 10
    jQuery 常用技巧
  • 1
    springboot自动装配的基本原理
    88
  • 2
    星野“崽崽”大规模下架整改：AI陪伴行业的警示与拐点
    232
  • 3
    Python 3.14 实用技巧：10个让代码更清晰的小改进
    51
  • 4
    如何驯服AI编程
    46
  • 5
    Kali Linux 加入 Windows 域：完整的域渗透测试环境搭建指南
    68
  • 6
    使用 Ansible 自动化部署 Snort3 入侵检测系统：从零到生产环境（RedHat）
    87
  • 7
    我是谁？我从哪来？我要到哪去？——聊聊数据血缘分析的“前世今生”
    86
  • 8
    兄弟别手工点云服务器了：聊聊 IaC 的人间真实与落地指南
    60
  • 9
    别再给我推明星八卦了！——大数据视角下，个性化新闻推荐的“人间真实”优化指南
    48
  • 10
    Vue 3 emit 参数数量不匹配问题深度解析与最佳实践
    45

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、