两个Canvas小游戏

分享到:

  或许连小游戏都算不上,可以叫做mini游戏。

  没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了。

  先贴出两个游戏的试玩地址:

   

  • 基础

  接下来简单说说怎样开发这样的基础游戏。

  首先你要懂得canvas上的基本api,可以参考w3cschool;如果你喜欢e文,也可以参考岑安推荐的HTML5 Canvas — the Basics

  接着进入主流程,这样的canvas小游戏基本上都是基于每帧重绘,一般有下面这样的过程:

 

  重绘的话可以用setInterval,但是最好用requestAnimationFrame,好处很多,可以自行搜索。(为什么我还是用了setInterval?因为我懒...)

  游戏中的物体,如果可以的话,都可以写成一个类的形式,类里面设置一些需要的属性(比如长、宽、速度等)和方法(比如draw、update等)。

  这里要引入向量这个概念,位置、速度、加速度等都可以用向量表示。可以试着写一个适合自己的向量模板,你会发现很多事情会变的简单。比如这样:Vector.js

  

  • 碰撞

  如果游戏再稍微复杂点,可能有碰撞检测的需求,比如第二个游戏中就有圆形碰撞的检测。

  矩形和圆形之间的碰撞很简单,画画图就能明白,稍微繁琐点的是像素级别的碰撞。

  什么叫做像素级别的碰撞?举个栗子,比如下面这样:

  • 先对字所在的图片的两个矩形进行检测,如果没碰撞,直接return false
  • 如果矩形碰撞,可以用getImageData,分别检测两图在相交矩形中的像素(蓝色矩形内),如果有一个像素点在两图中都存在,则return true;或者可以将globalCompositeOperation改成destination-in再检测,具体可以参考HTML5 canvas globalCompositeOperation绘图类型讲解,原理类似。

 

  • 鼠标键盘事件

  怎么记录鼠标键盘事件?

  鼠标事件不多,可以分别监听判断;键盘事件可以设置一个关联数组,比如:

var keyState = [];
keyState[e.keyCode] = true;  // keydown
keyState[e.keyCode] = false; // keyup
昵    称:
验证码:

相关文档:

  • 浏览器全屏事件(Html5)
    <buttononclick="launchFullscreen(document.documentElement);"></button> functionlaunchFullscreen(element){ if(element.requestFullscreen){...
  • <HTML5 + Docker>的插件集装箱
    Android和Docker的一致架构设计(5) --<HTML5+Docker>的插件集装箱 By高焕堂(台灣Docker論壇主席) 2015/03/16misoo.tw@qq.com 歡迎報名參加2015北京開...
  • 使用html5特性--ajax上传文件
    在html5以前,ajax上传文件算是一个比较麻烦的事,要是想显示一下上传进度就更不容易。遇到这种情况往往需要借助于第三方插件,比如...
  • 用css修改HTML5 input placeholder颜色
    使用CSS修改HTML5inputplaceholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精...
  • 分享php中四种webservice实现的简单架构方法及实例
    一:PHP本身的SOAP所有的webservice都包括服务端(server)和客户端(client)。要使用php本身的soap首先要把该拓展安装好并且启用。下面看具...
  • 学习HTML5之路
    Web技术大致的时间轴 1991HTML 1994HTML2 1996CSS1+JavaScript 1997HTML4 1998CSS2 2000XHTML1 2002使用DIV+CSS进行网页布局 2005AJAX 2009HTML5 1.什么是HTML5? HTML5(...
  • 8款耀眼的jQuery/HTML5焦点图滑块插件
    1、HTML5/CSS3超酷焦点图特效带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大。该CSS3...
  • 【HTML5】HTML5 综合
    HTML5教程: 视频教程:http://www.socss.cn/html5视频教程大集合/ DCloud关于HTML5:http://ask.dcloud.net.cn/docs 开发工具:HBuilder飞一样的编码 HTML5应...
  • HTML5和以前HTML4的区别整理【转】
    HTML5是HTML标准的下一个版本。虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同。最新最全的HTML5-HTML4对比信息请看http://dev.w3.org/html5/htm...
  • 集成代码生成器 SpringMVC+mybatis HTML5 数据库连接池-阿里的 druid
    新增:1.代码生成器,将大大提高开发效率,增删改查的处理类,service层,mybatis的xml,SQL脚本等重复低级的代码将瞬间生成,从此不再...
  • 0013 xptemplate修改为HTML5文档类型
    在vim中利用xptemplate插件输入html再按ctrl+\即可自动补全html框架可以通过修改html.xpt.vim文件使其变为html5文档类型<!DOCTYPEhtml>打开~/.vim/b...
  • ThinkPHP实现经纬度范围查询
    thinkphp实现附近范围的查询,如附近的人和附近团购之类。 首先,要定位用户的经纬度。客户端定位的方法可以使用地图api或者用html5浏...
  • Ajax保留浏览器历史的两种解决方案(Hash&Pjax)
    总是在githubdown点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请...
  • 一步一步HTML5粒子编辑器
    写在前面 大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加...
  • 2015元旦来个炫的html5特效
    效果网址:http://keleyi.com/keleyi/phtml/html5/5.htm 代码: 1<!DOCTYPEhtml> 2<htmlxmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<title&...
  • 让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
    现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法...
  • elasticsearch(0.90.10)安装配置+超多插件!!
    一)安装elasticsearch 1)下载elasticsearch-0.90.10,解压,运行\bin\elasticsearch.bat(windwos) 2)进入http://localhost:9200/如下图 安装成功! 二)插...
  • 理解HTTP幂等性
    转载自http://www.cnblogs.com/weidagang2046/archive/2011/06/04/2063696.html 基于HTTP协议的WebAPI是时下最为流行的一种分布式服务提供方式。无论是在大...
  • Flash学习初总结
    话说尝试了一周多的Flash编程,有些理解为什么很多程序员都不喜欢用Flash编程了。 首先,就是没有编程的难度,想要编好Flash,也就是...
  • The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
    http://jplayer.org/ ThejQueryHTML5Audio/VideoLibrary jPlayeristhecompletelyfreeandopensource(MIT)medialibrarywritteninJavaScript.AjQueryplugin,(andnow...