写一个网页,网页有一个球,可以在键盘中控制自由移动
时间: 2024-02-21 09:02:04 浏览: 23
好的,下面是一个简单的HTML、CSS和JavaScript代码,可以实现一个网页,其中包含一个可通过键盘控制自由移动的球:
```
<!DOCTYPE html>
<html>
<head>
<title>移动球</title>
<style>
body {
margin: 0;
padding: 0;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 25px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball = document.getElementById('ball');
var x = 50;
var y = 50;
document.onkeydown = function(e) {
switch(e.keyCode) {
case 37:
x -= 10;
ball.style.left = x + 'px';
break;
case 38:
y -= 10;
ball.style.top = y + 'px';
break;
case 39:
x += 10;
ball.style.left = x + 'px';
break;
case 40:
y += 10;
ball.style.top = y + 'px';
break;
}
}
</script>
</body>
</html>
```
代码解释:
1. HTML 部分:
- `<!DOCTYPE html>`:声明文档类型为 HTML5。
- `<html>`:HTML 根元素。
- `<head>`:包含文档的元(meta)数据。
- `<title>`:设置文档标题。
- `<style>`:定义文档样式。
- `<body>`:HTML 文档主体。
2. CSS 部分:
- `body`:设置页面的外边距和内边距为 0。
- `#ball`:设置球的样式,包括位置、大小、颜色和圆角。
3. JavaScript 部分:
- `var ball = document.getElementById('ball');`:获取球的元素对象。
- `var x = 50;` 和 `var y = 50;`:设置球的初始位置。
- `document.onkeydown = function(e) { ... }`:当用户按下键盘时触发事件。
- `switch(e.keyCode) { ... }`:根据按下的键盘码来执行不同的操作。
- `case 37:`:当用户按下左箭头键时,将球向左移动 10 个像素。
- `case 38:`:当用户按下上箭头键时,将球向上移动 10 个像素。
- `case 39:`:当用户按下右箭头键时,将球向右移动 10 个像素。
- `case 40:`:当用户按下下箭头键时,将球向下移动 10 个像素。
- `ball.style.top = y + 'px';` 和 `ball.style.left = x + 'px';`:设置球的位置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)