js-键盘事件案例-飞机发射子弹

最新推荐文章于 2023-11-19 12:35:35 发布

啵雨的博客

最新推荐文章于 2023-11-19 12:35:35 发布

阅读量3.1w

点赞数 2

分类专栏： # js-事件案例

本文链接：https://blog.csdn.net/qq_25503949/article/details/105791639

版权

本文详细介绍了如何使用JavaScript实现一个简单的飞机游戏，通过键盘事件控制飞机移动，并实现飞机发射子弹的功能。文章包括飞机和子弹的位置设定、CSS样式、HTML布局以及JS逻辑，特别强调了子弹的发射和移动，以及子弹回收机制的重要性。

摘要由CSDN通过智能技术生成

js-键盘事件案例-飞机发射子弹

在这里插入图片描述
一.先对飞机进行研究：

css部分
改变飞机的位置，所以要加定位

<style>
    #img{
   
        position:absolute;
        left:0px;
        top:0px;
    }
</style>

html部分

（images/1.gif为飞机图片）

<body>

<img src="images/1.gif" alt="" id="img">

<script src="script.js"></script>

</body>

js部分

我们先对小飞机设置移动，暂时不考虑子弹，利用键盘事件，
具体思路与同目录下的小人快跑案例相同，就不重复说了

var img = document.getElementById("img");

document.onkeydown = function(e) {
   

    var e = window.event || e;

    switch (e.keyCode) {
   

        case 37:
            img.style.left = img.offsetLeft - 10 + "px";

最低0.47元/天解锁文章

啵雨的博客

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
js-键盘事件案例-飞机发射子弹

js-键盘事件案例-飞机发射子弹一.先对飞机进行研究：css部分改变飞机的位置，所以要加定位<style> #img{ position:absolute; left:0px; top:0px; }</style>html部分（images/1.gif为飞机图片）<body>...
复制链接

扫一扫

专栏目录