使用canvas构建一个简单的飞机大战

最新推荐文章于 2021-12-05 22:05:00 发布
最新推荐文章于 2021-12-05 22:05:00 发布
阅读量160 收藏 1
点赞数 1
分类专栏： canvas 文章标签： canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aflylong/article/details/118527331
版权

gitee仓库地址：https://gitee.com/aflylong/canvas-the-plane-war.git
包括完整代码以及图片素材

<html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/favicon.ico">
    <title>Document</title>
    <style>
        canvas {
            display: block;//将画布转成块元素，设置页面居中才有效果
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <canvas width="480" height="852" id="cas"></canvas>
</body>

</html>

在这里插入图片描述
图片文件夹的结构，hero：我方飞机，background：背景图，bullet1：子弹，enemy：敌机，start：飞机大战logo，game_pause：游戏暂停图片，game_loading：游戏加载图片

游戏大概五个阶段

// 1.准备阶段 使用定时器将背景图和logo进行绘制
// 2.游戏加载阶段 点击画布开始游戏 绘制三张加载的飞机
// 3. 游戏进行中 绘制我方飞机 绘制子弹 地方飞机 更新生命和分数
// 4. 暂停阶段 鼠标离开画布 飞机(包括敌方飞机)和子弹静止 画布运动
// 鼠标移入 游戏继续 恢复到第三阶段
// 5. 游戏结束 我方飞机发生爆炸 敌方飞机静止
以下都是在js中进行写入

var canvas = document.getElementById('cas');//获取画布元素
var ctx = canvas.getContext('2d');//创建一个CanvasRenderingContext2D对象作为2D渲染的上下文
//在这里可以设置一些初始状态，后面可能会用到的东西等
var start = 0;//游戏初始状态
var loading = 1;//游戏加载中
var running = 2;//游戏运行中
var pause = 3;//游戏暂停
var over = 4;//游戏结束
var score = 0;//游戏分数
var life = 3;//生命值
var state = start;//改变游戏状态
var Width = canvas.width;//获取画布的宽
var Height = canvas.height;//获取画布的高
function getImg(srcc) {//制造img对象
    var img = new Image();
    img.src = srcc;
    return img;
}
var pause = getImg('img/game_pause_nor.png');//暂停
var zidan = getImg('img/bullet1.png')//子弹
//用数组存储起来，方便后面使用
var enboom1 = [//敌机形态1 
'img/enemy1.png',
 'img/enemy1_down1.png', 
 'img/enemy1_down2.png', 
 'img/enemy1_down3.png', 
 'img/enemy1_down4.png'];
var enboom2 = [//敌机形态2
'img/enemy2.png', 
'img/enemy2_down1.png',
 'img/enemy2_down2.png', 
 'img/enemy2_down3.png',
  'img/enemy2_down4.png'];
var enboom3 = [//敌机形态3
'img/enemy3_n1.png', 
'img/enemy3_n2.png', 
'img/enemy3_hit.png',
'img/enemy3_down1.png', 
'img/enemy3_down2.png', 
'img/enemy3_down3.png', 
'img/enemy3_down4.png', 
'img/enemy3_down5.png', 
'img/enemy3_down6.png'];
var heros = [//我方飞机
'img/hero1.png', 
'img/hero2.png', 
'img/hero_blowup_n1.png',
'img/hero_blowup_n2.png', 
'img/hero_blowup_n3.png',
'img/hero_blowup_n4.png'];
//绘制一个运动的背景
//1准备阶段
//绘制一个运动的背景
var bgimg = getImg('img/background.png');
var BG = {
    img: bgimg,
    width: Width,
    height: Height
}
var Log = {
    img: getImg('img/start.png'),
    width: Width,
    height: Height,
    x: 45
}
var loadf = [];
for (var i = 0; i < 4; i++) {
    var str = `img/game_loading${i + 1}.png`
    loadf[i] = getImg(str);
}
var loading = {
    img: loadf,
    width: 187,
    height: 38,
    length: loadf.length
}
var heroObj = [];
for (var i = 0; i < heros.length; i++) {
    heroObj[i] = getImg(heros[i]);
}
var heroMy = {
    img: heroObj,
    width: 99,
    height: 124,
    length: heroObj.length
}
var bulletObj = {
    img: zidan,
    width: 9,
    height: 21
}
var pauseObj = {
    img: pause,
    width: 60,
    height: 45,
    x: Width / 2 - 30,
    y: Height / 2 - 22.5,
}
var enemy1arr = [];
for (var i = 0; i < enboom1.length; i++) {
    enemy1arr[i] = getImg(enboom1[i]);
}
var enemy1Obj = {
    img: enemy1arr,
    width: 57,
    height: 51,
    length: enemy1arr.length,
    life: 5,
    type: 1,
}
var enemy2arr = [];
for (var i = 0; i < enboom2.length; i++) {
    enemy2arr[i] = getImg(enboom2[i]);
}
var enemy2Obj = {
    img: enemy2arr,
    width: 69,
    height: 95,
    length: enemy2arr.length,
    life: 10,
    type: 2,
}
var enemy3arr = [];
for (var i = 0; i < enboom3.length; i++) {
    enemy3arr[i] = getImg(enboom3[i]);
}
var enemy3Obj = {
    img: enemy3arr,
    width: 165,
    height: 261,
    length: enemy3arr.length,
    life: 15,
    type: 3,
}
var scoreObj = {
    name: 'score',
    num: score,
    x: 0,
    y: 40,
    color: 'blue'
}
var lifeObj = {
    name: 'life',
    num: life,
    x: Width - 150,
    y: 40,
    color: 'blue'
}
var overObj = {
    name: 'GAME OVER',
    num: 'PLAY GAME',
    x: 0,
    y: Height / 2 - 20,
    color: 'red'
}
var sky = new Bg(BG);//背景
var log = new Bg(Log);//logo
var load = new Lod(loading);//加载 
var hero = new Hero(heroMy);//实例化我方飞机
var bullets = new Bullet(bulletObj);//实例化子弹
var scores = new dayin(scoreObj)//实例化分数
var lifes = new dayin(lifeObj)//实例化生命值
var gameover = new dayin(overObj);//游戏结束
var enemyxs = new Enemy(enemy1Obj);//实例化敌机
var paused = new Bg(pauseObj);//暂停
var bulletBox = [];//存储子弹
var enemBox = [];
function bulletPaint(arr) {
    for (var i = 0; i < bulletBox.length; i++) {
        bulletBox[i].paint();//将存储的子弹遍历绘制
    }
}

function bulletsPort() {
    for (var i = 0; i < bulletBox.length; i++) {
        bulletBox[i].sport();//将存储的子弹运动起来
    }
}

function delet() {
    for (var i = 0; i < bulletBox.length; i++) {
        if (bulletBox[i].y <= 0 || bulletBox[i].bang) {
            bulletBox.splice(i, 1);//控制子弹的数量
        }
    }
}
function enemPaint(arr) {
    for (var i = 0; i < enemBox.length; i++) {
        enemBox[i].paint();//将存储的敌机遍历绘制
    }
}

function enemsPort() {
    for (var i = 0; i < enemBox.length; i++) {
        enemBox[i].sport();//将存储的敌机运动起来
    }
}

function deletenem() {
    for (var i = 0; i < enemBox.length; i++) {
        if (enemBox[i].y >= Height || enemBox[i].boom) {
            enemBox.splice(i, 1);//控制敌机的数量
        }
    }
}
function hit() {
    for (var i = 0; i < enemBox.length; i++) {
        if (enemBox[i].fillhit(hero)) {
            hero.boom = true;
            enemBox = [];
            console.log(enemBox);
        }
        if (enemBox.length > 0) {
            for (var j = 0; j < bulletBox.length; j++) {
                if (enemBox[i].fillhit(bulletBox[j])) {
                    bulletBox[j].bang = true;
                    enemBox[i].down = true;
                }
            }
        }
    }
}
canvas.onclick = function () {//切换状态为加载
    if (state === start) {
        state = starting;
    } else if (state === over) {
        state = start;
        scores.num = 0;
        lifes.num = 3;
    }
}
canvas.onmousemove = function (e) {//切换状态为加载
    var x = e.offsetX;
    var y = e.offsetY;
    if (state === running) {
        if (x < hero.width / 2) {
            hero.x = 0;
        } else if (x > Width - hero.width / 2) {
            hero.x = Width - hero.width;
        } else {
            hero.x = x - hero.width / 2;
        }
        if (y > hero.Height - hero.height / 2) {
            hero.y = hero.Height - hero.height;
        } else if (y < hero.height / 2) {
            hero.y = 0;
        } else {
            hero.y = y - hero.height / 2;
        }
    }
}
canvas.onmouseout = function () {//切换状态为暂停
    if (state === running) {
        state = pause;
    }
}
canvas.onmouseover = function () {//切换状态为进行
    if (state === pause) {
        state = running;
    }
}
setInterval(function () {
    sky.paint();
    sky.sport();
    if (state === start) {
        log.paint();
    } else if (state === starting) {
        load.paint();
        load.sport();
    } else if (state === running) {
        hero.paint();
        hero.sport();
        hero.shoot();
        bulletPaint();//绘制子弹
        bulletsPort();//子弹运动轨迹
        delet();//超过删除
        enemPaint();//绘制敌机
        enemsPort();//敌机运动
        deletenem();//超出屏幕删除
        scores.paint();//绘制分数
        lifes.paint();//绘制生命值
        hit();
    } else if (state === pause) {
        hero.paint();
        bulletPaint();
        paused.paint();
        enemPaint();
        scores.paint();//绘制分数
        lifes.paint();//绘制生命值
    } else if (state === over) {
        scores.paint();//绘制分数
        lifes.paint();//绘制生命值
        gameover.paint();//绘制游戏结束
    }
}, 30)

function getImg(srcc) {//制造img对象
    var img = new Image();
    img.src = srcc;
    return img;
}
function getNum(min, max) {//获取随机数
    return Math.floor(Math.random() * (max - min) + min);
}
function Bg(config) {//创造背景构造函数
    this.img = config.img;
    this.width = config.width;
    this.height = config.height;
    this.x = config.x || 0;
    this.y = config.y || 0;
    this.y1 = -this.height;
    this.paint = function () {
        ctx.drawImage(this.img, this.x, this.y);//绘制两幅图片避免出现空白
        ctx.drawImage(this.img, this.x, this.y1);
    }
    this.sport = function () {
        this.y += 1;//背景图片移动速度
        this.y1 += 1;//背景图片移动速度
        if (this.y >= this.height) {
            this.y = -this.height;//判断位置是否需要重置
        }
        if (this.y1 == this.height) {
            this.y1 = -this.height;
        }
    }
}
function Lod(config) {//创造加载构建函数
    this.img = config.img;
    this.width = config.width;
    this.height = config.height;
    this.x = 0;
    this.y = Height - this.height;
    this.stateIndex = 0;
    this.tim = 0;
    this.paint = function () {
        ctx.drawImage(this.img[this.stateIndex], this.x, this.y)
    }
    this.sport = function () {
        this.tim++;
        if (this.tim % 5 == 0) {
            this.stateIndex++
            if (this.stateIndex == 4) {
                state = running;
                this.stateIndex = 0;
            }
        }
    }
}
function Hero(config) {//创建我方飞机的构造函数
    this.img = config.img;
    this.width = config.width;
    this.height = config.height;
    this.length = config.length;
    this.x = (Width - this.width) / 2;
    this.y = Height - this.height - 100;
    this.stateIndex = 0;
    this.time = 0;
    this.boom = false;
    this.life = life;
    this.paint = function () {
        ctx.drawImage(this.img[this.stateIndex], this.x, this.y)
    }
    this.sport = function () {
        if (this.boom) {
            this.stateIndex++;
            if (this.stateIndex == this.length) {
                life--;
                lifes.num--;
                this.stateIndex = 0;
                this.boom = false;
                if (life <= 0) {
                    state = over;
                }
            }
        } else {
            this.stateIndex = this.stateIndex == 0 ? 1 : 0;
        }
    }
    this.shoot = function () {
        this.time++;
        if (this.time % 3 == 0) {
            bulletBox.push(new Bullet(bulletObj));
        } else if (this.time % 10 == 0) {
            Math.random() > 0.3 ? enemBox.push(new Enemy(enemy1Obj)) : enemBox.push(new Enemy(enemy2Obj))
        } else if (this.time % 178 == 0) {
            enemBox.push(new Enemy(enemy3Obj))
        }
    }
}
function Bullet(config) {//创建子弹的构造函数
    this.img = config.img;
    this.width = config.width;
    this.height = config.height;
    this.x = hero.x + hero.width / 2 - this.width / 2;
    this.y = hero.y + this.height;
    this.bang = false;
    this.paint = function () {
        ctx.drawImage(this.img, this.x, this.y)
    }
    this.sport = function () {
        this.y -= this.height;
    }
}
function Enemy(config) {
    this.img = config.img;
    this.width = config.width;
    this.height = config.height;
    this.length = config.length;
    this.life = config.life;
    this.type = config.type;
    this.x = Math.random() * (Width - this.width);
    this.y = -this.height;
    this.startIndex = 0;//对应飞机下标
    this.down = false;//是否碰撞
    this.boom = false;
    this.paint = function () {
        ctx.drawImage(this.img[this.startIndex], this.x, this.y)
    }
    this.sport = function () {
        if (this.down) {
            this.life--;
            if (this.life <= 0) {
                this.startIndex++;
                if (this.startIndex == this.length) {
                    this.startIndex = this.length - 1;
                    this.boom = true;
                    scores.num += this.type * 3
                }
            }
        } else {
            if (this.type == 3) {
                this.startIndex = this.startIndex == 0 ? 1 : 0;
            }
        }
        this.y += 2;
    }
    this.fillhit = function (my) {
        return my.x > this.x && my.x < (this.x + this.width) && my.y <= (this.y + this.height) && my.y > 0;
    }
}
function dayin(config) {
    this.name = config.name;
    this.num = config.num;
    this.x = config.x;
    this.y = config.y;
    this.color = config.color;
    this.paint = function () {
        ctx.font = '40px 宋体 bold';
        ctx.fillStyle = this.color;
        ctx.fillText(this.name + ':' + this.num, this.x, this.y)
    }
}
aflylong
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用canvas画布制作的飞机大战
07-28
使用canvas画布制作的飞机大战，比较简单的小游戏，适合用来了解画布,文件夹内包含项目的所有源码。 canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
canvas飞机大战.zip
04-17
总的来说，《canvas飞机大战》是HTML5 canvas技术和JavaScript结合的优秀示例，展示了如何利用这些技术构建互动性强、视觉效果丰富的Web游戏。通过学习这个游戏的实现，开发者可以深入理解canvas的绘图方法、...
使用canvas编写飞机大战游戏
cheer
08-03 697
使用canvas编写飞机大战小游戏 本文章讲述如何使用canvas实现一个飞机大战的小游戏，游戏我取名为fight AO实现可以发射子弹、击败怪兽、自动生成怪兽…怪兽名字为AO，击败AO的叫做Superman。 文章目录使用canvas编写飞机大战小游戏前言一、架构版本二、项目结构三、代码&思路讲解1. 使用canvas1.1 代码1.2 知识点 前言 在了解如何编写游戏过程时，你需要知道vue框架，element ui帮助你快速快速开发。 一、架构版本 ├─┬ @vue/cli-plugi
canvas飞机大战
m0_49266584的博客
12-05 733
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> canvas{ position: absolute; left: 0; right: 0; top.
Canvas：飞机大战
aidu0177的博客
12-18 167
Canvas：飞机大战 最开始我们要初始化信息，我们有五个状态：游戏封面，加载状态，运行状态，游戏暂停，游戏结束。 我们还需要 得分--score，生命--life。 var START = 1;//初始状态 var LOADING = 2;//加载状态 var RUNNING = 3;//游戏运行状态 var WAIT = 4;//游戏暂停状态 var GAMEOV...
canvas：飞机大战
weixin_30933531的博客
12-13 130
最开始我们要初始化信息，我们有五个状态，游戏封面，加载状态，运行状态，游戏暂停，游戏结束 我们还需要得分score，生命life var START = 1;//初始状态 var LOADING = 2;//加载状态 var RUNNING = 3;//游戏运行状态 var WAIT = 4;//游戏暂停状态 var GAMEOVER = 5;//游戏结束状态 var sta...
html5-fly_HTML5游戏_canvas源码_飞机大战_
10-04
HTML5游戏，特别是基于Canvas的《飞机大战》，是利用现代浏览器的HTML5技术构建的交互式游戏。HTML5是Web开发领域的一个重大进步，它引入了许多新的元素、API和功能，使得开发者能够创建出更加丰富、动态且无需插件...
canvas 飞机大战小游戏
01-19
它展示了如何使用这两项技术构建一个简单的互动游戏，包括图形绘制、动画制作、事件处理、游戏逻辑和用户交互等多个方面。通过学习和实践此类项目，开发者可以深入理解Canvas和JavaScript在游戏开发中的运用，进一步...
javascript canvas画布编写飞机大战.zip
10-24
本项目"javascript canvas画布编写飞机大战.zip"就是利用这个特性，构建了一个激动人心的飞行射击游戏——飞机大战。在这个游戏中，玩家可以控制一架飞机，与敌人在天空中展开激烈的战斗。 Canvas API是JavaScript...
HTML5游戏全民飞机大战源码 v1.0
12-03
HTML5游戏全民飞机大战源码是一款基于HTML5技术开发的轻量级游戏，适用于学习和简单娱乐。HTML5是现代网页开发的主流标准，它引入了许多新的元素、API和特性，使得开发者能够创建出更具交互性和动态效果的网页应用，...
html5 canvas技术实现飞机大战小游戏
02-26
html5 canvas技术实现飞机大战小游戏
canvas效果~飞机大战
06-06
canvas开发小游戏，效果流畅性比较不错，资源共享，含有img文件
JS实现飞机大战
06-28
html+css基本框架得搭建，定时器，方法，对象，基本循环语句实现简单的飞机大战
原生JS简单版飞机大战游戏
11-07
原生JS简单版飞机大战游戏
飞机大战资源素材及完整代码
09-04
飞机大战资源素材及完整代码，包含飞机大战所需的图片和音乐素材及完整的实现代码。
canvas绘制飞机大战
Alice_yo的博客
12-27 647
最开始我们要初始化信息：我们有五个状态 第一阶段：游戏欢迎状态 0 START 第二阶段：游戏加载状态 1 LOADING 第三阶段：游戏运行状态 2 RUNNING 第四阶段：游戏暂停阶段 3 PAUSE 第五阶段：游戏结束阶段 4 GAMEOVER 飞机大战HTML5canvas版 <script type="tex...
用js的canvas做一个飞机大战
bian2845972116的博客
12-05 3214
首先我们绘制一个canvas区域，确实其宽高为480px*852px;水平居中 <!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,
用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）
07-22 477
canvas绘图 该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。 飞机大战 前面几期用canvas绘制了太极图和时钟。今天继续来用canvas绘制一个小游戏：飞机大战。 飞机大战想必大家都知道吧 ———————————————— 版权声明：本文为CSDN博主「丶帆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net
Canvas做简易的飞机大战
Unfortunatelyif的博客
07-21 347
//首先创建canvas <canvas id="canvas" width="480px" height="650px"></canvas> 根据游戏的特性我们将游戏分为5个阶段 利用构造函数进行编辑，首先需要定义五个阶段的常量 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 0 游戏初始化 // 0.1 定义将游戏划分为的5个阶段常量 co
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值