6.前端开发 | 深蓝的blog

CSS样式形状

Alan 四月 22nd, 2019 6.前端开发

Leave a comment

PS:代码来源于网络。

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

1.正方形

#square {
  width: 100px;
  height: 100px;
  background: red;
}

2.长方形

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

3.圆形

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

4.椭圆形

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

5.上三角

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

6.下三角

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

7.左三角

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

8.右三角

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

9.左上角

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

10.右上角

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

11.左下角

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

12.右下角

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

13.箭头

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

14.梯形

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

15.平行四边形

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

16.星星 (6角)

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}

17.星星 (5角)

#star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

18.五边形

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

19.六边形

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

20.八边形

#octagon {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#octagon:before {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}
#octagon:after {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}

21.爱心

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

22.无穷大

#infinity {
  position: relative;
  width: 212px;
  height: 100px;
  box-sizing: content-box;
}
#infinity:before,
#infinity:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 20px solid red;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
#infinity:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

23.菱形

#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -50px;
}
#diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

24.钻石1

#diamond-shield {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid red;
  position: relative;
  top: -50px;
}
#diamond-shield:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 20px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

25.钻石2

#cut-diamond {
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}
#cut-diamond:after {
  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: red transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

26.钻戒

#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

27. 鸡蛋

#egg {
  display: block;
  width: 126px;
  height: 180px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

28.吃豆人

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

29.对话泡泡

#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

30. 12点爆发

#burst-12 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
#burst-12:before,
#burst-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
#burst-12:before {
  transform: rotate(30deg);
}
#burst-12:after {
  transform: rotate(60deg);
}

31. 8点爆发

#burst-8 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}
#burst-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
  transform: rotate(135deg);
}

32.太极

#yin-yang {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}

33.徽章丝带

#badge-ribbon {
  position: relative;
  background: red;
  height: 100px;
  width: 100px;
  border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  transform: rotate(-140deg);
}
#badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

34.太空入侵者（电脑游戏名）

#space-invader {
  box-shadow: 0 0 0 1em red,
  0 1em 0 1em red,
  -2.5em 1.5em 0 .5em red,
  2.5em 1.5em 0 .5em red,
  -3em -3em 0 0 red,
  3em -3em 0 0 red,
  -2em -2em 0 0 red,
  2em -2em 0 0 red,
  -3em -1em 0 0 red,
  -2em -1em 0 0 red,
  2em -1em 0 0 red,
  3em -1em 0 0 red,
  -4em 0 0 0 red,
  -3em 0 0 0 red,
  3em 0 0 0 red,
  4em 0 0 0 red,
  -5em 1em 0 0 red,
  -4em 1em 0 0 red,
  4em 1em 0 0 red,
  5em 1em 0 0 red,
  -5em 2em 0 0 red,
  5em 2em 0 0 red,
  -5em 3em 0 0 red,
  -3em 3em 0 0 red,
  3em 3em 0 0 red,
  5em 3em 0 0 red,
  -2em 4em 0 0 red,
  -1em 4em 0 0 red,
  1em 4em 0 0 red,
  2em 4em 0 0 red;
  background: red;
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin: 50px 0 70px 65px;
}

35.电视

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

36.雪佛龙

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}

37.放大镜

#magnifying-glass {
  font-size: 10em;
  display: inline-block;
  width: 0.4em;
  box-sizing: content-box;
  height: 0.4em;
  border: 0.1em solid red;
  position: relative;
  border-radius: 0.35em;
}
#magnifying-glass:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em;
  height: 0.08em;
  transform: rotate(45deg);
}

38.Facebook图标

#facebook-icon {
  background: red;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  box-sizing: content-box;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid red;
  border-bottom: 0;
}
#facebook-icon:before {
  content: "/20";
  position: absolute;
  background: red;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
  box-sizing: content-box;
}
#facebook-icon:after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
  box-sizing: content-box;
}

39.月亮

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

40.旗

#flag {
  width: 110px;
  height: 56px;
  box-sizing: content-box;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

41.圆锥

 #cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  border-radius: 50%;
}

42.十字架

#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
}
#cross:after {
  background: red;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  top: 40px;
  width: 100px;
}

43.根基

 #base {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}
#base:before {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}

44.指示器

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

45.锁

#lock {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid red;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid red;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid red;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}

FormData接口

Alan 三月 2nd, 2019 6.前端开发

Leave a comment

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

你也可以将它直接传递给构造器 URLSearchParams， if you want to generate query parameters in the way a <form> would do if it were using simple GET submission.

An object implementing FormData can directly be used in a for...of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).

构造函数

FormData(): 创建一个新的 FormData 对象。

方法

FormData.append(): Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
FormData.delete(): Deletes a key/value pair from a FormData object.
FormData.entries(): Returns an iterator allowing to go through all key/value pairs contained in this object.
FormData.get(): Returns the first value associated with a given key from within a FormData object.
FormData.getAll(): Returns an array of all the values associated with a given key from within a FormData.
FormData.has(): Returns a boolean stating whether a FormData object contains a certain key.
FormData.keys(): Returns an iterator allowing to go through all keys of the key/value pairs contained in this object.
FormData.set(): Sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist.
FormData.values(): Returns an iterator allowing to go through all values contained in this object.

createJS开发小游戏

Alan 九月 21st, 2018 6.前端开发

Leave a comment

效果图：（录屏的时候有点卡）

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简介

Alan 九月 19th, 2018 6.前端开发

Leave a comment

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

1. 官网

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

2. 兼容性

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

3. 声音激活

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

createJS实现复杂网页动画

Alan 九月 19th, 2018 6.前端开发

Leave a comment

我应该什么时候用createjs?

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

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

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

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

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

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

效果:

源码分析

打开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)
}

123 4•9

Page 2 of 9

CSS样式形状

1.正方形

2.长方形

3.圆形

4.椭圆形

5.上三角

6.下三角

7.左三角

8.右三角

9.左上角

10.右上角

11.左下角

12.右下角

13.箭头

14.梯形

15.平行四边形

16.星星 (6角)

17.星星 (5角)

18.五边形

19.六边形

20.八边形

21.爱心

22.无穷大

23.菱形

24.钻石1

25.钻石2

26.钻戒

27. 鸡蛋

28.吃豆人

29.对话泡泡

30. 12点 爆发

31. 8点 爆发

32.太极

33.徽章丝带

34.太空入侵者（电脑游戏名）

35.电视

36.雪佛龙

37.放大镜

38.Facebook图标

39.月亮

40.旗

41.圆锥

42.十字架

43.根基

44.指示器

45.锁

FormData接口

构造函数

方法

createJS开发小游戏

HTML5声音引擎Howler.js简介

createJS实现复杂网页动画

我应该什么时候用createjs?

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

效果:

源码分析

main.js主要页面逻辑片段

使用preload预加载资源

第一个页面绘制代码

标签

近期文章

近期评论

文章归档

分类目录

Latest Posts

功能

友情链接

30. 12点爆发

31. 8点爆发