canvas小程序-快跑程序员

canvas不用说html5带来的好东西,游戏什么的,么么哒

记得有一天玩手机游戏,就是一个跳跃过柱子那种,其实元素很简单啊,app能开发,借助html5 canvas也可以啊,于是就开始了。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

游戏的全部

1. 一个会动的程序员,用一张图片,够省事

  程序员的动作,跳跃

  程序猿的状态,活着or死亡

2. 背景,理论背景和柱子们应该分开,分开可以采用分层的canvas来实现

3. 声音,跳跃,死亡,开始,死亡等等,借用audio来实现,这里我就实现了跳跃的声音

4. 记分牌

5. 消息板

代码行数 600行左右。

如图一个简单的游戏就出来了,当然,这个只是demo

碰撞计算,复杂重力计算,矩形柱子生成规则,水平速度,连续跳跃流程度等等我想到的,哈哈,都没很好的实现,

为什么呢,因为,能力不足,哈哈。

 

代码摘要:

baseDraw.js: 绘图的基类,提供绘制图片,文本,矩形的方法

main.js:入口文件,初始化游戏

Messager.js:显示消息,包含记分和屏幕中心的提示

rectFactory.js:柱子矩形的生成和擦除,核心

runnner.js:主角,重置,状态检查等

sounder.js :声音

utils.js :辅助类,复制和颜色随机

 

源码:快跑程序员

 

转载于:https://www.cnblogs.com/cloud-/p/6347820.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/469515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构之并查集:UF-Tree优化并查集——19

