【html】控制飞机图片移动

最新推荐文章于 2024-07-21 12:12:15 发布

拾光御行

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量276

点赞数

文章标签： js html javascript

本文链接：https://blog.csdn.net/qq_42010290/article/details/111824514

版权

在这里插入图片描述
按键控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 1000px;
            height: 700px;
            border: 1px solid #ff0000;
            position: relative;
        }
    </style>
</head>
<body>
<div id="box" class="box" tabindex="1">

</div>
<script>
    var hero = {
        img:new Image(),
        x:100,
        y:200,
        w:90,
        h:60,
        speed:10,
        draw:function () {
            let that = this;
            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 (e) {
            let code = e.keyCode;
            let x = 0;
            let y = 0;
            switch (code) {
                case 37:
                    //左
                    x -= this.speed;
                    break;
                case 38:
                    //上
                    y -= this.speed;
                    break;
                case 39:
                    //右
                    x += this.speed;
                    break;
                case 40:
                    //下
                    y += this.speed;
                    break;
            }
            this.x += x;
            this.y += y;
            if (this.x > 910){
                this.x = 910;
            }else if(this.y > 640){
                this.y=640;
            }else if(this.x < 0){
                this.x = 0;
            }else if(this.y < 0){
                this.y = 0;
            }
            this.draw();
        }
    }

    hero.draw();
    document.getElementById('box').addEventListener('keydown',function (e) {
        hero.moveTo(e);
    })
</script>
</body>
</html>

鼠标控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 1000px;
            height: 700px;
            border: 1px solid #ff0000;
            position: relative;
        }
    </style>
</head>
<body>
<div id="box">

</div>
<script>
    var hero = {
        img:new Image(),
        x:100,
        y:200,
        w:90,
        h:60,
        speed:10,
        draw:function () {
            let that = this;
            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();
    document.getElementById('box').addEventListener('mousemove',function (e) {
        let x = e.x;
        let y = e.y;
        hero.moveTo(x,y);
    })
</script>
</body>
</html>

拾光御行

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【html】控制飞机图片移动

按键控制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 1000px; height: 700px; border: 1px solid #ff000.
复制链接

扫一扫