创意编程：用 CSS 和 HTML js 打造飞机大战游戏实现飞机移动

于 2024-01-24 16:14:05 发布
阅读量1.1k 收藏 22
点赞数 31
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62428951/article/details/135824933
版权

可通过键盘 wasd来操作 也可以更具鼠标移动 来操作飞机 如果只想要其中一个功能 删掉对应的代码即可 代码处有详细备注

<html>

<head>

    <title>飞机大战</title>

    <script>

        // 飞机动画 弹道路径 敌机躲闪动画//

    </script>

</head>

<body>

    <div class="scene">

        <div>

            <div class="enimy1" style="left:100px"></div>

            <div class="enimy2" style="left:600px"></div>

            <div class="enimy3" style="left:810px"></div>

            <div class="enimy4" style="left:320px"></div>

            <div class="enimy5" style="left:460px"></div>

            <div class="enimy6" style="left:500px"></div>

        </div>

        <div>

            <div class="bullet" style="left:300px;bottom: 100px"></div>

            <div class="bullet" style="left:200px;bottom: 200px"></div>

            <div class="bullet" style="left:250px;bottom: 300px"></div>

            <div class="bullet" style="left:350px;bottom: 400px"></div>

            <div class="bullet" style="left:400px;bottom: 500px"></div>

            <div class="bullet" style="left:600px;bottom: 600px"></div>

            <div class="bullet" style="left:700px;bottom: 700px"></div>

            <div class="bullet" style="left:800px;bottom: 800px"></div>

            <div class="bullet" style="left:900px;bottom: 900px"></div>

            <div class="bullet" style="left:400px;bottom: 750px"></div>

            <div class="bullet" style="left:200px;bottom: 650px"></div>

        </div>

        <div id="plane"></div>

    </div>

    <script>

        // 获取plane元素

        var planeElement = document.getElementById('plane');

        var planeSpeed = 5; // 飞机移动速度

// 监听键盘按下事件

document.addEventListener('keydown', function (event) {

    // 获取当前飞机的位置

    var currentLeft = parseFloat(planeElement.style.left) || 0;

    var currentTop = parseFloat(planeElement.style.top) || 0;

    // 根据按键调整飞机位置

    switch (event.key) {

        case 'w':

            planeElement.style.top = currentTop - planeSpeed + 'px';

            break;

        case 's':

            planeElement.style.top = currentTop + planeSpeed + 'px';

            break;

        case 'a':

            planeElement.style.left = currentLeft - planeSpeed + 'px';

            break;

        case 'd':

            planeElement.style.left = currentLeft + planeSpeed + 'px';

            break;

    }

});

        // 监听鼠标移动事件

        document.addEventListener('mousemove', function (event) {

            // 获取鼠标坐标

            var mouseX = event.clientX;

            var mouseY = event.clientY;

            // 将坐标值设置给plane元素的style的left和top属性

            planeElement.style.left = mouseX - planeElement.offsetWidth / 2 + 'px';

            planeElement.style.top = mouseY - planeElement.offsetHeight / 2 + 'px';

        });

    </script>

</body>

