createJS开发小游戏

效果图:(录屏的时候有点卡)

910706-20170707164034456-1593675354

 demo:

https://github.com/beidan/canvas

游戏整体思路实现

1. 实现一个无缝连接的背景图,模拟出汽车在加速的状态

this.backdrop = new createjs.Bitmap(bg);
this.backdrop.x = 0;
this.backdrop.y = 0;
this.stage.addChild(that.backdrop);
this.w = bg.width;
this.h = bg.height;

//创建一个背景副本,无缝连接
var copyy = -bg.height;
this.copy = new createjs.Bitmap(bg);
this.copy.x = 0;
this.copy.y = copyy;  //在画布上y轴的坐标为负的背景图长
//使用createjs的tick函数,逐帧刷新舞台
createjs.Ticker.addEventListener("tick", tick);
function tick(e) {
   if (e.paused !== 1) {
        //舞台逐帧逻辑处理函数
        that.backdrop.y = that.speed + that.backdrop.y;
        that.copy.y = that.speed + that.copy.y;

        if (that.copy.y > -40) {
              that.backdrop.y = that.copy.y + copyy;
        }
        if (that.copy.y > -copyy - 100) {
              that.copy.y = copyy + that.backdrop.y;
        }
        that.stage.update(e);
    }          
}

2. 随机绘制障碍物

由于一条跑道肯定会有很多障碍物,对于超出屏幕的障碍物我们要进行‘资源回收’,否则游戏到后面会越来越卡顿。

// 删除越界的元素
for (var i = 0, flag = true, len = that.props.length; i < len; flag ? i++ : i) {
    if (that.props[i]) {
        if (that.props[i].y > height + 300) {
            that.stage.removeChild(that.props[i]);
            that.props.splice(i, 1);
            flag = false;
        } else {
            flag = true;
        }
    }
}

一共有3条赛道,我们不能出现3个道具同时出现在水平线上,因此我们会随机取1~2个值绘制障碍物。所有游戏我们都应该有参数去控制它的难易程度,免得临上线的时候,老板体验之后觉得游戏太难了……那就非常地尴尬了。 因此,我们会设置加速物体,减速物体,炸弹出现的比例,后期可以调整这个比例来设置游戏的难易程度。

var num = parseInt(2 * Math.random()) + 1, i;
    for (i = 0; i < num; i++) {
        var type = parseInt(10 * Math.random()) + 1;

        // 设置道具出现比例
        if (type == 1) {
            /绘制炸弹
        } else if ((type >= 2) && (type <= 5)) {
            //绘制加速道具
        } else if ((type >= 6) && (type <= 10)) {
            //绘制减速道具
        }
    }

第一次绘制完障碍物之后,会随机时间绘制下一次的障碍物。

var time = (parseInt(3 * Math.random()) + 1);  //随机取1~3整数
// 随机时间绘制障碍物
setTimeout(function () {
    that.propsTmp = [];  //清空
    that.drawObstacle(obj);
}, time * 400);  //400ms ~ 1200ms

 

3.碰撞检测

我们用一个数组来存放汽车占的矩形区域,障碍物占的矩形区域,在每一次tick的时候循环遍历数组,看是否有重叠的,若有重叠,则发生了碰撞。

createjs的一些小知识:

1. 暂停和恢复舞台渲染

createjs.Ticker.addEventListener(“tick”, tick); 
function tick(e) { 
    if (e.paused === 1) { 
    //处理 
    }
}     
createjs.Ticker.paused = 1; //在函数任何地方调用这个,则会暂停tick里面的处理 
createjs.Ticker.paused = 0; //恢复游戏

 

2. 由于汽车会有加速,减速,弹气泡的效果。因此我们把这几个效果绘制在同一个container中,方便统一管理,对这些效果设置name属性,之后可以直接使用getChildByName获取到该对象。

container.name = ‘role’; //设置name值
car = this.stage.getChildByName(“role”);  //使用name值方便获取到该对象

 

3. 预加载 preload (createjs 的 preload 非常的实用)

一开始是自己写的预加载,后来发现createjs里面对图片是有跨域处理的,自己处理跨域的img就比较麻烦,所以直接使用createjs的预加载。

//放置静态资源的数组
var manifest = [
    {src: __uri('./images/car_prop2_tyre@2x.png'), id: 'tyre'}
];
var queue = new createjs.LoadQueue();
queue.on('complete', handleComplete, this);
queue.loadManifest(manifest);
//资源加载成功后,进行处理
function handleComplete() {
   var tyre = queue.getResult('tyre');  //拿到加载成功后的img
}

