pixi 小游戏_手把手教你制作一款小游戏【超好玩！】

想必大家小时候都听说过或玩过4399小游戏(这句话好像暴露了年龄)，在当时电脑不算很普及，且没有那么多网游、大型单机游戏的时代，数量众多且种类丰富的网页小游戏使我们的童年增添了非常多的乐趣。诸如黄金矿工，狂扁小朋友这些耳熟能详的小游戏，在当时都是由Adobe公司下的Flash动画标准来开发的。可在2017年时Adobe公司宣布，出于安全和可靠性的原因，将于2020年年底，也就是今年内正式停止支持Flash。Flash是20多年前诞生多，它曾是开发者们最受青睐的技术之一，被用于开发游戏，播放视频在各大浏览器中，如今已成为时代的眼泪，取而代之的便是HTML5+JavaScript技术。在这里向大家安利一下当今比较热门的前端渲染引擎PixiJS(github收藏30k)，它使用了HTML5+JS+WebGL封装而成，是一个非常强大的2D渲染引擎，可以用十分高效的性能来完成当年Flash所能完成的游戏开发任务。下面，我们便用PixiJS来制作一个简单的网页小游戏。该游戏的玩法很简单，控制我们的角色，躲避怪物，获取宝箱拿到出口处便可获得胜利。步骤1：首先，我们需要制作好游戏所需的图像素材，如下图：

上图中把该小游戏中的所有素材：角色，宝箱，怪物，出口都整合到了一张图中，然后通过一个JSON数据文件(该文件内保存了各个素材的大小和位置)来从图片中获取你想要的素材。

步骤2：在js代码中导入上述的图片和JSON文件。接着调用PixiJS的API，创建一个PixiJS应用，即我们的游戏舞台，再执行setup函数对游戏进行初始化。

步骤3：在setup初始化函数中，创建两个游戏场景，因为游戏分为游戏中的场景和游戏结束时的场景。

根据JSON文件分别提取出图片中的素材，放置到场景一中。

步骤4：循环创建多个怪物在场景一中，并随机赋予它们初始位置和速度，干扰玩家获取宝箱。

步骤5：制作血条，当玩家碰撞到怪物时便会损失一定的血量，血条为空则游戏结束，展示场景二。

步骤6：绑定键盘事件，这里给出了左方向键的实现方式，其他方向同理。

步骤7：做好上述准备后，便调用play函数使游戏开始，该函数将会被每秒执行60次(这得益于webGL强大的性能)，直到游戏结束。

步骤8：在play函数中，主要功能为：(1)监听键盘事件，改变玩家的位置。

(2)监听怪物的位置变化，当怪物碰撞到墙时会直接朝着反方向移动。

(3)碰撞检测：①　检测玩家是否碰撞到怪物。碰到则临时改变透明度并减少血量，当血量小于0时则游戏结束

②　玩家是否碰撞到宝箱。当玩家碰到宝箱时，宝箱将跟随玩家一起移动。

③　宝箱是否碰撞到出口。当宝箱碰到出口，即玩家带着宝箱到出口时，游戏结束。

完成了上面的代码，一款简单的网页小游戏就做好了，最终效果如下图所示。大家是不是感觉很简单～该游戏demo出自PixiJS的官方教程(https://github.com/Zainking/learningPixi#casestudy)，感兴趣的小伙伴们可以去pixi官网查看更多高级炫酷的demo。只要发挥你的想象力，便可以制作出许多有意思的游戏噢~作者：史方旺编辑：詹思璇

技术09期：数据安全之加密与实现

本周回顾：首款无硬件的云电脑诞生了；拒绝被欺诈！支付宝推出反欺诈AI客服

想学习更多技术内容

别忘了关注普适极客

pixi 小游戏_手把手教你制作一款小游戏【超好玩！】相关推荐

python如何编游戏_手把手教你用python写游戏
引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,项目来自 ...
如何用python开发游戏_手把手教你用Python完成一个控制台小游戏-阿里云开发者社区...
很多人想学Python程序设计或者已经了解过一点Python程序设计基础,却没办法开发出一个项目. 今天,通过演示一个简单的控制台小游戏制作,手把手教你如何用Python编写一个游戏程序,即便你是个新 ...
flash制作游戏_如何使用Flash制作简单的装扮游戏
flash制作游戏在这里,我将向您展示如何使用Flash制作简单的装扮游戏. 画出需要打扮的人. 在衣服将要放置的地方新建一个图层. 画衣服. 我建议在人身上画衣服,以确保它们能正确地合身,所以看起 ...
情人节到了，手把手教你制作一款像开了挂一样有效的H5表白软件
明天就是情人节了,据报道,中国未来30年将有约3000万适婚男性过不上这节.那么如何脱单,如何表白,如何开口向心仪已久的女生表白这个是困扰大部分男性朋友的致命问题. 所以我就跟大家分享下一个百试百灵的 ...
拾起童年的回忆 - 手把手教你制作飞机大战小游戏
拾起童年的回忆最记得小学时,每逢放学便会打开电视机,接上红白机/小霸王,插上一张游戏卡带,魂斗罗.超级玛丽.冒险岛.足球小将,拳王.飞机大战.雪人兄弟--,这些游戏到现在还是如数家珍,一张游戏卡可以 ...
动态添加跨行表格_手把手教你制作Excel动态统计表格，主管看了都会竖起大拇指！-Office教程...
教程领到手,学习不用愁!领 ↑↑↑ 还有朋友不知道知识兔吗?知识兔就是下载考试资料|软件|教程|素材的网站,建议去搜索引擎搜索知识兔!知识兔是课程网站吗?知识兔有什么课程?知识兔可以兔费领取下载课程, ...
npm收录了哪些包_手把手教你制作一个小而美丽的 npm 包并发布
第1步:npm账户你需要一个 npm 账户,如果米有,注册地址是:npmjs.com/signup 第2步:登录进入你自己电脑的终端(cmd)并输入: npm adduser 也可以使用以下命令: ...
手把手教你制作自己的小程序
(小程序开发全套视频教程源码打包放到最后) 做一个自己的小程序共有四个步骤: 1.注册微信小程序. 2.制作小程序. 3.上传并提交审核. 4.审核通过,小程序上线. 简单来讲即四步操作法: 注册-- ...
stm32g4 下载算法_手把手教你制作基于IAR、STM32H7的下载算法
本文由作者『Lucas』原创并授权发布,地址: https://blog.csdn.net/lin_duo/article/details/110754189下载算法对于大部分工程师来说,只需要会使用 ...

pixi 小游戏_手把手教你制作一款小游戏【超好玩！】

pixi 小游戏_手把手教你制作一款小游戏【超好玩！】相关推荐

最新文章

热门文章