原生js的弹力小球

Posted 千鸟语

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js的弹力小球相关的知识,希望对你有一定的参考价值。

有段日子没发博客了,今天来一弹。

这次发的东西,难度比较大,用原生js,写的一个弹力小球,而且是群发,下面是一张截图。

每一次点击“添加小球”,都会触发程序,新创造一个div盒子、定义css样式,然后塞进大盒子中。

接着,给这个div小球创造一个定时器,让他开始移动,并且在碰到墙壁时,会停止匀速运行的定时器,执行另一个函数,开启变速移动的定时器,同时对div小球开启进行变形定时器,实现碰到墙壁后的减速、变形、改变方向、再加速和恢复体形。

讲述原理比较简单,而真正做起来,就麻烦了。

程序中事先声明了很多数组,每个数组,分别用来保存小球的轴向速度、定时器、碰到墙壁时的定时器、判读是否碰到了墙壁、碰到墙壁时的宽度和高度的尺寸等等,太多了。数组中的每一项,对应不同的小球,很麻烦。

试想过,把每个小球封装成一个对象,毕竟js是基于对象的语言,但是一琢磨,发现改起来还不是个小工程,也就放弃了这个打算,还是以后再有好玩儿的案例,事先想好吧。

下面是这个程序运行时的动态图,再下面,就是完整代码了,和之前的一样,直接整个复制,保存到txt,然后改后缀名为html,再双击用浏览器打开,就可以玩儿了。

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #ballBox {
            position: relative;
            margin: 0 auto;
            overflow: hidden;
            background-color: #000;
        }
        #ballBox div {
            text-align: center;
            font-family: "微软雅黑";
            font-weight: bold;
            color: #fff;
        }
        #ballBox button {
            outline:none;
            cursor: pointer;
            border:none;
            background-color: #fff;
            height: 50px;
            position: absolute;
            padding: 0 10px;
            top: 20px;
            left: 50%;
            font: 20px "微软雅黑";
            margin-left: -70px;
            z-index: 5;
        }
        #ballBox button:active {
            background-color: #bbb;
        }
    </style>
</head>
<body>
<div id="ballBox">
    <button>添加小球(0)</button>
</div>
</body>
<script>
    var ballBox = document.getElementById("ballBox");
    var ballBtn = ballBox.getElementsByTagName("button")[0];
    var div = ballBox.getElementsByTagName("div");
    var timerX = []; //x方向 定时器
    var timerY = []; //y方向 定时器
    var timerXX = []; //x方向碰壁反弹时的定时器
    var timerYY = []; //y方向碰壁反弹时的定时器
    var positionX = [];  //设置这个小球的位置的初始的X轴坐标
    var positionY = [];  //设置这个小球的位置的初始的y轴坐标
    var boolX = [];  //用来判断小球是否碰到过墙壁,用不用反方向
    var boolY = [];  //用来判断小球是否碰到过墙壁,用不用反方向
    var i = []; // 小球碰到墙壁,减速加速时使用
    var width = [];   //小球碰到墙壁时,每次运行定时器时小球的宽度
    var height = [];      //小球碰到墙壁时,每次运行定时器时小球的高度
    var initialW = document.documentElement.clientWidth;  //小球弹跳区域的大小,这里设置的是可视区域
    var initialH = document.documentElement.clientHeight;  //小球弹跳区域的大小,这里设置的是可视区域
    ballBox.style.width = initialW + "px";
    ballBox.style.height = initialH + "px";
    var num = 0;// 用来记录新生成小球的个数,同时作为小球的索引值
    var number = [];  //用来记录小球撞过几次墙壁
    var colorArr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"]; //用来生成随机颜色
    ballBtn.onclick = function() {
        ballBtn.innerHTML = "添加小球("+ (num+1) +")";
        var color = "";//用来随机生成颜色
        for (var i = 0; i < 6; i++) {
            color += colorArr[Math.floor(Math.random()*16)];
        }
        var temp = [];  //临时数组,用来放三个随机数
        do {
            temp[0] = Math.random()*60;
        }while(temp[0] < 35)  //生成一个随机数,用来做为小球的直径;
        do {
            temp[1] = Math.random()*4;
        }while(temp[1] < 1)  //生成一个随机数,用来做为小球x方向的步长;
        do {
            temp[2] = Math.random()*4;
        }while(temp[2] < 1)  //生成一个随机数,用来做为小球y方向的步长;
        var newDiv = document.createElement("div");
        newDiv.style.position = "absolute";  //设置小球的一系列属性,大小,颜色等等
        newDiv.style.width = temp[0] + "px";
        newDiv.style.height = temp[0] + "px";
        newDiv.style.borderRadius = "50%";
        newDiv.style.backgroundColor = "#" + color ;
        newDiv.style.top = 0;
        newDiv.style.left = 0;
        newDiv.title = num++;  //设置索引
        newDiv.style.fontSize = temp[0]/2 + "px";
        newDiv.style.lineHeight = temp[0] + "px";
        number[number.length] = 0;
        newDiv.innerHTML = number[number.length - 1];
        positionX[positionX.length] = 0;  //设置这个小球的位置的初始的X轴坐标也就是小球出发的位置
        positionY[positionY.length] = 0;  //设置这个小球的位置的初始的y轴坐标也就是小球出发的位置
        boolX[boolX.length]= false;  //用来判读小球是否碰到过墙壁,用不用反方向
        boolY[boolY.length]= false;  //用来判读小球是否碰到过墙壁,用不用反方向
        ballBox.appendChild(newDiv);
        timerX[timerX.length] = setInterval("moveX("+temp[0]+","+temp[1]+","+ (div.length-1) +")",10);
        timerY[timerY.length] = setInterval("moveY("+temp[0]+","+temp[2]+","+ (div.length-1) +")",10);
    }
    document.onkeydown = function() {   //按下键盘事件
        ballBtn.onclick();
        ballBtn.style.backgroundColor = "#bbb";
    }
    document.onkeyup = function() {   //按下键盘事件
        ballBtn.style.backgroundColor = "#fff";
    }
    function moveX(dia,x,index) {      //小球x轴方向的位移函数
        if (positionX[index]+x > initialW-dia) {  //if用来判断小球是否需要换方向
            clearInterval(timerX[index]);
            div[index].style.left = "";
            div[index].style.right =  "0";
            i[index] = 0;
            number[index]++;
            div[index].innerHTML =js实现小球的弹性碰撞。

原生JS实现简单打砖块弹球小游戏

Unity如何制作小球挤捏变形效果并回弹

纯原生JS面向对象实现打字小游戏

Canvas学习笔记——弹动

js经常用到的代码片段