一般做一个游戏,我们正常都会构建一个游戏类来承载。 下面是一个游戏正常有的接口:

;(function () {
    function CarGame(){}
    CarGame.prototype = {
        init:function(manifest) {
            this.preLoad(manifest);  //资源预加载
            //时间倒计时
            this.prepare(3, 3);  //倒计时3秒
            this.bindEvent(); 
        },
        render:function() {
           this.drawBg(bg1);
           this.drawRole(car, effbomb, effquick);
           this.drawObstacle(obj);
        },
        //在游戏结束的时候批量销毁
        destroy:function(){
            //移除tick事件
            createjs.Ticker.removeEventListener("tick", this.tick);
            //暂停里程,倒计时
            clearInterval(this.changem);
            clearTimeout(this.gametime);
        },
        //由于期间用户可能切出程序进行其他操作,因此都需要一个暂停的接口
        pause:function() {
            //暂停里程,倒计时
            clearInterval(this.changem);
            clearTimeout(this.gametime);

            //暂停页面滚动
            createjs.Ticker.paused = 1;
        },
        //重新开始游戏
        reStart:function(){
           this.destroy();
           this.init(manifest);
        },
        gameOver:function(){
           //显示爆炸效果
           var car = this.stage.getChildByName("role");
           car.getChildByName('bomb').visible = true;
           car.getChildByName('quick').visible = false;
           this.destroy();
        }
    }
})()

 

转载:https://www.cnblogs.com/beidan/p/7122731.html

HTML5声音引擎Howler.js简介

Howler.js是一个不错的HTML5声音引擎。功能强大,性能不错,用起来也很方便。

1. 官网

https://howlerjs.com/ 其代码托管在GitHub上。

2. 兼容性

Howler默认使用Web Audio,但在IE上可以自动转为HTML 5 Audio。这点很是贴心。

3. 声音激活

移动端的Safari和Chrome都禁止网页自动播放声音,必须通过用户的操作,touch, click等触发。Howler可以设置成自动捕捉用户操作激活(解禁)声音播放。

createJS实现复杂网页动画

我应该什么时候用createjs?

如果只是简单动画,建议使用css3或者animate.css这个库就可以了。
当需要开发复杂交互逻辑,例如问答游戏,打蚊子之类的小游戏,或者一些需要复杂图形/线条变换的页面,可以使用createjs完成。

EASELJS、TWEENJS、SOUNDJS、PRELOADJS都是什么?

EASELJS:一个JavaScript库,使HTML5 Canvas标签变得更简单。
用于创建游戏,生成艺术作品,和处理其他高级图形化等有着很友好的体验。(用来方便在页面上绘制元素的)

TWEENJS:TweenJS类库主要用来调整和动画HTML5和Javascript属性, 提供了简单并且强大的tweening接口。(用来做动画效果的)

SOUNDJS:SoundJS提供了简单而强大的API来处理音频。 通过插件来执行实际的音频实现,简单直接的处理声音。(用来控制音频播放的)

PRELOADJS:PreloadJS是一个用来管理和协调相关资源加载的类库, 它可以方便的帮助你预先加载相关资源。(资源预加载)

效果:

6276836-5d7746fc97948ee3

源码分析

打开src/index.html 引入createjs和swiperjs(用于实现页面切换)

<script src="libs/js/swiper.min.js"></script>
<script src="libs/js/createjs-2015.11.26.min.js"></script>
<script src="js/main.js"></script>

main.js主要页面逻辑片段

以下代码是swiper初始化代码,监听onSlideChangeEnd事件,防止页面多次渲染。

var hasSlidePage = [] // 存储已经看过的页面,用于防止页面反复渲染
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: '.swiper-pagination',
  mousewheelControl: true,
  touchRatio: 0.5,
  onSlideChangeEnd: function (swiper) {
    if (hasSlidePage.indexOf(swiper.activeIndex) > -1) {
      return
    }
    hasSlidePage.push(swiper.activeIndex)
    switch (swiper.activeIndex) {
      case 1:
        renderPage2()
    }
  }
})

使用preload预加载资源

