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

时间：2022-07-05 16:18:43
<!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,#);

    position:fixed;/*弹性布局*/

    right:%;

    top:%;

    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')[];

    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 = '';

    div.style.left = '';

    var speed = ;

    btn.onclick = function(){

        speed +=;}

    document.onkeydown = function(e){

            switch(e.which){

            case ://上

            div.style.top = parseInt(div.style.top) - speed + 'px';

            break;

            case ://下

            div.style.top = parseInt(div.style.top) + speed + 'px';

            break;

            case ://左

            div.style.left = parseInt(div.style.left) - speed + 'px';

            break;

            case ://右

            div.style.left = parseInt(div.style.left) + speed + 'px';

            break;

            }

        }

</script>

</body>

</html>

相关文章