黑马程序员技术交流社区

标题: 【上海校区前端学科】想尝试一碰就碎的各色气球吗 [打印本页]

作者: sh_hwd    时间: 2017-11-10 11:06
标题: 【上海校区前端学科】想尝试一碰就碎的各色气球吗
本帖最后由 sh_hwd 于 2017-11-14 09:49 编辑




       小伙伴们,平时闲暇之余应该都喜欢玩游戏吧,其实,我们自己手动做一些简单的小游戏。上图所以,一批色彩缤纷的气球冉冉升起,并且到一定的高度自己消失,



       下面还是源源不断的生成,不管你点击哪个,也会破碎消失。而且这些五颜六色的气球,可是自己动态生成的哦!
       做这小游戏特效之前,我们需要先分析一下整体思路:
       首先用div+css先写出一个静态的气球模板 接下来div可以删掉 css保留。(这样我们能先看到
             静态效果) 。
            
            
     :动态生成dom元素 初始化(2.1生成几个?  2.2创建节点对象
            这一步很关键,因为要做到这四步骤:1.气球需要你去动态生成。2.位置是随机的。3.颜色是随
          机的。4.需要把创建的动态元素放到页面上。
           

              
              如上图所示,我们需要留意有些坑(重点!!!),我在这里给大家列举几点:1.随机生成的
            颜色后面需要加个0,转化成number类型。2。给balloon添加样式的时候,一定要记得该加
            “px”的一定要加!  还有关于createDocumentFragment()用法,在我的网盘里笔记中有
            说明,不懂的大家也可以下载看下。
            
       :气球向上移动做动画(上升到一定高度消失并且下面自动生成)
             这一步比较简单,只需遍历需要生成的气球,然后给每个气球一次设置它的top值就搞定。
               
      :点击气球,气球爆炸消失
               首先,在点击事件,只有点击中每个气球,才可以让它消失。(移动该元素)
              
               关于addEventListener()方法,在我的网盘里的笔记中也有介绍。其次,我们需要在点击后
             的事件对象event中找到该元素,也只有在该元素存在下,才会点击成功的移除元素。此处的
             bind()方法,作用是让this的指向从全局指向了当前对象。这个 方法我在网盘笔记里,有
             详细介绍,并有举例说明。

我们可以看看源码:

[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    background: #ccc;
}

.balloon {
    width: 160px;
    height: 160px;
    background: hotpink;
    border-radius: 160px 160px 64px 160px;
    box-shadow: -8px -8px 80px -8px #873940 inset;
    position: absolute;
    top: 0;
    left: 0;
    transition: all linear;
    transform: rotate(45deg);
}
</style>

<body>
    <!-- <div class="balloon"></div> -->
</body>
<script>
/*
  1.动态生成dom元素 初始化
    1.1生成几个
    1.2创建节点对象
  2.气球向上移动做动画
  3.完善气球动画
   */
var num = 10; //气球数量初始化
var wH = window.innerHeight; //获取浏览器高度
var wW = window.innerWidth;
var bZ = 120;
var timer = null;
init(20);
tiemr = setInterval(move, 100);
document.addEventListener('click', function(e) {
    if (e.target.className.toLowerCase() === 'balloon') {
        var ele = e.target;
        // console.log(ele)
        boom.call(ele, function() {
            this.parentNode.removeChild(this)
        }.bind(ele))
        init(1);
    }
}, false)

function boom(cb) {
    var rotate = [30, 80];
    var index = 0;
    this.timer = setInterval(function() {
        if (this.offsetWidth < 10) {
            clearInterval(this.timer);
            cb && cb();
            return false;
        }
        index++;
        index %= 2;
        this.style.transform = `rotate(${rotate[index]}deg)`;
        this.speed++;
        this.style.width = this.offsetWidth - 10 + "px";
        this.style.height = this.offsetHeight - 10 + "px ";
        this.style.top = this.offsetTop - this.speed + "px";
    }.bind(this), 100)
}
//气球触发模块
function init(num) {
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < num; i++) {
        var x = Math.floor(Math.random() * 256 + 0);
        var y = Math.floor(Math.random() * 256 + 0);
        var z = Math.floor(Math.random() * 256 + 0);
        var color = "rgb(" + x + ", " + y + ", " + z + ")";

        // 宽 高随机数
        var youziH = Math.floor(Math.random() * 100 + 150);
        var randomX = (Math.random() * wW) | 0;
        
        var balloon = document.createElement("div");
        balloon.className = 'balloon';
        balloon.style.top = wH - bZ + "px";
        balloon.style.left = randomX - bZ + "px";

        // 宽高 颜色 设置上
        balloon.style.width = youziH + "px";
        balloon.style.height = youziH + "px";
        balloon.style.backgroundColor = color;
        balloon.speed = (Math.random() * 10) + 1;
        // 这里动态添加一个speed属性,之后可以直接使用
        fragment.appendChild(balloon);
    }
    document.body.appendChild(fragment);
}

// 气球移动模块
function move() {
    var balloons = document.querySelectorAll(".balloon");
    for (var i = 0; len = balloons.length, i < len; i++) {
        balloons.style.top = balloons.offsetTop - balloons.speed + "px";
        if (balloons.offsetTop <= bZ) {
            balloons.style.top = wH + "px";
        }
    }
}
</script>

</html>



          以上是代码部分。里面都有注释,包括解析过程,代码并不多,但是效果还是很炫酷的。当然,如果还是不清晰,我在网盘里整理了笔记具体的解释说明,包括举例子演示。有兴趣的小伙伴可以去我的网盘下载。网盘资源见最下方。肯定还有些小伙伴觉得,这小游戏比较简单。想挑战更高难度的,所以,我这里也整理了一个2048的经典游戏。如下图所示。源码也在网盘资源里面。


网盘资源链接:链接: https://pan.baidu.com/s/1gfH6vXT 密码: x74e


作者: Frankzac    时间: 2017-11-16 18:47
666666666666666




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2