js打飞机程序

最新推荐文章于 2023-08-03 20:56:39 发布
最新推荐文章于 2023-08-03 20:56:39 发布
阅读量430 收藏 1
点赞数 1
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujie_5201314/article/details/127825562
版权

HTML5 JavaScript 游戏开发 飞机射击 碰撞检测
关键词由CSDN通过智能技术生成

html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    *{

        margin: 0px;

        padding: 0px;

    }

    #main{

        display: flex;

        justify-content: center;

        align-items: center;

        position: relative;

        width: 600px;

        height: 900px;

        margin: 0px auto;

        background-color: rgb(104, 224, 214,0.5);

    }

    #btn{

        width: 200px;

        height: 40px;

        background-color:blueviolet;

        font-size: 30px;

        text-align: center;

        line-height: 40px;

    }

</style>

<body>

    <div id="main">

        <button id="btn">开始游戏</button>

    </div>

   

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

</body>

</html>

js：

let btn = document.getElementById('btn')

let mainObj = document.getElementById('main')

    let upBtn = false

    let downBtn =false

    let leftBtn = false

    let rightBtn = false

function PlayPlane(img,x,y,blood,speed){               //玩家飞机

    this.playNode = document.createElement('img')

    this.img = img

    this.x = x

    this.y = y

    this.blood = blood

    this.speed =speed

    this.shoot = function(){

        let bullet = new Bullet('./zidan.jpg',parseInt(this.playNode.style.left)+10,parseInt(this.playNode.style.top)-14,20,5)

        bulletArr.push(bullet)

    }

   

    this.topMove = function(){

        if(parseInt(this.playNode.style.top)>=10){

            this.playNode.style.top = parseInt(this.playNode.style.top)-this.speed+'px'

        }

        else{

            this.playNode.style.top = '0px'

        }

    }

    this.leftMove = function(){

        if(parseInt(this.playNode.style.left) >=10){

            this.playNode.style.left = parseInt(this.playNode.style.left)-this.speed+'px'

        }

        else{

            this.playNode.style.left = '0px'

        }

    }

    this.rightMove = function(){

        if(parseInt(this.playNode.style.left)<570){

            this.playNode.style.left = parseInt(this.playNode.style.left)+this.speed+'px'

        }

        else{

            this.playNode.style.left = '570px'

        }

    }

    this.bottomMove = function(){

        if(parseInt(this.playNode.style.top)<=860){

            this.playNode.style.top = parseInt(this.playNode.style.top)+this.speed+'px'

        }

        else{

            this.playNode.style.top = '870px'

        }

    }


 

    this.init = function(){

        this.playNode.src = this.img

        this.playNode.style.position ='absolute'

        this.playNode.style.left = this.x +'px'

        this.playNode.style.top = this.y +'px'

        this.playNode.style.width ='30px'

        this.playNode.style.height ='30px'

        mainObj.appendChild(this.playNode)

        }

        this.init()

    }

function EnemyPlane(img,x,y,blood,speed){         //敌方飞机

    this.playNode = document.createElement('img')

    this.img = img

    this.x = x

    this.y = y

    this.blood = blood

    this.speed =speed

    this.isDead = false

    this.explosionTime = 10

    this.move = function(){

        this.playNode.style.top = parseInt(this.playNode.style.top)+this.speed+'px'

    }

    this.init = function(){

        this.playNode.src = this.img

        this.playNode.style.position ='absolute'

        this.playNode.style.left = this.x +'px'

        this.playNode.style.top = this.y +'px'

        this.playNode.style.width ='30px'

        this.playNode.style.height ='30px'

        mainObj.appendChild(this.playNode)

        }

        this.init()

}

function Bullet(img,x,y,speed,attack){         //子弹

    this.playNode = document.createElement('img')

    this.img = img

    this.x = x

    this.y = y

    this.attack = attack

    this.speed =speed

    this.isDead = false

    this.move = function(){

        this.playNode.style.top =parseInt(this.playNode.style.top)-this.speed+'px'

    }

    this.init = function(){

        this.playNode.src = this.img

        this.playNode.style.position ='absolute'

        this.playNode.style.left = this.x +'px'

        this.playNode.style.top = this.y +'px'

        this.playNode.style.width ='10px'

        this.playNode.style.height ='10px'

        mainObj.appendChild(this.playNode)

        }

        this.init()

    }            

let enemyArr = []

function createEnemy(){

    let enemy = new EnemyPlane('./R-C.jfif',Math.random()*366,-Math.random()*60,10,Math.random()*10+1)

    enemyArr.push(enemy)

}

