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. PAT---完美数列

    由于数值比较大,选用long型的 先用快速排序方法对数组进行排序,然后进行查找. 用一个问题是所要查找的数可能不在数组中,因此不能用现成的二叉查找法.试着对二叉查找法进行改进,单没调通. 在查找过程中 ...

  2. ASP.NET MVC4.0+ WebAPI+EasyUI+KnockOutJS快速开发框架 通用权限管理系统

    1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性高.有利软件 ...

  3. Struts2之环境配置

    在学习struts2之前,首先我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Struts设计的第一目标就是使MVC模式应用于web程序设计.在这儿MVC模式的好处就 ...

  4. java读取文件方法总结

    由于最近在做一个关于从手机本地读取格式化的txt文件中的内容,并且把内容放在listview中显示.这样问题来了,就是如何能够遍历已经获取到特定的map中就是一个问题,在网上找了一些资料,找到了一个很 ...

  5. Kindle电子阅读器收不到个人文档推送解决方案

    最近我的 kindle 固件版本更新到 5.8.7.0.1 ,发现增加了生字注音功能,瞬间变成小学生阅读神器有木有,不过,这个功能可以隐藏.显示,看着碍眼隐藏即可,还可以减少和增加生字注音.感觉对于经 ...

  6. Asp.Net MVC 之 Autofac 初步使用3 集成web api

    今天我们试着在WebApi2实现autofac的注入,关于这方面也是看了几位园友的分享省了不少时间,所以结合着前篇的demo再新建webapi进行... 一样开篇还是发下大概demo结构: 还是nug ...

  7. 去掉Dedecms幻灯片的标题文字和绿色背景

    在操作dedecms站群中的站,因为看到首页的幻灯片Flash显示标题和文字,显得有点突兀,觉得应该去除dedecms 幻灯片默认的文字标题和背景,这样会感觉舒服些,下面教大家如何在模板当中去除ded ...

  8. JavaScript中冒泡排序

    在我大学的时候,就已经接触到过很多的排序方式,只是那时候听得还很懵懂,大概知道这么个东西,也对冒泡排序有点印象,但真要我写,我是写不出来的.最近,在回顾js基础的时候,又接触到了冒泡排序.于是,就把冒 ...

  9. 自定义cell设置现价,原价(加横线)

    原价,现价分别是连个label.这两个label不能直接限制死他们的宽度,因为他们的宽度不确定,而由于lable的特殊性,不设置它的宽度约束时,宽度取决于文字的内容,所以两个lable的约束设置好一些 ...

  10. <context:property-placeholder/>元素

    <context:property-placeholder/>元素 PropertyPlaceholderConfigurer实现了BeanFactoryPostProcessor接口,它 ...