在Canvas中如果要添加事件,就需要计算坐标来模拟各种事件,而EaselJS中已经封装好了多个事件,只需调用即可。

一、事件

1)点击

事件是绑定在Shape类中的,click事件与DOM中的意思是一样的,还有个双击事件dblckick,完整的代码可以查看这里

  1. var object = new createjs.Shape();
  2. object.addEventListener('click', function(e) {
  3. alert('click');
  4. });

可以用addEventListener来做绑定,如果想要让移动端也支持,就需要在Touch类中调用enable方法。

  1. createjs.Touch.enable(stage);

除了click外,还有好多其它方法,Shape类的所有事件如下:

2)移动

在CSS中有一个“:hover”的伪类,通过这mouseovermouseout两个事件可以模拟出这个效果。

首先要设置允许触发,引用stage类中的enableMouseOver方法,完整的代码可以在这里查看到

  1. stage.enableMouseOver();
  2.  
  3. circle.addEventListener("mouseover", function(e) {
  4. circle.alpha = .5;
  5. stage.update();
  6. });
  7. circle.addEventListener("mouseout", function(e) {
  8. circle.alpha = 1;
  9. stage.update();
  10. });

有两个事件与这两个比较类似,rolloverrollout,有两个地方与上面的两个事件不同。

1. 这两个事件不冒泡

2. 当给Container设置四个事件后,只有当离开容器时触发rollout,进入容器时rollover,而在容器中的子元素进入或离开会分别触发mouseovermouseout

下面gif图是一次鼠标移动的过程,总共打印出了四组数据,详细代码可以查看这里

第一次:是从外面进入蓝色区域。

第二次:是从蓝色区域进入红色区域。

第三次:是从红色区域进入蓝色区域。

第四次:是从蓝色区域进入到外面。

3)拖放

并没有专门的拖放事件,但是可以通过其它事件来模拟。

Shape类中有个mousedown事件,鼠标按下,在这个事件内绑定Stage类的stagemousemovestagemouseup

  1. circle.addEventListener('mousedown', function(e) {
  2. stage.addEventListener('stagemousemove', function(e) {
  3. circle.x = stage.mouseX;
  4. circle.y = stage.mouseY;
  5. });
  6. stage.addEventListener('stagemouseup', function(e) {
  7. e.target.removeAllEventListeners();
  8. });
  9. });

完整的代码可以在这里查看,e.target就是canvas对象,内容如下:

Stage类中全部事件如下:

二、颜色拖放小游戏

可以通过上面这些事件制作一个简单的颜色拖放小游戏,详细的代码可以查看这里

下面是一个片段:

  1. function startDrag(e) {
  2. var shape = e.target;
  3. var slot = slots[shape.key];
  4. stage.setChildIndex(shape, stage.getNumChildren() - 1);
  5. stage.addEventListener('stagemousemove', function(e) {
  6. shape.x = e.stageX;
  7. shape.y = e.stageY;
  8. });
  9. stage.addEventListener('stagemouseup', function(e) {
  10. stage.removeAllEventListeners();
  11. var pt = slot.globalToLocal(stage.mouseX, stage.mouseY);
  12. if (slot.hitTest(pt.x, pt.y)) {
  13. shape.removeEventListener("mousedown", startDrag);
  14. score++;
  15. createjs.Tween.get(shape).to({
  16. x: slot.x,
  17. y: slot.y
  18. }, 200, createjs.Ease.quadOut).call(checkGame);
  19. console.log('h');
  20. } else {
  21. createjs.Tween.get(shape).to({
  22. x: shape.homeX,
  23. y: shape.homeY
  24. }, 200, createjs.Ease.quadOut);
  25. }
  26. });
  27. }

1)事件中的e

Shape类中的 stagemousemovestagemouseup事件内的参数“e”是一个MouseEvent对象,“stageX”与“stageY”指的是鼠标在画布上的位置。

2)setChildIndex

Stage类中的setChildIndex这个应该与CSS中的“z-index”类似,就是为了不被覆盖住,拖动黄色块的时候,能将静止的块覆盖。

3)globalToLocal

Shape类中globalToLocal方法是做坐标转换,上面的代码是将鼠标的X和Y坐标转换相对于图形的坐标。

第一张图中:蓝色边框左上角的点相对画布原点是(50,30)

第二张图中:将鼠标移动到了(0,8)的位置

第三张图中:a就是经过计算后坐标点(0-50,8-30)

4)hitTest

hitTest测试图像是否与颜色相同的框有交集,并且交集要过了边框的中心点才返回true。

第一张图:过了中心点;第二张图:是没过中心点

三、Text

1)创建文本

在Canvas上可以画出文字,在CreateJS中同样可以,并且还封装了很多方法,将会使用text类。

  1. var text = new createjs.Text("Game Over", "20px Arial", "#ff7700");
  2. text.textBaseline = "middle";
  3. text.textAlign = "center";
  4. stage.addChild(text);

完整的代码可以在这里查看。通过画字,就可以模拟超链接了,还能把“:hover”通过事件模拟出来。

