Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西。利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://github.com/CuteBlackCat/tinyHeart

这是一个完全由Canvas绘制的游戏,效果图:

这个小游戏很具有美感,没一点一滴都是绘制出来的,包括下面的海葵能摆动。鱼的摆动是有鼠标的移动来决定的。

每个实物都被封装成了一个类,用面向对象思想来实现确实清晰易懂并且易维护,还很高大上!!

通过这个例子我们可以初步学习到如何一步步的绘制我们所想表达的效果,可以通过window.requestAnimationFrame来循环每一帧,从而弃用setInterval和setTimeout方法。并能了解一个大型项目需要有一个主要的js来初始化其他类,易于后期维护。我们还能熟悉一些canvas简单的API。还可以知道如何用鼠标控制一个物体的移动方向以及移动速度。

总之,这个例子很适合canvas初学者,但需要一定的js面向对象基础。

Canvas绘制一个大鱼喂小鱼的游戏的更多相关文章

  1. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  2. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  3. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  4. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  5. Canvas 绘制一个像素风电子时钟

    想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...

  6. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  8. canvas绘制“飞机大战”小游戏,真香!

    canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...

  9. Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键(二)绘制一个三角形

    该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.绘制三角形 在上一篇文章中,我们已经新建了虚拟方向键的自定义控件Direct ...

随机推荐

  1. 纪中集训 Day 8 & Last Day

    好吧回到家一直玩到现在才来写冏= = 然后今天终于在最后一场比赛中AK了= = 虽然有两人AK,另一个是初二牛ORZ 其实都是水题+模板题 第一题是DP,第二题是模拟,第三题是可持久化TREAP(其实 ...

  2. Java学习——用户界面的布局

    使用布局管理器 FlowLayout管理器 面板的默认布局管理器是java.awt包中的FlowLayout类.使用FlowLayout时,像在页面中排列英文单词那样排组件:从左到右排列,当前行没有空 ...

  3. i春秋与我

    在i春秋论坛混迹了大半年了,在i春秋的在线平台学到了很多奇技淫巧,特别喜欢这个平台的气氛,以及虚拟在线网络环境的搭建, 忙周偷乐,过来也为i春秋做点小奉献,共同构造我们喜欢的春秋平台,成长特别快,特别 ...

  4. 关于Android App开发技术分类的一个小总结

     前言 本文从热更新.异步并发.性能优化.网络请求等多个方面对Android App开发的技术进行了一个分类总结.欢迎大家沟通交流. 热更新 [原]热更新开源项目Tinker源码解析之Dex热更新 [ ...

  5. 面向对象 "一"

    1:面向对象不是所有情况都适用. 2面向对象编程 a:定义类 calss Foo: 注意顶一个类的时候首字母必须是大写 def (方法一)(self,bb) pass b:根据创建对象,创建和Foo实 ...

  6. smarty模板做人员表信息删除,修改 里面的性别单选按钮民族下拉,另外登录进去可以显示姓名

    首先登录进去可以显示姓名 smarty模板做人员表信息删除,删除的时候有提示框确定删除吗. 修改 里面的性别单选按钮,要修改谁有默认选中,用了变量调节器 民族位置做下拉,用<{foreach}& ...

  7. 使用postfix在debian上配置邮件服务器

    如果debian中安装了exim4,先卸载exim4: apt-get remove exim4 安装postfix apt-get install postfix 安装完成后就可以测试下,PHP代码 ...

  8. Objective-C日记-之类别Category

    类别Category 1,概述 为现有类添加新的方法,这些新方法的Objective-C的术语为“类别”. 2,用法 a,声明类别 @interface NSString(NumberConvenie ...

  9. wemall app商城源码Android之支付宝通知处理类

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之处 ...

  10. 3409: [Usaco2009 Oct]Barn Echoes 牛棚回声

    3409: [Usaco2009 Oct]Barn Echoes 牛棚回声 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 57  Solved: 47[ ...