键盘控制小球的移动

最新推荐文章于 2023-08-14 14:22:06 发布

转载最新推荐文章于 2023-08-14 14:22:06 发布 · 841 阅读

文章标签：

键盘控制小球的移动

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>7-78 课堂演示</title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7     <style type="text/css">
 8     div{
 9             /*background: orange;*/
10             width: 100px;
11             height: 100px;
12             padding: 30px;
13             border-radius: 200px;
14             position: absolute;
15             background-image: url(../img/sc16.png);
16         }
17     </style>
18 </head>
19 <body>
20     <div id="ball" style="top:50px;left: 50px"></div>
21     <script>
22         var key={
23             W:87,
24             S:83,
25             A:65,
26             D:68
27         }
28         function keymove(e){
29             var ball=document.getElementById('ball')
30             var top=parseInt(ball.style.top);
31             var left=parseInt(ball.style.left);
32             // alert(top+50+'px')
33             switch(e.keyCode){
34                 case key.W:
35                 ball.style.top=top-50+'px';
36                 break;
37                 case key.S:
38                 ball.style.top=top+50+'px'
39                 break;
40                 case key.A:
41                 ball.style.left=left-50+'px'
42                 break;
43                 case key.D:
44                 ball.style.left=left+50+'px'
45                 break;
46 
47             }
48         }
49         document.onkeydown=keymove
50 
51     </script>
52 </body>
53 </html>