要求
实现飞机的移动,通过上下左右按键控制飞机移动,不允许飞机移动到容器之外
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#box {
/*相对定位*/
position: relative;
/*div宽度*/
width: 800px;
/*div高度*/
height: 500px;
/*边框设计 边框厚度1px 实线 红色*/
border: 1px solid red;
}
</style>
</head>
<body>
<!--创建一个id为box的div-->
<div id="box">
</div>
<!--JavaScript代码-->
<script>
// JSON对象
var hero = {
// 图片对象
img: new Image(),
// 初始值
x: 0,
y: 0,
w: 80,
h: 60,
speed: 10,
// 定义方法
draw: function () {
let that = this;
// 导入图片 通过调用img中的方法实现
that.img.src = 'hero.png';
that.img.onload = function () {
//设置图片样式
this.style.position = 'absolute';
this.style.left = `${that.x}px`;
this.style.top = `${that.y}px`;
//设置图片大小
this.width = that.w;
this.height = that.h;
//图片追加到画布上
document.getElementById('box').appendChild(this);
}
},
// 移动
moveTo: function (x, y) {
this.x = x;
this.y = y;
// 重绘
this.draw();
}
};
// 绘制飞机
hero.draw();
// 将键盘操作和页面连接起来 添加事件 keydown:按下的时候实现功能
window.addEventListener('keydown', function (e) {
// 定义按下键位的值,上 下 左 右 各有对应的keyCode值
let code = e.keyCode;
switch (code) {
case 37:
//左移
hero.x -= hero.speed;
break;
case 38:
//上移
hero.y -= hero.speed;
break;
case 39:
//右移
hero.x += hero.speed;
break;
case 40:
//下移
hero.y += hero.speed;
break;
}
// 检查
console.log(hero.x, hero.y);
// 判断是否超出边界,如果超出边界值,则定义为最大值或最小值
if (hero.x >= 720) {
hero.x = 720;
}
if (hero.x <= 0) {
hero.x = 0;
}
if (hero.y >= 440) {
hero.y = 440;
}
if (hero.y <= 0) {
hero.y = 0;
}
//每次发生事件都执行moveTo函数 参数为改变后的hero对象的x和y变量
hero.moveTo(hero.x, hero.y);
})
</script>
</body>
</html>
运行结果
重难点总结
div和图片的定位:
满足父相子绝,即父类元素设置为相对定位,其中的子类元素设置为绝对定位;这里id为box的div是父类元素,img是添加进该div的子类元素。
相对定位:该元素相对于自己原有位置,偏移一定距离。相对的是自己。
绝对定位:该元素相对于其父元素,偏移一定距离。相对的是父元素,重点是这个父元素也需要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。
闭包:
闭包即在一个函数内部定义的函数;
闭包提供了在函数外部对函数内部局部变量的访问能力。
方法中的两个this:
draw: function () 中this:代表hero变量;
that.img.onload = function ():中this代表img元素。