html5游戏之createjs以及“找不同”实践

今天给大家介绍一款h5游戏的小框架,createjs,相信很多人都接触过。先简单介绍下createjs:CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。

CreateJS 中包含五款工具:

EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控),同时提供 Flash 中的“显示列表”功能。

TweenJS:一个简单的用于制作类似 Flash 中“补间动画”的引擎,可生成数字或非数字的连续变化效果。

SoundJS:一个音频播放引擎,能够根据浏览器性能选择音频播放方式。将音频文件作为模块,可随时加载和卸载。

PrloadJS:帮助你简化网站资源预加载工作,无论加载内容是图形、视频、声音、JS、数据……

PxLoadr

一款用于网站资源预加载的 JavaScript 库,可加载图片、音频等任何类型的文件。PxLoader 除了可以帮你对资源加载的进度进行监测,捕捉“加载完成”事件外,还可以帮你指定资源加载的顺序。你甚至还可以按照优先级分组加载资源。

那么今天我们主要讲的就是easejs,并附送一款之前在微信朋友圈很火的"找不同",作为实战演练。

首先介绍下游戏:

那么游戏很简单拉,就是在一块区域出现不同的颜色的图块,其中有一块跟其他颜色不一样,用户点击此则得一分并进入下一关。

那么游戏的思路并不难,我们用easejs来做好了,上代码:

<!DOCTYPE  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang = "en" >
<head><meta charset = "UTF-8" >
<!--This text is a comment-->
<script src = "jquery-1.8.3.min.js"></script>
<script src="easeljs-0.7.1.min.js"></script>
<script src="rank.js"></script>
</head>
<body>
<canvas id="gameView" width="400px" height="400px;"> Your browser is not Support</canvas>
<div>时间:<span id="time">--</span></div><div>得分:<span id="int">--</span></div>
<script src="app.js"></script>
</body>
</html>

该代码为html内容,其中引入easeljs模块,直接引入就好。(在这里我们只引用了了easejs这个组件类库,其实createjs功能很强大,本身是一款h5游戏引擎)

然后我们自己写的js为两块,一个是app.js,另一个就是rank.js。其中rank.js为构造实例,即每一关图块所拥有的方法,我们均将其封装在这个实例里面。app.js为具体执行的主线程js。

先上rank.js的代码

function Rect(n,color){

createjs.Shape.call(this);//将createjs.Shape的方法全部当作参数传进来

this.setRectType = function (type){//构造setRectType方法

 this._RectType = type;
 switch (type){
    case 1:
    this.setColor("#"+color[0]+color[1]+color[2]+color[3]+color[4]+color[5]);
    break;
    case 2:
    var m=1.9-n/9;
    this.setColor("#"+parseInt(color[0]/m)+parseInt(color[1]/m)+parseInt(color[2]/m)+parseInt(color[3]/m)+parseInt(color[4]/m)+parseInt(color[5]/m));
    break;
 }
}
    this.setColor = function(colorString){
        this.graphics.beginFill(colorString);
        this.graphics.drawRect(0,0,400/n-5,400/n-5);
        this.graphics.endFill();

    }
    this.getRectType = function (){
    return  this._RectType;
    }
    this.setRectType(1);
}
Rect.prototype = new createjs.Shape();//构建Rect对象,继承所有createjs方法以及我们之前创建的方法

在rank.js代码中,我们构建的所有实例应该拥有的方法,接下来在app.js中我们写主线程:

var stage=new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView=new createjs.Container();
stage.addChild(gameView);
var n=2,num=1;
var timer = 16;
var time=$("#time");
function stop() {
    var ove = ‘<div style="9999px;height:9999px;z-index:99;opacity:0.6;background:#000;"></div>‘,
        over = ‘<div style="position:absolute;top:200px;left:200px;font-size:20px;height:500px;width:200px;z-index:999" id="over">时间到啦!!!!!!</div>‘;
    $("html").append(ove);
    $("html").append(over);

}
t = setInterval(function() {
    timer--;
    if(timer<0){
    stop();
    clearTimeout(t);
    }
    else {
    time.html(timer);
    }
}, 1000);

function addRect(){
    var cl=[parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10)];
    var color = cl;
    var x =parseInt(Math.random()*n);
    var y =parseInt(Math.random()*n);
    for(var indexX=0;indexX<n;indexX++){
        for(var indexY=0;indexY<n;indexY++){
        var r = new Rect(n,color);
        gameView.addChild(r);
        r.x=indexX;
        r.y=indexY;
        if(r.x == x&& r.y==y){
            r.setRectType(2);
        }
        r.x=indexX*(400/n);
        r.y=indexY*(400/n);
        if(r.getRectType() == 2 &&timer>=0){
        r.addEventListener("click",function(){
        if(n<7){++n;}
        gameView.removeAllChildren();
        $("#int").html(num++);
        addRect();
        });
        }
        }

        }
    }