function enemyPlaneMove(){

    for(let i = 0;i<enemyArr.length;i++){

        if(enemyArr[i].isDead == false){

            enemyArr[i].move()

            if(parseInt(enemyArr[i].playNode.style.top)>600){

                mainObj.removeChild(enemyArr[i].playNode)

                enemyArr.splice(i,1)

            }

        }

        else{

            enemyArr[i].explosionTime--;

            if(enemyArr[i].explosionTime<=0){

                mainObj.removeChild(enemyArr[i].playNode)

                enemyArr.splice(i,1)

            }

        }

    }

}

let bulletArr = []

    function bulletFly(){

        for(let i = 0;i<bulletArr.length;i++){

            if(bulletArr[i].isDead ==false){

                bulletArr[i].move()

            }

            else{

                mainObj.removeChild(bulletArr[i].playNode)

                bulletArr.splice(i,1)

            }

           

    }

}

function crashCheck(){

    for(let i=0;i<enemyArr.length;i++){

        for(let j =0;j<bulletArr.length;j++){

            let btLeft = parseInt(bulletArr[j].playNode.style.left)

            let btTop = parseInt(bulletArr[j].playNode.style.top)

            let plLeft = parseInt(enemyArr[i].playNode.style.left)

            let plTop = parseInt(enemyArr[i].playNode.style.top)

            if(btLeft>=plLeft&&btLeft<=plLeft+34&&btTop>=plTop&&btTop<=plTop+24){

                enemyArr[i].playNode.src = './bong.jfif'

                enemyArr[i].isDead = true

                bulletArr[i].isDead = true

            }

        }

    }

}

function startGame(){

    let playerPlane = new PlayPlane('./R-C.jfif',280,800,101,10)

    playerPlane.shoot()

    setInterval(createEnemy,3000)

    setInterval(enemyPlaneMove,1000)

    setInterval(()=>{

        playerPlane.shoot()

    },100)

    setInterval(bulletFly,100)

    setInterval(crashCheck,100)

    function ctrlPlaneMove(){

        if(upBtn == true){playerPlane.topMove()}

        if(downBtn == true){playerPlane.bottomMove()}

        if(leftBtn == true){playerPlane.leftMove()}

        if(rightBtn == true){playerPlane.rightMove()}

    }

    document.onkeydown = function(){

        let e = window.event||arguments[0]

        if(e.keyCode ==38){

            upBtn = true

        }

        else if(e.keyCode ==40){

            downBtn =true

        }

        else if(e.keyCode == 37){

            leftBtn = true

        }

        else if(e.keyCode == 39){

            rightBtn = true

        }

        ctrlPlaneMove()

    }

    document.onkeyup = function(){

        let e = window.event||arguments[0]

        if(e.keyCode ==38){

            upBtn = false

        }

        else if(e.keyCode ==40){

            downBtn =false

        }

        else if(e.keyCode == 37){

            leftBtn = false

        }

        else if(e.keyCode == 39){

            rightBtn = false

        }

        ctrlPlaneMove()

    }

}

btn.οnclick=function(){

    btn.style.display = 'none'

    startGame()

}

