JS+HTML开发网页版飞机大战游戏

已于 2023-07-21 22:07:53 修改
阅读量285 收藏
点赞数
文章标签： js html
于 2023-07-21 21:33:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SYEYEE/article/details/113368955
版权

效果：

5912ee4f19f5427f8475d975a9bea457.jpeg

 HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>飞机大战游戏</title>

<style>
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        background-image: linear-gradient(#2C3E50,#4CA1AF);

    }

    .canvasbig {
        position: absolute;
        left: calc(50% - 260px);
        top: calc(50% - 400px);
        width: 520px;
        height: 800px;
        
    }

    .canvasdiv {
        position: absolute;
        cursor: pointer;
        left: 160px;
        top: 500px;
        width: 200px;
        height: 53px;
        background-image: url(img/starting.png);
    }

    .none {
        display: none;
    }
</style>

</head>
<body>

<!-- <script src="js/circle.js"></script> -->

<div class="canvasbig">
    <div class="canvasdiv"></div>
    <canvas width="520" height="800" id="canvas1"></canvas>
</div>

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

</body>
</html>

JS部分代码（代码太多，这里放部分，需要的私聊）：

var canvas1 = document.getElementById("canvas1");
var context = canvas1.getContext('2d');
var canvasbig = document.getElementsByClassName("canvasbig")[0];
//背景图片
var bg = new Image();
bg.src = "img/bg.jpg";
//全民飞机大战标题
var starthead = new Image();
starthead.src = "img/starthead.png";
//我方战斗机
var myplane = new Image();
myplane.src = "img/myplane1.png";
var myplaneX = canvas1.width / 6,
    myplaneY = 730;
//战斗机子弹
var bullet = new Image();
bullet.src = "img/bullet.png";
var bullettime = 10,
    bulletnum = 10,
    bulletarr = [];
//敌机
var enemytime = 0,
    enemyarr = [];
var enemy1 = new Image();
enemy1.src = `img/enemy1.png`;
var enemy2 = new Image();
enemy2.src = `img/enemy2.png`;
var enemy3 = new Image();
enemy3.src = `img/enemy3.png`;
var enemy4 = new Image();
enemy4.src = `img/enemy4.png`;
var enemyall = [enemy1, enemy2, enemy3, enemy4];
//战斗机爆炸
var myplane1boom = new Image();
var myboomnum = 1,
    myboomtime = 0;
//敌机爆炸
var enemychangearr = [];
//boss警告
var warning1 = new Image();
warning1.src = "img/warning1.png"
var warning2 = new Image();
warning2.src = "img/warning2.png";
var warningtime = 0,
    warningchange = 0;
//boss出场背景
var bossbg = new Image();
bossbg.src = "img/bg2.jpg";
var boss = new Image();
boss.src = "img/planeboss.png";
//boss改变飞机速度
var bossattacktime = 0;
var bossattacknum = 1;

