方向键控制圆球运动（简易）（js）

最新推荐文章于 2022-05-29 12:50:34 发布

weixin_30387339

最新推荐文章于 2022-05-29 12:50:34 发布

阅读量123

点赞数

原文链接：http://www.cnblogs.com/qq946487854/p/9855778.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
*{padding:0px;
    margin:0px;
    }
button{width:100px;
    height:100px;
    background:linear-gradient(to left,#FF0,#099);
    position:fixed;/*弹性布局*/
    right:50%;
    top:50%;
    text-align:center;/*文本居中，行高，大小，颜色，字体*/
    line-height:50px;
    color:#FFF;
    font-size:25px;
    font-family:arial}
</style>
</head>
<body>
<button>开始加速</button>
<script>
    var btn = document.getElementsByTagName('button')[0];
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.style.height = '100px';
    div.style.width = '100px';
    div.style.backgroundColor = 'red';
    div.style.borderRadius = '50%';
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.left = '0';
    var speed = 5;
    btn.onclick = function(){
        speed +=20;}
    document.onkeydown = function(e){
            switch(e.which){
            case 38://上
            div.style.top = parseInt(div.style.top) - speed + 'px';
            break;
            case 40://下
            div.style.top = parseInt(div.style.top) + speed + 'px';
            break;
            case 37://左
            div.style.left = parseInt(div.style.left) - speed + 'px';
            break;
            case 39://右
            div.style.left = parseInt(div.style.left) + speed + 'px';
            break;
            }        
        }
    


</script>
</body>
</html>