方块左右移动

作者: 书童drj | 来源:发表于2017-06-27 12:02 被阅读0次

方块左右移动
2048中文纯净版
C++俄罗斯方块（源码）值得收藏学习
方块动画移动
三、OpenGL案例-正方形的移动
用pygame开发自己的游戏-4.方块碰撞
案例：键盘移动方块
如何在Axure中创建图片放大效果
Swift 简单消消乐demo
左右checkbox移动

<body>
    <button>move-right</button>
    <button>move-left</button>
    <div id="box"></div>
</body>

<style>
    body{
        margin: 0;
    }
    #box{
        position: absolute;
        left: 10px;
        background-color: red;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
    }
</style>

<script>
        window.onload = function(){
            var box = document.getElementById('box');
            var btn1 = document.getElementsByTagName('button')[0];
            var btn2 = document.getElementsByTagName('button')[1];
            btn1.onclick = function(){  
                move(box,500);
            }
            btn2.onclick = function(){
                move(box,10);
            }

            var time = null;
            var speed = null;
            function move(elem,itarget){
                clearInterval(time);
                time = setInterval(function(){
                speed = (itarget-elem.offsetLeft)/20;
                    if(speed>0){
                        speed = Math.ceil((itarget-elem.offsetLeft)/20);
                    }else{
                        speed = Math.floor((itarget-elem.offsetLeft)/20);
                    }
                    if(parseInt(elem.style.left)==itarget){
                        clearInterval(time);
                    }else{
                        elem.style.left = elem.offsetLeft + speed + "px";
                    }
                }, 30)
            }
         }
</script>