SWAGSoul
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
JavaScript打飞机小游戏
weixin_45675581的博客
10-09 2471
又到了每日分享时间了，今天分享的内容为：JavaScript打飞机小游戏 效果图： 实现逻辑： 第一步：实现页面的排版、布局 1.1 准备打飞机游戏需要使用到的图片 1.2 开始游戏界面 1.3 进入游戏的界面 1.3.1 己方飞机 1.3.2 敌方飞机 1.3.3 己方飞机发射的子弹 第二步：开始游戏 2.1 点击开始游戏按钮，进入到游戏界面 2.2 摁下空格键，实现己方飞机跟随鼠标的移动=...
js射击类游戏实现_【玩转IT】JS面向对象编程轻松实现打飞机游戏
weixin_30550287的博客
01-06 1320
1.游戏概述目前很多常见的小游戏都是通过纯前端技术开发完成的，比如大家经常玩的2048、别踩白块等等。前端常见的技术HTML5、CSS3、JAVASCRIPT、ES6、以及canvas、WebGL等等都能够做出非常好玩的小游戏。今天给大家分享一个前端小游戏“打飞机”，既简单又有趣，希望对你学习前端有所帮助。下图是游戏运行效果图，实际运行效果更好哦，如下：下面我们来详细的介绍一下这款有趣的...
用 JavaScript 写一个小游戏打飞机
最新发布
m0_62241283的博客
08-03 1692
以上就是 基于 js 制作一个飞机大战，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
python打飞机小程序
Misaka_S的博客
08-05 1万+
游戏框架的搭建 安装框架包pygame 搜索图片资源 plist文件相关 编写相应代码 思路 检测键盘 代码 思路 飞机显示及移动 关于飞机显示的努力 ps里的gif png 思路 飞机类定义 飞机类显示 可以攻击的飞机 思路 子弹类定义 全部子弹显示及移动 tips列表删除相关 显示敌机及移动 思路 定义敌机类 敌机的移动 敌机子弹显示及自动攻击 思路 定义敌机子弹类 全部子弹显示及移动 自动攻击
原生js实现 打飞机游戏demo
08-06
简单的利用原生js实现打飞机游戏，代码易懂，没有复杂的逻辑，适用于初学js的新手练习
js实现打飞机
02-21
在JavaScript（JS）中实现打飞机游戏是一种常见的实践，它能帮助开发者深入理解面向对象编程、事件处理、动画制作以及游戏逻辑设计等核心概念。在这个项目中，我们将探讨如何使用HTML作为结构层，CSS作为表现层，而...
微信小程序-打飞机
03-15
综上所述，"微信小程序-打飞机"涉及到的技术栈包括前端开发、游戏编程、数据绑定、API调用等多个方面，开发者需要具备扎实的JavaScript基础，熟悉微信小程序的开发规范和最佳实践，才能打造出流畅、有趣的小游戏。
JS打飞机源码
04-23
通过分析"JS打飞机"的源码，我们可以了解到JavaScript在游戏开发中的应用，包括Canvas绘图、事件处理、对象和类的设计、计分系统以及游戏状态管理等多个方面。这对于想要学习游戏开发或者提升JavaScript技能的开发者...
打飞机游戏小程序
04-26
【打飞机游戏小程序】是一款基于微信小程序平台开发的娱乐游戏应用。它以其简单易上手的操作方式和趣味性吸引了大量用户。小程序作为一种轻量级的应用形式，无需下载安装即可使用，方便快捷，使得打飞机游戏能够迅速...
用 js+html 实现一个打飞机小游戏
07-04
使用 js + html 实现的打飞机小游戏，玩家飞机和敌方飞机使用dom进行绘制，采用背景图填充div的方式生成飞机和子弹，在点击开始按钮后，页面上方会源源不断的出现飞机，并且攻击玩家飞机，玩家需要一边躲避敌机的子弹并且尽可能的消灭更多的敌机，按下方向键控制飞机进行上下左右移动，按下空格键发射子弹，当我方或敌机被子弹命中，会有爆炸动画效果，并且在屏幕左上角会显示玩家得分和生命，每打中一架飞机得100分，当生命值为0后游戏结束，游戏还添加了暂停、重玩功能，实现代码简单，总代码量只有400行，几乎用纯js实现，代码逻辑非常精炼，很适合刚学习编程的小伙伴进行参考。
js小游戏实现简单打飞机
04-01
由于这只是基本实现，所以没有兼容性可言，火狐，马桶等流畅运行，IE就算了，没考虑过，供新手了解一下还是可以的，注释我感觉写的挺多的吧，每个实现都有注释。
打飞机小游戏原生javascript版
01-14
基于h5开发的仿微信中打飞机的游戏，方向键控制，大飞机通过发射子弹打小飞机，有计分，适用于PC端的小游戏
js课程设计打飞机
01-07
JavaScript实现的小程序设计，HTML+CSS+JAVAscript做出的可以运行的游戏项目
javascript打飞机小游戏
07-08
使用JavaScript编写的打飞机的小游戏，对了解和学习JavaScript和喜欢游戏开发的人会很有帮助
Javascript打飞机小游戏
09-22
JavaScript打飞机小游戏是一款基于Web开发的简单休闲游戏，利用了JavaScript语言进行编程。在这个游戏中，玩家控制一架飞机躲避敌机的攻击，同时发射子弹消灭敌人。这款游戏的核心是通过JavaScript实现游戏逻辑，...
js原生打飞机游戏
DHR的博客
08-31 4207
js原生打飞机游戏 分为js，css，img文件夹 index入口文件 &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;audio autoplay=&amp;quot;&amp;quot; loop=&amp;quot;&amp;quot;&amp;amp;gt;&amp;amp;lt;source src=&amp;quot;video/main_bj.wav
javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...
热门推荐
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
11-26 38万+
js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。讲解了JavaScript编程语言制作游戏界面，添加游戏控制、制作元素动画、制作多元素场景，添加碰撞功能、制作精灵动画等功能源码如下：html：<!DOCTYPE html&...
使用 Jasmine 和 React.js 高效测试 JavaScript 应用程序
Jasmine 是一个流行的 JavaScript 测试框架，旨在帮助开发者更好地测试 JavaScript 应用程序。在本书中，我们将学习 Jasmine 的基础知识，包括行为驱动开发（BDD）和工具自动化。我们还将学习如何使用 Jasmine 创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值