var obj = {
    gamestart: 1,
    gameload: 0,
    gamerun: 0,
    gameover: 0,
    dead: 0,
    score: 0,
    life: 3,
    bgy1: -854,
    bgy2: 0,
    warnon: 0,
    bosstime: 0,
    bossattack: 0,
    bgon: function () {
        context.drawImage(bg, 0, this.bgy1, 520, 854);
        context.drawImage(bg, 0, this.bgy2, 520, 854);
    },
    bgchange: function () {
        this.bgy1++;
        this.bgy2++;
        if (this.bgy1 == 0) {
            this.bgy1 = -854;
            this.bgy2 = 0;
        }
    },
    scoring: function () {
        var gradient = context.createLinearGradient(0, 0, 120, 60);
        gradient.addColorStop(0, '#ff9569');
        gradient.addColorStop(1, '#e92569');
        context.font = '30px  sans-serif';
        context.fillStyle = gradient;
        context.fillText("SCORE:" + this.score, 10, 50);
    },
    lifeing: function () {
        context.font = '30px  sans-serif';
        context.fillStyle = "#D55555";
        context.fillText("LIFE:" + this.life, 400, 50);
        if (obj.dead == 1 && myboomnum == 9 && obj.life > 0) {
            obj.dead = 0;
            bullettime = 0;
            bulletnum = 0;
            bulletarr = [];
            enemytime = 0;
            enemyarr = [];
            myboomnum = 1;
            myboomtime = 0;
            enemychangearr = [];
            myplane1boom.src = `img/myplane1boom${myboomnum}.png`;
        } else if (obj.dead == 1 && obj.life == 0) {
            obj.gameover = 1;
        }
    },
    gameovering: function () {
        if (obj.gameover == 1) {
            obj.gamestart = 1;
            obj.gameover = 0;
            obj.dead = 0;
            obj.gamerun = 0;
        }
    },
    starting: function () {
        canvasdiv.className = "canvasdiv";
        obj.life = 3;
        obj.score = 0;
        loadnum = 1;
        loadtime = 0;
        loadrect = 1;
        loadtextblur = true;
        loadtextnum = -1;
        pointnum = 1;
        myplaneX = canvas1.width / 2;
        myplaneY = 730;
        bullettime = 0;
        bulletnum = 0;
        bulletarr = [];
        enemytime = 0;
        enemyarr = [];
        myboomnum = 1;
        myboomtime = 0;
        enemychangearr = [];
        warningtime = 0;
        warningchange = 0;
        bossattacktime = 0;
        bossattacknum = 1;
        obj.bossbgy1 = -2420,
        obj.bossbgy2 = -1640,
        obj.bossbgy3 = -860,
        obj.bg2boss = -262,
        obj.bosstimeblur = true,
        obj.bossattack = 0;
        context.drawImage(starthead, 110, 200);
    },

 

 

SYEYEE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
飞机大战网页版HTML5源码
03-20
飞机大战网页版HTML5源码
html+javascript实现的网页版飞机大战小游戏源码
Python代码大全
12-28 1328
html+javascript实现的网页版飞机大战小游戏源码。
我可以为您提供几个简单的小程序游戏代码示例，分别使用 Python、JavaScript (可以在网页上运行) 和 Java
最新发布
CecilPhilemon的博客
04-27 505
当然，我可以为您提供几个简单的小程序游戏代码示例，分别使用 Python、JavaScript (可以在网页上运行) 和 Java。这些示例将是非常基础的，以便您能够理解核心概念。这段代码可以在浏览器的 JavaScript 控制台或 HTML 页面中运行（如果在 HTML 中，需要用 alert 替换 console.log 来显示结果）。这些代码示例提供了简单的小程序游戏框架，您可以根据自己的需要进行修改和扩展。每个游戏都包含用户交互和基本的游戏逻辑。3. Java - 简单的控制台猜数字游戏。
【HTML+CSS+JavaScript】实现简单网页版的飞机大战
浅陌繁星的博客
12-26 2623
本文分享的是用【HTML+CSS+JavaScript】编写的键盘版飞机大战的代码，且文章末尾有惊喜。键盘的WSAD分别控制飞机的上下左右，K键发射子弹。
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
banzhuan678的博客
06-12 1198
简介： 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏，画质精美的飞机大战手机端游戏源码 网盘下载地址： http://kekewangLuo.net/W1S2LQcqAT20 图片：
HTML5飞机大战
m0_71663621的博客
06-01 583
基于HTML5 Canvas的简单游戏，名为“HTML5飞机大战”。它包括了一个Canvas元素和一个JavaScript脚本。JavaScript脚本定义了四个类：GameObject、Player、Enemy和Bullet，分别代表游戏对象、玩家、敌人和子弹。它还定义了三个变量：player、enemies和bullets，分别代表玩家、敌人和子弹。它还定义了两个函数：spawnEnemy和shoot，分别用于生成敌人和发射子弹。最后，它定义了一个update函数，用于更新游戏状态和绘制游戏画面。在up
js+html5+css3开发飞机大战网页小游戏源码.rar
01-27
总的来说，利用JavaScript、HTML5和CSS3开发飞机大战网页小游戏，既锻炼了开发者的技术能力，也为玩家带来了一种全新的互动体验。这种跨平台的游戏模式，不受设备限制，只要有浏览器，就能随时随地享受游戏的乐趣。...
飞机大战游戏(html+css3+js)
11-06
《飞机大战游戏——HTML5、CSS3与JavaScript的实战应用》 在当今互联网技术日新月异的时代，前端开发已经成为了一门重要的技能。本项目“飞机大战游戏”就是一款运用HTML5、CSS3和JavaScript技术编写的轻量级游戏，...
JS网页版飞机大战游戏特效代码
03-20
总的来说，这个JS网页版飞机大战游戏展示了JavaScript在网页互动娱乐应用中的强大能力，涵盖了事件处理、DOM操作、对象和数组管理等多个核心概念。对于想要学习或提升JavaScript编程技能的人来说，这是一个很好的...
网页版飞机大战
08-18
该游戏属于web开发，技术较为简单，主要使用了Html+jquery,适用于初学者参考
全民飞机大战浏览器网页版
08-06
全民飞机大战网页版
HTML——飞机大战小游戏（完整代码+音乐）.rar
02-22
这是一个由前端技术（HTML等）实现的飞机大战----小游戏，包含完整的代码，同时也有背景音乐，可以供各位学习等使用，欢迎各位下载！
js实现飞机大战小游戏
10-14
主要为大家详细介绍了js实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML+CSS+JS制作【飞机大战】小游戏（键盘版和鼠标版）
2302_81218205的博客
12-25 1296
function Myplane(w, h, x, y, imgurl, boomurl) { //w,h宽高 x,y位置 imgurl和boomurl我方飞机的图片路径。在游戏进行界面中，左上方有得到的分数显示，敌方飞机有三种类型（小，中，大），他们的形状，大小，击落的分数各不同，以合适的速度控制它们的数量，以及运动的速度。//给每一架创建的敌机添加自定义的属性--血量。原文链接：https://blog.csdn.net/huangwfu/article/details/128458321。
飞机大战的HTML
qianmingmaoyao的博客
10-19 735
飞机大战
【源码如下】用html写个游戏，复制代码，立马拥有自己的飞机大战。
weixin_43783942的博客
03-14 1467
用html写一个飞机大战的游戏，空格射击，左右移动。放入txt文件，将后缀改为html即可。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style> /*设置画布大小和背景*/ canvas { background-color: #000; display: block; margin
Html飞机大战(十): 消灭敌机
Fattiger1234的博客
09-06 541
飞机大战，关于敌机的设置
用HTML+CSS+JS做一个飞机大战小游戏
04-04
创建飞机大战游戏需要以下步骤： 1. 设计游戏场景和游戏规则。 2. 使用HTML和CSS创建游戏界面，包括背景、飞机、子弹等元素。 3. 使用JavaScript编写游戏逻辑，包括控制飞机移动、发射子弹、击落敌机等。 4. 添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值