HTML5游戏的小框架，你值得拥有！

2024-01-05

CreateJS 包括五个工具：

EaselJS：用于绘制精灵、动画、矢量和位图，在 HTML5 Canvas 上创建交互体验（包括多点触控）游戏素材，并在 Flash 中提供“显示列表”功能。

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

SoundJS：音频播放引擎，可以根据浏览器性能选择音频播放方式。使用音频文件作为可以随时加载和卸载的模块。

PrloadJS：帮助您简化网站资源的预加载，无论加载内容是图形、视频、声音、JS、数据……

加载器

用于预加载网站资源的 JavaScript 库，可以加载图像和音频等任何类型的文件。除了帮助您监控资源加载进度并捕获“加载完成”事件之外，PxLoader 还可以帮助您指定资源加载的顺序。您甚至可以加载按优先级分组的资源。

那么今天我们主要讲的是easejs，同时也提供一个微信朋友圈里非常流行的《大家来找茬》作为实操练习。

首先我们来介绍一下这款游戏：

引擎游戏引擎_引擎游戏公司_js游戏引擎

那么游戏就很简单了，就是一个区域出现不同颜色的图块，其中一个与其他颜色不同。如果用户点击此按钮js游戏引擎，他将获得一分并进入下一关。

那么游戏的思路并不难。我们使用easejs来完成。这是代码：

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 






时间：--
得分：--

代码是html内容，其中引入了easeljs模块，直接导入即可。（这里我们只引用了easejs组件类库，其实createjs非常强大，是一个h5游戏引擎。）

那么我们自己写的js就分为两部分3D素材，一部分是app.js，一部分是rank.js。其中rank.js是一个构造实例，是每个级别tile所拥有的方法。我们将其封装在这个实例中。 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 = '
',
        over = '时间到啦！！！！！！
';
    $("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){
        for(var indexY=0;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();