JS教程之使用 P5.js 构建一个贪吃蛇游戏(教程含源码)
2023-09-11 14:18:47 时间
回想我的编码之旅的开始,我记得我相信一个新手无法编写整个游戏。“实时更新”、用户输入和游戏处理的纯粹想法让我相信我需要数年时间才能最终达到游戏开发的水平。
好吧,我猜,犯错是人的事。在本文中,我将向您展示如何编写您的第一个游戏,以及为什么没有理由害怕它。如果您对阅读全文不感兴趣,请查看成品。
Snake,那又是什么?
让我们先快速解释一下我们将要创建的游戏:Snake。它绝对是 70 年代的经典之作,但总而言之,对于所有没有听说过它的孩子来说,它是免费的、有趣的,而且会让你很紧张。
基本上,Fortnite 适合老年人。我第一次接触这款游戏是因为它曾经预装在我们的翻盖手机上。每当您不小心打开浏览器并上网两秒钟(感觉更像十年)时,您的内心就会沸腾恐慌,该游戏非常适合让自己平静下来。你们中的一些人可能还记得那种感觉。
无论如何,游戏的目的是让你用键盘上的箭头键控制蛇。如果蛇撞到边缘或自己的身体,游戏就结束了。通过收集随机放置在游戏板上的苹果,可以种植。
让编码开始
设置
首先,我们将使用样板文件(在文章底部)来启动我们的项目。样板文件几乎是一个模板,负责处理我们需要的文件夹结构和文件引用。它还包括 P5.js,这是一个易于使用的 JavaScript 库,拥有庞大的社区,非常适合使用它创建游戏和可视化。我也认为它是开始编码的理想选择。
布局和设计
在编写任何游戏逻辑之前,我总是建议您创建一个基本布局并为其添加一些样式。大多数人反对这种方法,会先编写 JavaScript 代码,但设计优先方法有一个很大的优势&#
相关文章
- Vue.js 渲染简写样式存在的问题
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(JQuery.js)点赞按钮动画
- [转载]js正则表达式/replace替换变量方法
- Node.js模块封装及使用
- js-BOM操作
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Tools] Create a Simple CLI Tool in Node.js with CAC
- [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js
- 浅谈js的数字格式
- [CLI] Create a Single-Command Node.js CLI with Oclif, TypeScript and Yarn Workspaces
- JS对象类型的确定
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- 华为OD机试 - 数字加减游戏(Java & JS & Python)
- web版拳皇,使用html,css,js来制作一款拳皇游戏
- 前端js 实现文件下载
- JS:crypto-js模块实现数据加密解密
- JS:crypto-js实现AES加密解密
- linux下安装node.js
- 利用js_API 运行对html文档元素的属性的CRUD操作
- html + css + js使用HBuilder开发工具做2048益智游戏