// 加载资源
function loadAssest() {
  // 加载资源列表
  manifest = [
    { src: "clearLight/blue.png", id: "blue" }
    ... //此处省略
  ]
  // 统计加载进度
  var loadCount = 0
  preload = new createjs.LoadQueue(false, "./images/");
  // 每加载成功一个资源回调一次
  preload.on("fileload", function (event) {
    loadCount++
    document.querySelector("#process").innerHTML = (loadCount * 100 / manifest.length).toFixed(0) + '%'
  })
  // 所有资源加载完毕后的回调
  preload.on('complete', function (event) {
    // 隐藏加载层,显示内容层
    document.querySelector(".loading-cover").style.display = 'none'
    document.querySelector(".swiper-container").style.display = "block"
    // 渲染第一个页面
    renderPage1()
  })
  // 使用preload预加载指定资源
  preload.loadManifest(manifest)
}

第一个页面绘制代码

// 绘制第一页
function renderPage1() {
  // 创建画布
  var canvas = document.getElementById("canvas1")
  var stage = new createjs.Stage(canvas)
  // 由于添加元素后需要手动更新画布,比较麻烦,该防范监听tick事件,进行自动更新
  createjs.Ticker.addEventListener("tick", handleTicker);
  function handleTicker() {
    stage.update();
  }
  // 在画布添加元素
  var title = this.createText(stage, "超浓缩", "normal 80px microsoft yahei", "#fff", 40, 40)
  // 不知道为什么中文不能自动换行,英文是可以的,所以中文用\n进行换行
  var subTitle1 = this.createText(stage, "·科技突破,高能量配方,活性物浓度高达47%,是普通洗衣液\n的三倍以上,获得「浓缩+」洗衣液认证", "normal 24px microsoft yahei", "#fff", 40, 160)
  var subTitle2 = this.createText(stage, "·一泵8g洗8件,小体积,大能量,660g=2.2kg,用量减少\n70%以上", "normal 24px microsoft yahei", "#fff", 40, 240)
  var logo = this.createImage(stage, 'superEnrichment/logo', 116, 83, 320, 60)
  var bigPower = this.createImage(stage, 'big_power', 163, 154, 40, 320)
  var concentration = this.createImage(stage, 'concentration', 230, 154, 250, 320)
  var bottom = this.createImage(stage, 'bottom', 600, 360, 75, 800)
  var waterDrop = this.createImage(stage,'water_drop', 300, 350, 223, 600)
  var light_line_long = this.createImage(stage,'light_line_long', 23, 300, 110, 670)
  var light_line_long2 = this.createImage(stage,'light_line_long', 23, 300, 365, 810)
  var light_line_long3 = this.createImage(stage,'light_line_long', 23, 300, 620, 670)

  // 对元素设置淡出动画
  createjs.Tween.get(title).to({ alpha: 1 }, 300)
  createjs.Tween.get(subTitle1).to({ alpha: 1 }, 300)
  createjs.Tween.get(subTitle2).to({ alpha: 1 }, 300)
  createjs.Tween.get(logo).to({ alpha: 1 }, 300)
  createjs.Tween.get(bigPower).to({ alpha: 1 }, 300)
  createjs.Tween.get(concentration).to({ alpha: 1 }, 300)
  createjs.Tween.get(waterDrop).to({ alpha: 1 }, 300)
  createjs.Tween.get(waterDrop, { loop: true }).to({ y: 570 }, 1000, createjs.Ease.getPowInOut(2)).to({ y: 600 }, 1000, createjs.Ease.getPowInOut(2))
  createjs.Tween.get(bottom).to({ alpha: 1 }, 300)
  createjs.Tween.get(light_line_long, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
  createjs.Tween.get(light_line_long2, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
  createjs.Tween.get(light_line_long3, { loop: true }).to({ alpha: 1 }, 1000).to({ alpha: 0.4 }, 1000)
}

 

快速入门createjs

createjs简介
createjs中包含以下四个部分:
EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控)
TweenJS:用于做动画效果
SoundJS:音频播放引擎
PreloadJS:网站资源预加载
类似于SoundJS,PreloadJS,如果自己处理起来比较方便的话,也可以自己写,总的来说,它们相当于一个辅助作用,可选可不选。因此,本文章主要讲解EaselJS的使用。
1. EaselJS的大致api
  • 画图片用(Bitmap)
  • 画图形,比如矩形,圆形等用(Shape) 【类似于改变坐标x,y,增加阴影shadow,透明度alpha,缩小放大scaleX/scaleY都可以做到】
  • 画文字,用(Text)
  • 还有容器Container的概念,容器可以包含多个显示对象
2. EaselJS绘图的大致流程
大致流程:创建显示对象→设置一些参数→调用方法绘制→添加到舞台→update(),代码如下:
<script src="easeljs-0.7.1.min.js"></script>  //引入相关的js文件
<canvas id="canvas"></canvas>

var canvas = document.querySelector('#canvas');
//创建舞台
var stage = new createjs.Stage(canvas);
//创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台  
stage.addChild(rect);
//刷新舞台
stage.update();

graphics可以设置一些样式,线条宽度,颜色等等,也可以调用一些方法绘制图形,比如矩形drawRect,圆形drawCircle等等,具体可以自己查看api。

注意:记得一定要把shape对象加到舞台上,否则屏幕上不会显示。
3. Ticker定时器
写createjs肯定会遇到的一个,就是ticker,主要就是定时刷新舞台,理想的帧速率是60FPS
createjs.Ticker.setFPS(60);
4. 控制多个显示对象的层级关系
stage,contain对象有个children属性代表子元素,是一个数组,里面的元素层级像下标一样从0开始,简单来说就是后面的覆盖前面的,addChild方法是添加到显示列表的最后。
我们也可以动态改变children的层叠效果。
stage.setChildIndex(red,1);
5.容器 container
它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素,包含在一个Container中方便统一管理。
比如一个人物,他由手,脚,头,身体组成,你可以将这几个部分放在同一个container中,统一移动。使用方法也比较简单:
var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

蹬蹬蹬~本篇文章的重点,绘制图像并对图像进行处理

6. 绘制图片
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

按照上面的EaselJS的正常的绘制流程来说,上面这段代码应该可以正常显示。但是,只是有些情况下可以正常显示的,这个图像资源需要确定加载成功后才可以new,否则不会有图像在画布上,如果有做资源预加载,可以直接使用上面的代码,如果没有,则需要在image加载完成onload之后才进行绘制

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () {
 var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

仅仅绘制图片是不够的,createjs提供了几种处理图片的方法:

 

6.1  给图片增加遮罩层
使用mask属性,可以只显示图片和shape相交的区域
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
//遮罩图形
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
stage.update();
常用应用场景:用来剪裁图片,比如显示圆形的图片等
1537319803-9332-20170620210438148-1566406616
6.2 给图片增加滤镜效果

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];
我们发现,图片还是没有变模糊,原因是图片添加了filter后stage立即刷新,filter只能保持一帧的效果,第二帧filter则失效了。而使用图片的cache()方法后,可以使得无论舞台怎么刷新,都可以保持住Filter的效果,添加cache还有很多作用,可以提高FPS,缓存等
bg.cache(0,0,bg.image.width,bg.image.height);

 

6.3 使用Rectangle剪裁图片
使用EaselJS内置的Rectangle对象来创建一个选取框,显示图片的某各部分。

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();
适用场景:拼图小游戏,剪裁图片……
1537319804-6147-20170620211138116-572262994
7. createjs事件

easeljs事件默认是不支持touch设备的,需要以下代码才支持:

createjs.Touch.enable(stage);

对于Bitmap,Shape等对象,都可以直接使用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener(‘click’,handle);

 

8. CreateJs的渲染模式
CreateJs提供了两种渲染模式,一种是用setTimeout,一种是用requestAnimationFrame,默认是setTimeout,默认的帧数是20,一般的话还没啥,但是如果动画多的话,设置成requestAnimationFrame模式的话,就会感觉到动画如丝般的流畅。
createjs.Ticker.timingMode = createjs.Ticker.RAF;

 

9.适配
在移动端开发中,不得不面对一个多屏幕,多尺寸的问题,所以适配问题显得特别重要。
先固定canvas的width为750,根据设备的高宽比设置对应750宽的高,然后用css将canvas的缩放或拉伸整个屏幕,这种方法可以保证canvas内部的元素的逻辑尺寸大小不发生变化,也能达到适配
<canvas id="game" width="750" height="700"></canvas>

注意,以上代码的width,height不同于css中的width,height。

比如,你在canvas内部绘制图片,用x,y轴进行定位,这里的x,y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么,就会有以下的效果,canvas会适配屏幕尺寸,里面的图片也会等比例变大变小。

1537319804-4906-20170620212525038-191765525 1537319804-6441-20170620212551195-434025557
 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |