html5小游戏 typescript,使用TypeScript和Canvas编写移动端贪吃蛇大作战游戏
基本介绍
一款移动端贪吃蛇大作战游戏。(只支持移动端)
这是一个临近 deadline 的课设项目,为了方便地使用TS,我直接使用angular-cli生成了TypeScript的项目结构。如果你有好用的TS项目生成器(请推荐给我),使用TypeScript + ES6即可,不推荐使用angular,体积过于庞大。
在几天时间内开发出了单人版和多人版,代码不那么美观,请谅解~
使用node实现的多人游戏源码不忍直视,故不开源。如果你有充足的时间和精力,欢迎扩展出多人游戏版本~
玩法
游戏的玩法和贪吃蛇大作战基本一致。左侧摇杆控制方向,右侧按钮加速。当你控制的贪吃蛇头部碰撞到墙壁或其他贪吃蛇时,Gameover。
每一段时间会自动生成傻瓜式的AI,它只能随机转向和躲避墙壁。
使用了touch事件,不支持PC端。
请使用移动设备访问 http://verysao.com/dragon
游戏截图
本地运行
npm i // 安装依赖
ng serve -p 0 // 本地启动
Build
ng build –-prod –-aot --env=prod
文件结构
主要代码都位于src/app内,以下是src/app文件夹内的目录结构及文件说明。
.
|____app.component.html
|____gameover
| |____gameover.component.scss
| |____gameover.component.html
| |____gameover.component.ts 游戏结束弹窗
| |____gameover.component.spec.ts
|____room
| |____room.component.scss
| |____room.component.ts 多人模式下的房间(未开发)
| |____room.component.html
| |____room.component.spec.ts
|____app.component.scss
|____app.component.spec.ts
|____app.module.ts
|____app.component.ts 游戏核心逻辑、渲染主画面
|____speed-up
| |____speed-up.component.html
| |____speed-up.component.scss
| |____speed-up.component.ts 加速按钮
| |____speed-up.component.spec.ts
|____menu
| |____menu.component.ts 主菜单
| |____menu.component.spec.ts
| |____menu.component.html
| |____menu.component.scss
|____joystick
| |____joystick.component.spec.ts
| |____joystick.component.scss
| |____joystick.component.html
| |____joystick.component.ts 摇杆按钮
|____rank
| |____rank.component.html
| |____rank.component.spec.ts
| |____rank.component.scss
| |____rank.component.ts 积分榜
|____factory 类
| |____speedUp.ts 加速类
| |____food.ts 食物类
| |____joystick.ts 摇杆类
| |____dragon.ts 贪吃蛇类
|____ws
| |____ws.service.ts websocket服务(用于多人游戏)
游戏逻辑
贪吃蛇是由一连串的位置坐标和半径描述而成。
主要的游戏逻辑有: 贪吃蛇移动 、 碰撞检测(贪吃蛇碰撞、碰撞墙壁和吃食物)、 AI。
贪吃蛇的移动距离根据 方向 + 速度 + 时间 求出,而方向又由 摇杆方向 + 角速度 + 时间 求出。
碰撞检测就是对 贪吃蛇、食物 循环遍历。
逻辑都比较简单,就不细说。
渲染原理
使用canvas绘制游戏画面。
在app.component.ts的ngOnInit中渲染摇杆及加速按钮,因为这两部分是不变的,不需要不断地重新绘制。
渲染的主要函数为app.component.ts内的render函数,依次绘制出地图、食物、贪吃蛇,当重叠时,先绘制的会位于底层。
在render函数内使用了 clearRect(0, 0, this.width, this.height) 和 requestAnimationFrame(this.render.bind(this)) 不断地清空、绘制、清空、绘制,从而达到了动态的效果。
Q&A
如何贪吃蛇始终位于屏幕中心?
原理是当贪吃蛇移动时,让地图随着贪吃蛇相反的方向偏移,这样就使得贪吃蛇一直位于屏幕中心了。
贪吃蛇的身体如何跟随头部移动?
需要分为两种情况,在单位时间内贪吃蛇移动一单位长度 和 贪吃蛇移动多单位长度。
一单位长度时比较简单,只需将旧的头部左边unshift进body数组,body数组pop掉最后一个,然后给头部赋新值。
多单位长度时,需要计算出旧头部移动到新头部可能出现的坐标,然后依次unshift进body数组内,body再pop掉多余的坐标。
贪吃蛇出生的光圈大小和位置如何计算?
贪吃蛇的头部和身体都是一个一个点,光圈能够随着贪吃蛇形态的变化而变化。
这其实是一个最小覆盖圆算法。TypeScript实现最小覆盖圆的增量算法
Thanks
html5小游戏 typescript,使用TypeScript和Canvas编写移动端贪吃蛇大作战游戏相关推荐
- 面向对象版贪吃蛇大作战游戏创作
贪吃蛇大作战 创作思路: 1.创建蛇头蛇身-----2.让蛇动起来-----3.随机投放食物-----4.吃掉创建的食物------5.判断游戏开始结束 前期准备工作: 创建一个宽1200 高800的 ...
- 【项目实战】轻松实现C/C++大作业:贪吃蛇大作战游戏!
这是一个贪吃蛇大作战类游戏,修改特性为 AI 不互杀: 该程序有四个类:蛇基类 SnakeBase,玩家类 Player,AI 类,Game 类:SnakeBase 和 AI 均继承自 SnakeBa ...
- 贪吃蛇大作战游戏——C语言
是你想要的贪吃蛇吗? 快来看看吧~ #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #include <string.h> ...
- 贪吃蛇大作战游戏攻略
1.不去人群密集的地方 2.长大之后想要啥就有啥 3.跑马圈地,长大之后,要让身体占据更大的空间 4.不抢食物,头只在身体内运动,只有当外部空间比较大时再进行领土扩张 5.不抢食物,而是要围住食物之后 ...
- Java实现贪吃蛇大作战小游戏(完整教程+源码)额外实现积分和变速功能
大家好,我是黄小黄同学!今天给大家带来的是小项目是 基于Java+Swing+IO流实现 的贪吃蛇大作战小游戏.实现了界面可视化.基本的吃食物功能.死亡功能.移动功能.积分功能,并额外实现了主动加速和 ...
- python贪吃蛇论文_爆款游戏《贪吃蛇大作战》的 Python 实现
感觉游戏审核新政实施后,国内手游市场略冷清,是不是各家的新游戏都在排队等审核.媒体们除了之前竞相追捧<Pokemon Go>热闹了一把,似乎也听不到什么声音了.直到最近几天,突然听见好几人 ...
- 贪吃蛇大作战类游戏的实现
贪吃蛇大作战类游戏的实现 前段时间玩了一个叫做贪吃蛇大作战的手机游戏,一下子就喜欢上了,然后就有了尝试实现的想法. 制作的平台环境:vs2012/cocos2dx3.8.1/C++ 关于贪吃蛇游戏的了 ...
- cocos creator开发微信小游戏(五)贪吃蛇大作战
目录 小游戏介绍 小游戏cocos creator场景图 小游戏部分JS代码 开发中碰到的问题 工程及说明 小游戏介绍 贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
- 基于Java实现的贪吃蛇大作战小游戏
贪吃蛇大作战小游戏 整体思路与架构 本项目主要分为三个部分,即UI界面.游戏逻辑与网络传输. UI界面部分,主要是为了实现不同界面之间的切换.包括了注册登陆窗口(loginFrame)与游戏主窗口(G ...
最新文章
- 17.容器的成员函数优先于同名的算法
- mysql 列转置_MySQL行列转置方法
- solr 使用记录 - solr dataimporter 定时任务
- linux 下mysql忘记密码或者安装好linux后不知道mysql初始密码解决方案
- HTTP版本/层次/响应/状态之高屋建瓴
- Nokia真机测试程序自动退出现象搜集[1][javaME]
- 接口自动化测试框架搭建(10、运行特定测试case,生成报告发送邮件)--python+HTMLTestRunnerCN+request+unittest+mock+db
- SpringMVC拦截器: 继承 HandlerInterceptor
- SQL Server之增删改查
- 安装java程序出错
- 创建pytorch虚拟环境的版本问题
- lvgl v8之Styling the scrollbars
- excel制作复合饼状图_如何在Excel中制作饼图
- Netty中ChannelOption属性含义
- 5-ipv6服务器之-dns
- python-regex-thread-localhost
- PPT修改幻灯片大小
- return 不能跳出 forEach 循环
- 偏安一隅的SaaS客服机会在哪,难点又在哪?
- 路由表和转发表以及SDN的open-flow table表的区别