方向鍵控制圓球運動(簡易)(js)
阿新 • • 發佈:2018-10-26
click linear charset tel speed har utf absolut 運動
<!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)