【JavaScript】撞墙的小球

参考：

1、JS 元素位置设置元素位置：http://blog.sina.com.cn/s/blog_a2ec891e01011v9f.html

3、使用JavaScript动态更改CSS样式：http://www.jianshu.com/p/0260cddff86a、http://kimi.it/289.html、http://www.jb51.net/article/65625.htm

效果图：

思路：

1、绘制的静态小球。

2、定义小球的四种飞行状态。

3、初始化小球状态，定义切换状态的条件。

代码：

1、初步实现。。。缺点是无法根据屏幕大小调整“墙”的位置。。还需要小改一下。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Dynamic Ball</title>

        <style>

            html {

                background: #F2F2F2;

            }

            p {

                text-align: center;

            }

            .ball {

                width: 100px;

                height: 100px;

                background: black;

                border-radius: 50%;

                position: absolute;

                left: 100px;

                top: 300px;

            }

        </style>

    </head>

    <body>

        <p>Dynamic Ball</p>

        <div class="ball"></div>

        <script>

            function setPosition(x , y) {

                target.style.left = x + "px";

                target.style.top = y + "px";

            }

            var target = document.querySelector('.ball');

            // 定义一对变量来管理target的位置

            var X = Math.random()*1024;

            var Y = Math.random()*768;

            // 定义一个变量管理target的飞行状态

            var STATE = 1;

            function f1() {

                X++;

                Y++;

                STATE = 1;

                setPosition(X, Y);

            }

            function f2() {

                X--;

                Y++;

                STATE = 2;

                setPosition(X, Y);

            }

            function f3() {

                X++;

                Y--;

                STATE = 3;

                setPosition(X, Y);

            }

            function f4() {

                X--;

                Y--;

                STATE = 4;

                setPosition(X, Y);

            }

            function checkDirection() {

                if (X > 1024 && STATE == 1) STATE = 2;

                if (X > 1024 && STATE == 3) STATE = 4;

                if (X < 0 && STATE == 4) STATE = 3;

                if (X < 0 && STATE == 2) STATE = 1;

                if (Y > 768 && STATE == 1) STATE = 3;

                if (Y > 768 && STATE == 2) STATE = 4;

                if (Y < 0 && STATE == 4) STATE = 2;

                if (Y < 0 && STATE == 3) STATE = 1;

                if (STATE == 1) f1();

                if (STATE == 2) f2();

                if (STATE == 3) f3();

                if (STATE == 4) f4();

            }

            function start() {

                setInterval("checkDirection()", 10);

            }

            setPosition(X, Y);

            start();

            // target.f1 target.f2 target.f3 target.f4

            // target.setPosition(randomX, randomY);

            // target.start();

        </script>

    </body>

</html>

2、改。参考：http://www.cnblogs.com/Henllyee/archive/2008/04/20/1162517.html

<script>

            var screenWidth = document.documentElement.clientWidth;

            var screenHeight = document.documentElement.clientHeight;

            function setPosition(x , y) {

                target.style.left = x + "px";

                target.style.top = y + "px";

            }

            var target = document.querySelector('.ball');

            // 定义一对变量来管理target的位置

            var X = Math.random()*screenWidth;

            var Y = Math.random()*screenHeight;

            // 定义一个变量管理target的飞行状态

            var STATE = 1;

            function f1() {

                X++;

                Y++;

                STATE = 1;

                setPosition(X, Y);

            }

            function f2() {

                X--;

                Y++;

                STATE = 2;

                setPosition(X, Y);

            }

            function f3() {

                X++;

                Y--;

                STATE = 3;

                setPosition(X, Y);

            }

            function f4() {

                X--;

                Y--;

                STATE = 4;

                setPosition(X, Y);

            }

            function checkDirection() {

                screenWidth = document.documentElement.clientWidth;

                screenHeight = document.documentElement.clientHeight;

                if (X > screenWidth && STATE == 1) STATE = 2;

                if (X > screenWidth && STATE == 3) STATE = 4;

                if (X < 0 && STATE == 4) STATE = 3;

                if (X < 0 && STATE == 2) STATE = 1;

                if (Y > screenHeight && STATE == 1) STATE = 3;

                if (Y > screenHeight && STATE == 2) STATE = 4;

                if (Y < 0 && STATE == 4) STATE = 2;

                if (Y < 0 && STATE == 3) STATE = 1;

                if (STATE == 1) f1();

                if (STATE == 2) f2();

                if (STATE == 3) f3();

                if (STATE == 4) f4();

            }

            function start() {

                setInterval("checkDirection()", 10);

            }

            setPosition(X, Y);

            start();

            // target.f1 target.f2 target.f3 target.f4

            // target.setPosition(randomX, randomY);

            // target.start();

        </script>

巴特西

【JavaScript】撞墙的小球

最新文章

热门文章