Canvas绘制一个大鱼喂小鱼的游戏
Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西。利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://github.com/CuteBlackCat/tinyHeart
这是一个完全由Canvas绘制的游戏,效果图:
这个小游戏很具有美感,没一点一滴都是绘制出来的,包括下面的海葵能摆动。鱼的摆动是有鼠标的移动来决定的。
每个实物都被封装成了一个类,用面向对象思想来实现确实清晰易懂并且易维护,还很高大上!!
通过这个例子我们可以初步学习到如何一步步的绘制我们所想表达的效果,可以通过window.requestAnimationFrame来循环每一帧,从而弃用setInterval和setTimeout方法。并能了解一个大型项目需要有一个主要的js来初始化其他类,易于后期维护。我们还能熟悉一些canvas简单的API。还可以知道如何用鼠标控制一个物体的移动方向以及移动速度。
总之,这个例子很适合canvas初学者,但需要一定的js面向对象基础。
Canvas绘制一个大鱼喂小鱼的游戏的更多相关文章
- HTML5 在canvas绘制一个矩形
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
- 使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
- 用canvas绘制一个时钟
实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...
- Canvas 绘制一个像素风电子时钟
想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
- canvas绘制“飞机大战”小游戏,真香!
canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...
- Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键(二)绘制一个三角形
该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.绘制三角形 在上一篇文章中,我们已经新建了虚拟方向键的自定义控件Direct ...
随机推荐
- BZOJ 3926: [Zjoi20150]诸神眷顾的幻想乡(后缀自动机)
被这道题坑了= =只与一个空地相连的空地不超过20个只与一个空地相连的空地不超过20个 因为很重要所以说两遍 就是说儿子节点最多只有20个 把这20个节点作为根遍历一遍所得到的tire所得到的所有不同 ...
- ASP.NET 运行机制详解
1.浏览器和服务器的交互原理 通俗描述:我们平时通过浏览器来访问网站,其实就相当于你通过浏览器去访问一台电脑上访问文件一样,只不过浏览器的访问请求是由被访问的电脑上的一个 WEB服务器软件来接收处理, ...
- ASP.NET Core MVC之Serilog日志处理,你了解多少?
前言 本节我们来看看ASP.NET Core MVC中比较常用的功能,对于导入和导出目前仍在探索中,项目需要自定义列合并,所以事先探索了如何在ASP.NET Core MVC进行导入.导出,更高级的内 ...
- js中窗口大小和单个元素大小的计算
1. 窗口的大小即浏览器的大小: window.innerWidth, window.innerHeight, window.outerHeight, window.outerWidth 在IE9+, ...
- ASP.NET Core MVC上传、导入、导出知多少
前言 本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天才研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 ...
- 【2017-2-17】VS基本应用及C#基础第一节(定义变量、输入及输出)
一VS基本应用 (一)新建项目 新建项目可有多种方法例如: 1. 在VS起始页面建立新项目 2. 在集成环境中,通过"文件"/"新建"/"项目&q ...
- 获取手机 id 与 ip
//id #import <AdSupport/AdSupport.h> //ip #include <ifaddrs.h> #include <arpa/inet.h& ...
- 在LaTeX 与 LyX 中设置“Contents”为“目录”
在 LaTeX 中,目录一般被显示为英文"Contents",因此需要设置成"目录". 通常在 Preamble 按照如下方式设置: \renewcommand ...
- 你真的会 snapshot 吗? - 每天5分钟玩转 OpenStack(163)
这是 OpenStack 实施经验分享系列的第 13 篇. instance snapshot 操作可用于备份或者将 instance 保存为新的 image.如果在生产系统中执行 snapshot ...
- Solr field alias
Field alias Any field, function, or transformer can be displayed with a different name in the output ...