码迷,mamicode.com
首页 > Web开发 > 详细

方向键控制圆球运动(简易)(js)

时间:2018-10-26 14:29:27      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:ali   rip   app   font   控制   head   enter   on()   absolute   

<!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>

 

方向键控制圆球运动(简易)(js)

标签:ali   rip   app   font   控制   head   enter   on()   absolute   

原文地址:https://www.cnblogs.com/qq946487854/p/9855778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!