[Javascript] Action 定時練習＠Morris' Blog｜PChome Online 個人新聞台

2013-10-06 21:21:52| 人氣2,069| 回應1 | 上一篇 | 下一篇

[Javascript] Action 定時練習

推薦 0 收藏 0 轉貼0 訂閱站台

寫一個類似貪吃蛇的模擬動作，無須考慮撞牆、吃到自己，隨著時間身體會增長。

預設身體最多 50 節
先用 JQuery 對還沒出來的 49 節做隱藏，隨著時間在呼叫 show()。

<html>
<head>
   <title>JavaScript Animation</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
       </script>
       <script>
           $(document).ready(function(){
               <?php
                   for($i = 1; $i < 50; $i++)
                       echo "$(\"#ball$i\").hide(1000);";

                ?>
            });
        </script>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .ball{
                width: 50px;height:50px;
                border-top-left-radius:25px;
                border-top-right-radius:25px;
                border-bottom-left-radius:25px;
                border-bottom-right-radius:25px;
                background-color:purple;
                border:#F00 3px solid;
                position : absolute;
            }
            .triangle-up {
                position: absolute;
                top: 300px;
                left: 200px;
                height: 0;
                width: 0;
                border: 50px solid #e5c3b2;
                border-color: transparent transparent #e5c3b2 transparent;
            }
            .triangle-right {
                position: absolute;
                top: 410px;
                left: 310px;
                height: 0;
                width: 0;
                border: 50px solid #e5c3b2;
                border-color: transparent transparent transparent #e5c3b2;
            }
            .triangle-down {
                position: absolute;
                top: 510px;
                left: 200px;
                height: 0;
                width: 0;
                border: 50px solid #e5c3b2;
                border-color: #e5c3b2 transparent transparent transparent;
            }
            .triangle-left {
                position: absolute;
                top: 410px;
                left: 90px;
                height: 0;
                width: 0;
                border: 50px solid #e5c3b2;
                border-color: transparent #e5c3b2 transparent transparent;
            }
        </style>
        <script type="text/javascript">
        //var width = screen.availWidth;
        var width = 1080;
        var height = 720;
        //var height = screen.availHeight;
        var dir = 2;
        var dx = [0,0,1,-1];
        var dy = [1,-1,0,0];
        var velocity = 20;
        var ballcount = 0;
        var Obj, preObj;
        function init(){
            Obj = document.getElementById('ball0');
            Obj.style.position= 'relative';
            Obj.style.left = '0px';
            Obj.style.top = '0px';
            ballcount = 1;
        }
        function moveRight(){
            dir = 2;
        }
        function moveDown(){
            dir = 0;
        }
        function moveUp(){
            dir = 1;
        }
        function moveLeft(){
            dir = 3;
        }
        window.onload = init;
        var timer = setInterval(function(){moveAction()},100);
        var timerAddBall = setInterval(function(){addBall()}, 3000);
        function afterBall(i) {
            var Obj = document.getElementById("ball"+i);
            var preObj = document.getElementById("ball"+(i-1));
            var x = parseInt(preObj.style.left);
            var y = parseInt(preObj.style.top);
            Obj.style.left = x + "px";
            Obj.style.top = y + "px";
        }
        function moveAction() {
            var Obj = document.getElementById("ball0");
            var x = parseInt(Obj.style.left);
            var y = parseInt(Obj.style.top);
            if((x%3 == 0 && dir >= 2) || (y%3 == 0 && dir < 2)) {
                for(var i = ballcount-1; i > 0; i--)
                    afterBall(i);
            }
            x = (x+dx[dir]*velocity+width)%width;
            y = (y+dy[dir]*velocity+height)%height;
            Obj.style.left = x + "px";
            Obj.style.top = y + "px";
        }
        function addBall() {
            if(ballcount == 50)    return;
            $("#ball"+ballcount).show(500);
            ballcount++;
        }
        </script>
</head>
<body>
    <form>
            <div class="ball" id="ball0"></div>
            <?php
                for($i = 1; $i < 50; $i++)
                    echo "<div class=\"ball\" id=\"ball$i\""."></div>";
            ?>
            <div class="triangle-left" ></div></br>
            <div class="triangle-up" ></div></br>
            <div class="triangle-down" ></div></br>
            <div class="triangle-right" ></div>
    </form>
</body>
</html>

我要檢舉

#Action#定時

台長： Morris

您可能對以下文章有興趣

[Javascript] AJAX - Web service 練習

[Javascript] 縮放表單

[Javascript] AJAX 簡易練習

[Javascript] SQL & Website

人氣(2,069) | 回應(1)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 教育學習(進修、留學、學術研究、教育概況) | 個人分類: [學習]JavaScript |
此分類下一篇:[Javascript] 縮放表單
此分類上一篇:[Javascript][簡易] 去除註解

回應(1)