2)DOMElement类

CreateJS还能将canvas外面的DOM元素添加进来,完整的代码可以在这里查看

  1. <div id="gameHolder">
  2. <div id="instructions" style="width: 400px;height: 300px;border: dashed 2 #008b8b;text-align: center;visibility: hidden">
  3. <h3 style="font-family:arial;">Game Instructions</h3>
  4. <p><strong>Click</strong> on the <span style="color:red">RED</span> balloons as they fall from the sky.</p>
  5. <a href="http://www.cnblogs.com/strick/" target="_blank">pwstrick</a>
  6. </div>
  7.  
  8. <canvas id="canvas" width="500" height="400" style="border: black solid 1px"></canvas>
  9. </div>

与上面的创建文本类似,也是初始化后,添加多个属性。

  1. var de = new createjs.DOMElement(instructions);
  2. de.alpha = 0;
  3. de.regX = 200;
  4. stage.addChild(de);

制作动画或小游戏——CreateJS事件(二)的更多相关文章

  1. 制作动画或小游戏——CreateJS基础类(一)

    前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...

  2. [SpriteKit] 制作瓦片地图小游戏

    概述 SpriteKit制作瓦片地图游戏,深入了解2D游戏制作过程 详细 代码下载:http://www.demodashi.com/demo/10703.html 说实话这个2D游戏实战的入门看的我 ...

  3. 制作一个 JavaScript 小游戏

    简评: 作者学习了编程两个月,边学边做了一个 JavaScript 小游戏,在文中总结了自己在这个过程中的一些体会,希望能给其他初学者一些帮助. 对于很多想学编程但一直没下定决心的同学来说,最大的问题 ...

  4. 用C#制作推箱子小游戏

    思路分析: 一.制作一个地图 二.地图中放置墙.箱子.人.目标等 三.让小人动起来完成推箱子动作 游戏制作: 1.按照上述地图制作一个地图  (12行×13列) 地图可以看做是行和列组成的,即可以看做 ...

  5. 用cocos2d 2.1制作一个过河小游戏(4): 游戏主逻辑BaseLayer设计

    前段时间一直在忙.没有时间更新博客.今天还是抽点时间把最后一小部分游戏的实现放上来吧. BaseLayer.h: #import <GameKit/GameKit.h> #import & ...

  6. Python制作塔防小游戏

    开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块.

  7. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  8. android 小游戏 ---- 数独(二)

    > 首先创建一个自己的View类   -->继承SurfaceView并实现SurfaceHolder.Callback接口    --> SurfaceView.getHolder ...

  9. 利用python 5分钟制作一款小游戏

    1.安装pygame 在命令行cmd中输入:pip install pygame ( 注:如果安装不成功,需要输入:python -m pip install --user --upgrade pip ...

随机推荐

  1. Untiy3D开发小贴士 OnEnabled与OnDisabled

    设某个组件为NewBehaviour OnEnabled被调用的情况: 1.GameObject添加组件的时候,即AddComponet<NewBehaviour> : 2.包含3.已添加 ...

  2. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

  3. Centos 编写 service 启动

    Centos 系统服务脚本目录: [html] view plaincopyprint?   /usr/lib/systemd/ 有系统(system)和用户(user)之分, 如需要开机没有登陆情况 ...

  4. 【四】搭建Markdown的编辑器

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  5. 理解C# 4 dynamic(3) – DynamicObject的使用

    上篇文章"理解C# 4 dynamic(2) – ExpandoObject的使用" 了解了ExpandoObject的基本使用. 但ExpandoObject的问题就是它是一个万 ...

  6. linux系统编程之进程(八):守护进程详解及创建,daemon()使用

    一,守护进程概述 Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.它不需要用户输入就能运行而且提供某种服务,不是对整个 ...

  7. [nRF51822] 11、基础实验代码解析大全 · 实验16 - 内部FLASH读写

     一.实验内容: 通过串口发送单个字符到NRF51822,NRF51822 接收到字符后将其写入到FLASH 的最后一页,之后将其读出并通过串口打印出数据. 二.nRF51822芯片内部flash知识 ...

  8. [nRF51822] 7、基础实验代码解析大全(前十)

    实验01 - GPIO输出控制LED 引脚输出配置:nrf_gpio_cfg_output(LED_1); 引脚输出置高:nrf_gpio_pin_set(LED_1); 引脚电平转换:nrf_gpi ...

  9. T型及Fly_by拓扑之应用总结

    前面的文章有分别介绍过T型拓扑及Fly_by拓扑结构,这两种拓扑结构应用最多的应该是在DDR3里面,说到这里,小编又想开始聊聊DDR3的设计了,我想很多人都比较有兴趣. 因为DDR3的设计还是比较复杂 ...

  10. JavaWeb配置外部应用的两种方式

    原来我们的项目放到webapps下,现在放到外面,也希望tomcat可以找到它!把应用放到tomcat之外,这就是外部应用了.应用已经不在tomcat中了,这时我们需要在tomcat中配置外部应用的位 ...