<style>

    /* class selector 类选择器 */

    .scene {

        width: 100%;

        height: 100%;

        background-image: url('C:/科技/XK.jpg'); /* 替换为实际飞机的图片路径 */

        background-size: cover; /* 将背景图等比例放大或缩小，以填满整个元素 */

    background-position: center; /* 将背景图居中 */

    background-repeat: no-repeat; /* 不重复背景图 */

     

    }

    /* tag selector 类选择器 */

    div{

        border-radius: 5px;

    }

    /* id selector id选择器 */

    #plane {

        width: 32px;

        height: 24px;

        background-image: url('C:/科技/FJ2.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        bottom: 20px;

        left: 400px;

       

    }

    .bullet {

        width: 2px;

        height: 10px;

        background-image: url('C:/科技/ZD.jpg'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        bottom: 300px;

        left: 400px;

    }

    .enimy1{

        width: 30px;

        height: 40px;

        background-image: url('C:/科技/DJ.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        top: 100px;

        left: 300px;

    }

    .enimy2{

        width: 30px;

        height: 40px;

        background-image: url('C:/科技/DJ2.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        top: 100px;

        left: 300px;

    }

    .enimy3{

        width: 60px;

        height: 30px;

        background-image: url('C:/科技/DJ3.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        top: 100px;

        left: 300px;

    }

    .enimy4{

        width: 40px;

        height: 60px;

        background-image: url('C:/科技/DJ4.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        top: 100px;

        left: 300px;

    }

    .enimy5{

        width: 20px;

        height: 60px;

        background-image: url('C:/科技/DJ5.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        top: 100px;

        left: 300px;

    }

    .enimy6{

        width: 50px;

        height: 80px;

        background-image: url('C:/科技/DJ6.png'); /* 替换为实际飞机的图片路径 */

    background-size: cover;

        position: absolute;

        top: 100px;

        left: 300px;

    }

</style>


 

</html>

冷色单调
关注
  • 31
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
用js写飞机大战的小游戏
无敌旋风兔的博客
08-31 7261
飞机大战思路整理 飞机大战分为5个阶段: 1.游戏开始阶段 1.0定义整个游戏的全局变量，并进行初始化 1.1.0创建游戏背景图片 1.1.1初始化背景图片的数据 1.1.2创建游戏开始阶段的构造函数 ...
Css3飞机动画特效
前端阿皓
12-11 677
一、预览效果 二、全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; line-height: 1; } html,body{ width: 100%; height: 100%; }
飞机大战（JavaScript）
林老师带你学编程
04-04 1580
HTML主界面：   打飞机 #gamePanel{width:900px;height:500px;background:Black;position:absolute;left:100px;top:100px;} #gamePanel .score{font-size:12px;color:White;position:absolute;left:0;top:0;z-i
js实现飞机大战小游戏
10-14
主要为大家详细介绍了js实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
08-09
《坦克大战js小游戏源码：HTML5重构经典游戏体验》 HTML5的崛起为游戏开发开辟了新的领域，其中就包括对经典游戏的重新诠释，比如我们熟知的“坦克大战”。这款HTML5坦克大战游戏代码，是利用HTML、CSS和JavaScript...
h5飞机大战 html/css/js
10-18
《H5飞机大战：HTML/CSS/JS游戏开发解析》 在互联网技术日新月异的今天，HTML5已经成为了构建网页应用的重要基石。而基于HTML5、CSS3和JavaScript的H5游戏更是受到了广大开发者和用户的喜爱。本文将深入探讨一款名...
飞机大战游戏.rar
07-25
"飞机大战游戏"作为一个经典的休闲小游戏，利用JavaScript、HTML和CSS这三种前端核心技术构建，为用户提供了沉浸式的体验。本文将深入探讨这款小游戏的开发过程，以及JavaScript在其中的关键作用。 一、JavaScript...
飞机大战（微信小程序源码）.zip
11-28
微信小程序支持CSS3动画，开发者可以利用关键帧动画或过渡动画实现飞机、子弹和敌机的运动效果，提升游戏的视觉体验。 五、数据存储与同步 游戏进度和用户信息可以借助微信小程序的本地缓存能力进行存储，例如玩家...
js--飞机大战小游戏
weixin_44892520的博客
09-10 130
js继承--案例--飞机大战--模块封装
JS+HTML开发网页版飞机大战游戏
SYEYEE的博客
07-21 290
利用js+html写的一个飞机大战游戏 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>时钟</title> <style type="text/css"> body{background:#000}.clock{position:absolute;opac.
JavaScript制作简易的《飞机大战》
qq_46568518的博客
05-09 1136
JavaScript 碰撞检测 飞机大战
如何使用HTML和JavaScript来创建简单的飞机大战游戏的基本指南
qq_42787827的博客
03-17 380
我可以向您展示一些关于如何使用HTML和JavaScript来创建简单的飞机大战游戏的基本指南和示例代码。
原生JS --飞机大战
风如刀割的博客
12-16 310
闲时 3小时制作飞机大战，可以自己调整参数进行游戏， 整体分为4大类，地图，飞机，敌人，子弹，代码如下 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>飞机...
HTML+CSS+JS制作【飞机大战】小游戏（键盘版和鼠标版）
最新发布
2302_81218205的博客
12-25 1354
function Myplane(w, h, x, y, imgurl, boomurl) { //w,h宽高 x,y位置 imgurl和boomurl我方飞机的图片路径。在游戏进行界面中，左上方有得到的分数显示，敌方飞机有三种类型（小，中，大），他们的形状，大小，击落的分数各不同，以合适的速度控制它们的数量，以及运动的速度。//给每一架创建的敌机添加自定义的属性--血量。原文链接：https://blog.csdn.net/huangwfu/article/details/128458321。
用javascript写星际飞机大战游戏
weixin_30675967的博客
12-31 165
在github里看到了个不错的脚本游戏，决定亲自动手来写，效果如下 下面是代码的思路分享 把整个代码理解消化确实不容易，但是如果你坚持看完相信你一定会有收获 如果没兴趣可以直接点击下面的链接 复制代码 开玩： http://www.cnblogs.com/demonxian3/p/6241755.html 1丶首先准备好素材 游戏的元素有：飞机 敌机 子弹 背景 暂停 ...
JS实现飞机大战
weixin_64925940的博客
04-06 2840
JS实现飞机大战
js实现的飞机大战
热门推荐
张张张的博客
07-26 1万+
1.html代码 开始游戏 分数： 0 继续 重新开始 回到主页 飞机大战分数 0 继续 2.js主要代码 //获得主界面 var mainDiv=document.getElementById("maindiv"); //获得开始界面 var startdiv=document.getElementById("startdiv"); //获得游戏中分
精通Web编程：HTML5, CSS与JS指南
该书深入浅出地介绍了网页编程的基础，主要聚焦于HTML5、CSS和JavaScript这三种核心技术。 HTML5（超文本标记语言第五版）是构建网页内容的基础，它定义了网页的结构和意义。HTML5引入了许多新特性，如离线存储、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值