并查集的优化 在上一节了解到并查集的快速查询,合并,判断归属组等操作,虽然这些操作都非常方便,但是在数据量较大的情况下,并查集的效率并不算高: 上一节中实现代码中使用的合并方法(merge,AP…

图像特征提取与描述_角点特征02:SIFT算法+SURF算法

SIFT/SURF算法 1.1 SIFT原理 前面两节我们介绍了Harris和Shi-Tomasi角点检测算法,这两种算法具有旋转不变性,但不具有尺度不变性,以下图为例,在左侧小图中可以检测到角点,但是图像被放大后,在使用同样的窗…

图像特征提取与描述_角点特征03:Fast算法+ORB算法

1 Fast算法 1.1 原理 我们前面已经介绍过几个特征检测器,它们的效果都很好,特别是SIFT和SURF算法,但是从实时处理的角度来看,效率还是太低了。为了解决这个问题,Edward Rosten和Tom Drummond在2006年提出了FAST算法&…

数据结构之并查集:路径压缩继续优化并查集——20

路径压缩继续优化并查集 在实现的并查集中,在合并操作merge(item1, item2)时,会不管两个元素所在的分组大小,总是将item 1的分组合并到item2的分组,这样可能会导致树的深度无必要地增加: 如果是大树合并到小树上&…

数据结构之并查集:并查集解决案例, Python——21

并查集解决案例畅通工程 案例问题介绍: 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇。省政府"畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通过道路可达即可)。问最少还…

图像特征提取与描述_角点特征04:LBP算法+HOG特征算子

1.LBP算法 LBP(Local Binary Pattern)指局部二值模式,是一种用来描述图像局部特征的算子,LBP特征具有灰度不变性和旋转不变性等显著优点。它是由T. Ojala, M.Pietikinen, 和 D. Harwood在1994年提出,由于LBP特征计算简单、效果较好&#xff…

视频操作_01视频读写:视频读写+读取视频+保存视频

1 从文件中读取视频并播放 在OpenCV中我们要获取一个视频,需要创建一个VideoCapture对象,指定你要读取的视频文件: 1.创建读取视频的对象 cap cv.VideoCapture(filepath) 参数: filepath: 视频文件路径 2.视频的属性信息 2.1…

数据结构之图:无向图的介绍与功能实现,Python——22

无向图(Undigraph)的介绍 引入 生活中的图,有地图,集成电路板的图,可以看类似的看做是数据结构中的图数据有"一对一",“一对多”和“多对多”的关系,前两种分别表示线性表和树的存储…

视频操作_02视频追踪:meanshift算法+Camshift算法

1.meanshift 1.1原理 meanshift算法的原理很简单。假设你有一堆点集,还有一个小的窗口,这个窗口可能是圆形的,现在你可能要移动这个窗口到点集密度最大的区域当中。 如下图: 最开始的窗口是蓝色圆环的区域,命名为C1…

数据结构之图:图的搜索,Python代码实现——23

图的搜索 深度优先搜索(Depth First Search) 定义 从例子出发理解 DFS是一种用于遍历或搜寻树类或图类数据结构的算法,这种算法从根结点出发(如果是图,则任意选择一个顶点作为根结点),在回溯之前会尽可能地遍历每一…

人脸识别案例:【实战】opencv人脸检测+Haar特征分类器

1 基础 我们使用机器学习的方法完成人脸检测,首先需要大量的正样本图像(面部图像)和负样本图像(不含面部的图像)来训练分类器。我们需要从其中提取特征。下图中的 Haar 特征会被使用,就像我们的卷积核&…

数据结构之图:用图解决案例,Python代码实现——24

用图解决畅通工程案例与途径查找 代码中需要引入的类方法代码链接: 无向图Undigraph深度优先搜索DFS与广度优先搜索BFS 畅通工程-续 介绍 案例和之前并查集中实现的一样,但问题略有改动,需要判断9-10城市是否相通,9-8城市是否…

【在虚拟环境下完美解决】1698: error: (-215:Assertion failed) empty() in function cv::CascadeClassifier

问题描述 官方文档做的Demo发现遇到了错误提示如下: error: (-215:Assertion failed) !empty() in function ‘cv::CascadeClassifier::detectMultiScale’ 错误的原因: 出现 error: (-215:Assertion failed) !empty() in function ‘cv::CascadeClassif…

计算机视觉概述:视觉任务+场景领域+发展历程+典型任务

一、什么是计算机视觉 定义:计算机视觉(Computer vision)是⼀⻔研究如何使机器“看”的科学,更 进⼀步的说,就是指⽤摄影机和计算机代替⼈眼对⽬标进⾏识别、跟踪和测量 等,⽤计算机处理成为更适合⼈眼观察…

数据结构之图:有向图的介绍与实现,Python代码实现——25

有向图的介绍 引入 在实际生活中,很多应用相关的图都是有方向性的,最直观的就是网络,可以从A页面通过链接跳转到B页面,那么a和b连接的方向是a->b,但不能说是b->a,此时我们就需要使用有向图来解决这一类问题,它和我们之前学习的无向图,最大的区别就在于连接是具有方向的…

图像分类_01图像分类简介:挑战+近邻分类器+CIFAR-10数据集概述

2.1.1 图像分类 任务目的:对输入的图像赋予一个标签,这个标签在指定类别集合中。 下面这个例子中,图像分类模型拍摄一张图像并将概率分配给4个标签{cat,dog,hat,mug}。如图所示,请记住&#xf…

数据结构之图:有向图的拓扑排序,Python代码实现——26

有向图的拓扑排序 拓扑排序介绍 什么是拓扑排序? 一个有向图的拓扑排序(Topological sort 或 Topological ordering)是根据其有向边从顶点U到顶点V对其所有顶点的一个线性排序举个例子:让一个拓扑排序的图中的所有顶点代表某项…

图像分类_02神经网络(NN)简介:定义+ 感知机+历史

2.2.1 什么是神经网络 人工神经网络( Artificial Neural Network, 简写为ANN)也简称为神经网络(NN)。是一种模仿生物神经网络(动物的中枢神经系统,特别是大脑)结构和功能的 计算模型…

图像分类_03分类器及损失:线性分类+ SVM损失+Softmax 分类+交叉熵损失

2.3.1 线性分类 2.3.1.1 线性分类解释 上图图中的权重计算结果结果并不好,权重会给我们的猫图像分配⼀个⾮常低的猫分数。得出的结果偏向于狗。 如果可视化分类,我们为了⽅便,将⼀个图⽚理解成⼀个⼆维的点,在下⾯坐标中显示如下…

数据结构之图:加权无向图与寻找最小生成树,Python——27

加权无向图与prim算法和Kruskal算法寻找最小生成树 加权无向图的介绍 引入 加权无向图是一种为每条边关联一 个权重值或 是成本的图模型。这种图能够自然地表示许多应用。在一副航空图中,边表示航线,权值则可以表示距离或是费用。在一副电路图中,边表示导线,权值则可能表示导…