html实现飞机的移动

最新推荐文章于 2022-12-27 16:54:11 发布

瘦小的花卷

最新推荐文章于 2022-12-27 16:54:11 发布

阅读量818

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Liu_Ma/article/details/111780015

版权

要求

实现飞机的移动，通过上下左右按键控制飞机移动，不允许飞机移动到容器之外

代码

<!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元素。

瘦小的花卷

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html实现飞机的移动

要求实现飞机的移动，通过上下左右按键控制飞机移动，不允许飞机移动到容器之外代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器*/ #box { /*相对定位*/ po
复制链接

扫一扫