addRect();

由于游戏简单,app.js功能很好理解,主要作用为玩家选中目标方块时,构建新图层。

时间: 2024-10-11 15:51:16

html5游戏之createjs以及“找不同”实践的相关文章

Html5游戏之KiwiJs(4)-资源加载进度

Kiwi.js中资源的加载是在Kiwi.State.preload方法中进行的,而关于加载进度State中有另外一个方法loadProgress来实现,所以要实现进度百分比显示,只需要重写loadProgress方法即可. 下面是Kiwi.js的loadProgress的API说明 重写loadProgress方法 loading.loadProgress = function(percent, bytesLoaded, file){ Kiwi.State.prototype.loadProgr

我的小游戏之2048

八月初心血来潮,花了一天时间写了一个控制台版的2048.代码很烂,玩到后面会有延迟现象.先做下记录,以后有时间把移动和合并的代码再优化下. 代码如下: 1 #include<iostream> 2 #include <iomanip> 3 #include<cstring> 4 #include<cstdlib> 5 #include<ctime> 6 using namespace std; 7 8 class Board { 9 public

我在MDCC 2015的演讲PPT《HTML5移动应用多端开发架构实践》分享

这是我在MDCC 2015中国移动开发者大会发表的"HTML5移动应用多端开发架构实践"的演讲ppt,最近又有人要ppt,放在这里吧,欢迎下载! http://download.csdn.net/detail/tangxiaoyin/9196653

Html5游戏框架createJs组件--EaselJS(一)

现在html5小游戏越来越火爆了,由于公司业务的需要,也开发过几款微信小游戏,用canvas写的没有利用什么框架,发现性能一直不怎么好,所以楼主就只能硬着头皮去学习比较火的Adobe公司出的CreateJS框架,找了很久资料比较少,基本没什么 中文文档,很多都是英文文档(想想我这才过四级,只能借用有道,一点一点看,一点一点翻译学习),今天我就写个引子(也是在慢慢学习),写的不好,大家就不要见笑. EaselJS是CreateJS Suite中的一个js库,它可以让canvas的使用变得简单,它提

Html5游戏框架createJs组件--EaselJS(二)绘图类graphics

有端友问我是否有文档,有确实有,但没有中文的,只有英文的,先提供浏览地址供大家参考学习createJs英文文档.                        EaselJS其实主要就是createJs组件中控制canvas绘图的,那么就会涉及密切相关的绘图操作,绘图操作利用Graphics类实现,我们来仔细的研究研究Graphics类. 先回顾一下EaselJS(一里面的那个圆形绘图): <!DOCTYPE HTML> <html lang="en-US">

unity游戏之37游戏王自强:手游留存永远比ROI重要

狗刨学习网报道:近日,在速途网广州举办的制作人专场沙龙上,37游戏"火山湖工作室"总经理王自强从页游厂商转做手游,在研发.运营及产品开发上的区别进行了分析,并指出了页游转手游的几大误区和几点建议. 页游强调ROI手游强调留存 王自强指出"页游一直以来最关注的还是ROI(前期回收),前期留存当然也关注但是相比手游来说还是有差距的."页游行业核心其实是流量变现,所以页游运营平台会要求研发商的产品能尽快收回开一个服务器投入的成本.手游就不太一样,比较强调留存,留存永远比R

android游戏之flabby bird(上)

1.写在前面的话: 一次无意中在csdn上找到一个资源<android高仿flappy bird源码>,下载下来运行一下,效果非常不错,再进去一看代码,乖乖,好东西啊,整个游戏的框架非常的nice,这其实是一个非常好的游戏框架,对于一般的游戏,我们都是可以直接使用噢.但是,唯一的遗憾是这位android高手,不知道为什么只有源码,没有好好的写一个博文详细的介绍一下自己的这个游戏. 2. flappy bird游戏效果: 3.flappy bird游戏的关键类: 1.游戏的一些工具类: (1)F

Unity2D 小游戏之 RocketMouse

这个小游戏源自这里.这几天闲暇时随意看了点 Unity(很久没有摸它了),顺手将这个小游戏移植到了 Unity 5.5.0,除了 Parallax Scrolling 还有点小问题外,其它功能全部完整.部分代码等有优化及改进之处,不过为保持原版特点,我也没作过多改动,除了: 1) Mouse 有 3 条命,在每损失一条命的那一刻,Sprite Renderer 会交替显隐以提示玩家: 2) Gear 滚动等相关 UI 放到了游戏场景: 3) 部分代码有所调整等. 代码下载链接在这里. 只编译了

[LeetCode] Jump Game II 跳跃游戏之二

Given an array of non-negative integers, you are initially positioned at the first index of the array. Each element in the array represents your maximum jump length at that position. Your goal is to reach the last index in the minimum number of jumps