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. C++指向常量的指针和常指针

    C++指向常量的指针和常指针 指向常量的指针 通常情况下,可以通过指针去修改指针指向的内容.但是在某些情况下,只希望通过指针去访问指针指向的内容,不想修改.比如只想通过树根结点的指针去遍历输出树中所有 ...

  2. [UWP]涨姿势UWP源码——UI布局

    懒癌晚期兼正月里都是过年,一直拖到今天才继续更新.之前的几篇介绍了数据的来源,属于准备工作.本篇我们正式开始构建涨姿势UWP程序的UI界面. 我们这个Hello World程序比较简单,总共只有一个页 ...

  3. 游戏UI框架设计(三) : 窗体的层级管理

    游戏UI框架设计(三) ---窗体的层级管理 UI框架中UI窗体的"层级管理",最核心的问题是如何进行窗体的显示管理.窗体(预设)的显示我们前面定义了三种类型: 普通.隐藏其他.反 ...

  4. 什么是vue?

    vue就是一个js库,并且无依赖别的js库,直接引入一个js文件就可以使用,跟jquery差不多.vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的 ...

  5. SUN SERVER X3-2 服务器数据写入缓慢

    使用一台sun server x3-2,SAS 300G 2.5寸硬盘两块:8G内存条*2,CPU E5-2609V3 安装一套服务器系统时感觉安装进度很慢,但一直找不到原因,因为要重做系统,同事练手 ...

  6. 30分钟掌握 C#6

    1. 只读自动属性(Read-only auto-properties) C# 6之前我们构建只读自动属性: public string FirstName { get; private set; } ...

  7. Java设计模式之《外观模式》及应用场景

    原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/6484128.html 1.外观模式简介 外观模式,一般用在子系统与访问之间,用于对访问屏蔽复 ...

  8. failed (1113: No mapping for the Unicode character exists in the target multi-byte code page), client: 127.0.0.1...

    nginx部署网站后,访问域名,网页显示  500 Internal Server Error ,经查看发现nginx的error.log中有报错: failed (1113: No mapping ...

  9. 中药饮片ERP案例

    企业简介 [规模] 苏州市天灵中药饮片有限公司成立于2002年,为苏州首家中药饮片GMP认证企业.公司品牌“李良济”首创于1914年民国初,祖传三代,为中华老字号企业.目前,公司经营主要分为三大块:中 ...

  10. 基于 socket.io, 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...