html打飞机游戏,js打飞机小游戏

最新推荐文章于 2024-06-18 19:09:35 发布
最新推荐文章于 2024-06-18 19:09:35 发布
阅读量356 收藏
点赞数

* {

margin: 0px;

padding: 0px;

}

canvas {

background: url(img/bg.png) repeat 0px 700px;

}

var canvas = document.getElementById('canvas');

canvas.width = document.documentElement.clientWidth;

canvas.height = document.documentElement.clientHeight;

var ctx = canvas.getContext('2d');

//背景图片

var bg_a = 0;

//背景图移动速度

function Bgmove() {

bg_a += 0.5;

canvas.style.backgroundPosition = 0 + 'px' + ' ' + bg_a + 'px';

}

//进度条:跟图片加载完成进度相同

function Loading() {

this.width = canvas.width / 2;

this.height = 15;

this.x = canvas.width / 4;

this.y = (canvas.height - this.height) / 2;

}

Loading.prototype.progress1 = function() {

ctx.beginPath();

ctx.strokeRect(this.x, this.y, this.width, this.height);

ctx.stroke();

ctx.closePath();

}

Loading.prototype.progress2 = function() {

ctx.beginPath();

ctx.fillRect(this.x, this.y, this.width, this.height);

ctx.fill();

ctx.closePath();

}

var load1 = new Loading();

load1.progress1();

var load2 = new Loading();

var load2_w = load2.width;

ctx.lineCap = 'round';

load2.width = 0;

load2.progress2();

//文字

function Font(font, x, y) {

this.font = font;

this.x = x;

this.y = y;

}

Font.prototype.Fontdraw = function() {

ctx.font = '30px 宋体';

ctx.strokeText(this.font, this.x, this.y);

ctx.fillText(this.font, this.x, this.y);

}

//开始游戏

var font1 = new Font('开始游戏', (canvas.width - 4 * 30) / 2, canvas.height - 30);

font1.Fontdraw();

//图片数组

var arr = ['img/bg.png', 'img/bomb.png', 'img/bullet1.png', 'img/bullet2.png', 'img/enemy1.png', 'img/enemy2.png', 'img/enemy3.png', 'img/enemy4.png', 'img/enemy5_fly_1.png', 'img/hero.png', 'img/game_pause.png', 'img/bullet1.png'];

var bg = ''; //背景图片

var hero = ''; //战机图片

var bullet1 = ''; //子弹

var enemy1 = ''; //敌机1

var enemy2 = ''; //敌机2

var enemy3 = ''; //敌机3

var enemy4 = ''; //敌机4

var bomb = ''; //道具

var index = 0;

var game_pause = ''; //暂停按钮

var countDown = 4; //游戏倒计时开始

for(var i = 0; i < arr.length; i++) {

var img = new Image();

img.src = arr[i];

if(/img\/bg.png/.test(arr[i])) {

bg = img;

}

if(/img\/hero.png/.test(arr[i])) {

hero = img;

}

if(/img\/bullet1.png/.test(arr[i])) {

bullet1 = img;

}

if(/img\/game_pause.png/.test(arr[i])) {

game_pause = img;

}

if(/img\/enemy1.png/.test(arr[i])) {

enemy1 = img;

}

if(/img\/enemy2.png/.test(arr[i])) {

enemy2 = img;

}

if(/img\/enemy3.png/.test(arr[i])) {

enemy3 = img;

}

if(/img\/enemy4.png/.test(arr[i])) {

enemy4 = img;

}

if(/img\/bomb.png/.test(arr[i])) {

bomb = img;

}

img.onload = function() {

index++;

load2.width = (index / arr.length) * load2_w;

load2.progress2();

//画布点击游戏开始

canvas.onclick = function() {

game = true;

var timer = setInterval(function() {

ctx.clearRect(0, 0, canvas.width, canvas.height)

countDown -= 1;

ctx.font = '40px 黑体';

ctx.strokeText(countDown, (canvas.width - 40 / 2) / 2, (canvas.height - 40 / 2) / 2);

ctx.fillText(countDown, (canvas.width - 40 / 2) / 2, (canvas.height - 40 / 2) / 2);

if(countDown <= 0) {

clearInterval(timer);

if(index >= arr.length) {

move();

}

canvas.onclick = '';

}

}, 1000)

}

}

}

var num = 0; //用来计算子弹和飞机数量

var arrBullet = []; //子弹数组

var arrEnemy1 = []; //敌机1数组

var arrEnemy2 = []; //敌机2数组

var arrEnemy3 = []; //敌机3数组

var arrEnemy4 = []; //敌机4数组

var arrBomb = [];

var count = 0; //分数

var game = false; //控制move函数动画

var heroHP = 3; //战机生命值

function move() {

num++;

//把num清0防止num过大

if(num > 1800) {

num = 0;

}

//分数

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.font = '20px 宋体';

ctx.strokeText('分数:' + count, 10, 30);

ctx.fillText('分数:' + count, 10, 30);

Bgmove(); //背景图片的滑动

stop.Stopdraw(); //暂停按钮

heroPlane.heroDraw(); //画出战机

//子弹

if(num % 8 == 0) {

var Bullet1 = new Bullet({

x: heroPlane.x + (hero.width / 6) / 2 - (bullet1.width / 3),

y: heroPlane.y + hero.height,

speed: 50,

src: bullet1,

});

arrBullet.push(Bullet1);

}

for(var i = 0; i < arrBullet.length; i++) {

arrBullet[i].y -= arrBullet[i].speed;

if(arrBullet[i].y < -bullet1.height) {

arrBullet.splice(i, 1);

i--;

continue;

}

arrBullet[i].bulletDraw(); //画子弹

}

//敌机1数量

if(num % 100 == 0) {

var enemy1Plane = new Plane(enemy1, ran(canvas.width-enemy1.width/5, 0), -enemy1.height, 1, 0, 5);

arrEnemy1.push(enemy1Plane);

}

//敌机2数量

if(num % 1000 == 0) {

var enemy2Plane = new Plane(enemy2, ran(canvas.width-enemy2.width/10, 0), -enemy2.height, 0.5, 0, 9)

arrEnemy2.push(enemy2Plane);

}

//敌机3数量

if(num % 200 == 0) {

var enemy3Plane = new Plane(enemy3, ran(canvas.width-enemy3.width/7, 0), -enemy3.height, 1, 0, 5)

arrEnemy3.push(enemy3Plane);

}

//敌机4数量

if(num % 800 == 0) {

var enemy4Plane = new Plane(enemy4, ran(canvas.width-enemy4.width, 0), -enemy4.height, 0.5, 0, 5)

arrEnemy4.push(enemy4Plane);

}

//道具数量

if(num % 3000 == 0) {

var bomb1 = new Plane(bomb, ran(286, 0), 0, 4, 0, 5);

arrBomb.push(bomb1);

}

//敌机移动

function EnemyCount(arrEnemy) {

for(var k = 0; k < arrEnemy.length; k++) {

arrEnemy[k].y += arrEnemy[k].speed;

if(arrEnemy[k].y > canvas.height) {

arrEnemy.splice(k, 1);

console.log(11)

k--;

continue;

}

//根据分数改变敌机的速度

if(count >= 2000) {

arrEnemy[k].speed = 1;

}

if(count >= 5000) {

arrEnemy[k].speed = 1.5;

}

if(count >= 10000) {

arrEnemy[k].speed = 2;

}

if(count >= 20000) {

arrEnemy[k].speed = 3;

}

if(count >= 30000) {

arrEnemy[k].speed = 4.5;

}

if(arrEnemy == arrEnemy1) {

arrEnemy[k].enemy1Draw();

}

if(arrEnemy == arrEnemy2) {

arrEnemy[k].enemy2Draw();

}

if(arrEnemy == arrEnemy3) {

arrEnemy[k].enemy3Draw();

}

if(arrEnemy == arrBomb) {

arrEnemy[k].bombDraw();

}

if(arrEnemy == arrEnemy4) {

arrEnemy[k].enemy4Draw();

}

}

}

EnemyCount(arrEnemy1);

EnemyCount(arrEnemy2);

EnemyCount(arrEnemy3);

EnemyCount(arrEnemy4);

EnemyCount(arrBomb);

//判断是否击中敌机

function kill(arrEnemy, enemyWidth, enemyHeight, score) {

for(var i = 0; i < arrEnemy.length; i++) {

for(var j = 0; j < arrBullet.length; j++) {

if(arrBullet[j].x >= arrEnemy[i].x && arrBullet[j].x <= arrEnemy[i].x + enemyWidth && arrBullet[j].y <= arrEnemy[i].y + enemyHeight && arrBullet[j].y >= arrEnemy[i].y - enemyWidth) {

arrEnemy[i].hp -= 1;

arrEnemy[i].boom1 += enemyWidth;

count += score;

arrBullet.splice(j, 1);

if(arrEnemy[i].hp == 0) {

arrEnemy.splice(i, 1);

i--;

}

j--;

break;

}

}

}

}

kill(arrEnemy1, enemy1.width / 5, enemy1.height, 50);

kill(arrEnemy2, enemy2.width / 10, enemy2.height, 100);

kill(arrEnemy3, enemy3.width / 7, enemy3.height, 50);

kill(arrEnemy4, enemy4.width , enemy4.height, 80);

//判断是否吃到道具

for(var j = 0; j < arrBomb.length; j++) {

if(arrBomb[j].x + bomb.width >= heroPlane.x && arrBomb[j].x <= heroPlane.x + bomb.width && arrBomb[j].y >= heroPlane.y && arrBomb[j].y <= heroPlane.y + hero.height) {

bubool = true;

arrBomb.splice(j, 1);

j--;

continue;

}

}

//判断战机是否被敌机碰撞

function die(Arr, enemyWidth) {

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

if(Arr[i].x + enemyWidth >= heroPlane.x && Arr[i].x <= heroPlane.x + (hero.width / 6) && Arr[i].y >= heroPlane.y && Arr[i].y <= heroPlane.y + hero.height) {

heroPlane.hp -= 1;

if(heroPlane.hp == 40) {

heroPlane.boom1 += hero.width / 6;

}

if(heroPlane.hp == 30) {

heroPlane.boom1 += hero.width / 6;

}

if(heroPlane.hp == 20) {

heroPlane.boom1 += hero.width / 6;

}

if(heroPlane.hp == 10) {

heroPlane.boom1 = hero.width / 6 * 5;

}

if(heroPlane.hp <= 0) {

game = false;

stop = null;

canvas.onmousemove = null;

ctx.font = '20px 宋体';

ctx.strokeText('游戏结束,您的得分为:' + count, (canvas.width - 180) / 2, (canvas.height / 2));

ctx.fillStyle = 'red';

ctx.fillText('游戏结束,您的得分为:' + count, (canvas.width - 180) / 2, (canvas.height / 2));

}

}

}

}

die(arrEnemy1, enemy1.width / 6);

die(arrEnemy2, enemy2.width / 10);

die(arrEnemy3, enemy3.width / 7);

die(arrEnemy4, enemy4.width );

if(game == true) {

window.requestAnimationFrame(move);

}

}

//随机函数

function ran(max, min) {

return Math.round(Math.random() * (max - min) + min);

}

//飞机类

function Plane(src, x, y, speed, boom1, hp) {

this.src = src; //图片

this.x = x;

this.y = y;

this.speed = speed;

this.boom1 = boom1; //雪碧图宽度位移量

this.hp = hp; //血量

}

Plane.prototype = {

heroDraw: function() {

ctx.drawImage(this.src, this.boom1, 0, hero.width/6, hero.height, this.x, this.y, (hero.width/6), hero.height);

},

enemy1Draw: function() {

ctx.drawImage(this.src, this.boom1, 0, enemy1.width/5, enemy1.height, this.x, this.y, (enemy1.width/5), enemy1.height)

},

enemy2Draw: function() {

ctx.drawImage(this.src, this.boom1, 0, enemy2.width/10, enemy2.height, this.x, this.y, (enemy2.width/10), enemy2.height)

},

enemy3Draw: function() {

ctx.drawImage(this.src, this.boom1, 0, enemy3.width/7, enemy3.height, this.x, this.y, (enemy3.width/7), enemy3.height)

},

enemy4Draw: function() {

ctx.drawImage(this.src, this.boom1, 0, enemy4.width, enemy4.height, this.x, this.y, enemy4.width, enemy4.height)

},

bombDraw: function() {

ctx.drawImage(this.src, this.boom1, 0, bomb.width, bomb.height, this.x, this.y, bomb.width, bomb.height)

},

}

var heroPlane = new Plane(hero, canvas.width / 2 - ((hero.width/6) / 2), canvas.height - hero.height, 0, 0, 50); //实例化战机

var bubool = false; //判断是否吃到道具

var bombTime = 2000; //道具持续时间

//子弹

function Bullet(obj) {

this.x = obj.x;

this.y = obj.y;

this.speed = obj.speed;

this.src = obj.src;

}

Bullet.prototype = {

bulletDraw: function() {

bombTime-=1;

if(bubool == true&&bombTime>=0) {

this.src = bomb;

ctx.drawImage(this.src, this.x - 15, this.y - hero.height);

} else {

ctx.drawImage(this.src, this.x, this.y);

bombTime = 2000;

bubool =false;

}

}

}

//游戏暂停

function Stop(x, y) {

this.x = x;

this.y = y;

}

Stop.prototype.Stopdraw = function() {

ctx.drawImage(game_pause, 0, 0, (game_pause.width/2), game_pause.height, this.x, this.y, game_pause.width/2, game_pause.height)

}

var stop = new Stop(canvas.width - 35, canvas.height - 50);

//战机移动

canvas.onmousemove = function(e) {

var e = e || window.event;

var clickX = e.clientX - canvas.offsetLeft - (hero.width / 6) / 2;

var clickY = e.clientY - canvas.offsetTop - hero.height / 2;

heroPlane.x = clickX;

heroPlane.y = clickY;

//判断战机是否碰壁

if(heroPlane.x >= canvas.width - (hero.width / 6) / 2) {

heroPlane.x = canvas.width - (hero.width / 6) / 2;

}

if(heroPlane.x <= -((hero.width / 6) / 2)) {

heroPlane.x = -((hero.width / 6) / 2);

}

if(heroPlane.y >= canvas.height - (hero.height / 2)) {

heroPlane.y = canvas.height - (hero.height / 2);

}

//游戏点击暂停

if(e.clientX - canvas.offsetLeft >= stop.x && e.clientY - canvas.offsetTop >= stop.y) {

canvas.onclick = function() {

canvas.onclick = '';

if(game == false) {

game = true;

move();

} else {

game = false;

}

}

}

}

//兼容移动端

canvas.addEventListener('touchmove', function(e) {

var e = e || window.event;

var clickX = e.touches[0].clientX - canvas.offsetLeft - (hero.width / 6) / 2;

var clickY = e.touches[0].clientY - canvas.offsetTop - hero.height / 2;

heroPlane.x = clickX;

heroPlane.y = clickY;

//判断战机是否碰壁

if(heroPlane.x >= canvas.width - (hero.width / 6) / 2) {

heroPlane.x = canvas.width - (hero.width / 6) / 2;

}

if(heroPlane.x <= -((hero.width / 6) / 2)) {

heroPlane.x = -((hero.width / 6) / 2);

}

if(heroPlane.y >= canvas.height - (hero.height / 2)) {

heroPlane.y = canvas.height - (hero.height / 2);

}

})

//图片

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bg.png

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

hero.png

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bullet1.png

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

![enemy2.png](http://upload-images.jianshu.io/upload_images/3969253-72bc10189983de97.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

enemy3.png

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

enemy4.png

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

game_pause.png

aed9d9353939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

bomb.png

火箭统
关注
html5打飞机游戏
12-27
打飞机游戏,html5版,彩色简易版,快速嵌入你的网站里,代码简单易懂,下载即用
HTML5小游戏打飞机
12-10
HTML5小游戏打飞机,游戏画面为2D,超强悍的音频效果,运用的技术为Python
HTML+JS实现飞机大作战页面游戏(1)
最新发布
warghostwu的博客
06-18 154
HTML+JS实现飞机大作战页面游戏
HTML5打飞机游戏
chisu1439的博客
02-13 375
戳戳看：测试地址 手机也可以访问哦 源码的话，直接在服务器上下载好了。 现在速度比较慢，效率不高。也希望高手指点一下。 转载于:https://my.oschina.net/to...
html5 微信打飞机小游戏
10-22
自己做的一个打飞机的小游戏 ！ 有什么不足的地方欢迎评论！
基于HTML的飞机射击游戏
qq_44597856的博客
09-06 310
基于HTML的飞机射击游戏
用 js+html 实现一个打飞机小游戏
07-04
使用 js + html 实现的打飞机小游戏，玩家飞机和敌方飞机使用dom进行绘制，采用背景图填充div的方式生成飞机和子弹，在点击开始按钮后，页面上方会源源不断的出现飞机，并且攻击玩家飞机，玩家需要一边躲避敌机的...
打飞机html'小游戏
12-18
总的来说，《打飞机HTML小游戏》融合了HTML5、JavaScript和CSS3等多种前端技术，展示了它们在构建交互式、动态的网页应用方面的强大能力。通过学习和理解这些知识点，开发者可以进一步提升自己的Web开发技能，创作出...
JavaScript用200行代码制作打飞机小游戏实例
10-19
从给定文件信息中，可以提炼出关于使用JavaScript制作打飞机小游戏的知识点如下： 1. JavaScript游戏编程入门 初学者可以通过制作简单的游戏来学习JavaScript编程。例如，文章提到了作者通过200行代码完成了自己的...
一个美观好玩的小游戏打飞机的源代码.zip
06-19
《打飞机小游戏源代码解析与技术探讨》 打飞机小游戏，作为一款经典的休闲娱乐游戏，深受广大玩家喜爱。它的源代码不仅展示了游戏开发的基本逻辑，也是学习编程和游戏设计的优秀素材。本篇文章将深入剖析这款小游戏...
html5 打飞机游戏
08-31
非常不错的html5 打飞机游戏 代码
HTML——飞机大战小游戏（完整代码+音乐）.rar
02-22
这是一个由前端技术（HTML等）实现的飞机大战----小游戏，包含完整的代码，同时也有背景音乐，可以供各位学习等使用，欢迎各位下载！
js小游戏实现简单打飞机
04-01
由于这只是基本实现，所以没有兼容性可言，火狐，马桶等流畅运行，IE就算了，没考虑过，供新手了解一下还是可以的，注释我感觉写的挺多的吧，每个实现都有注释。
原生js实现 打飞机游戏demo
08-06
简单的利用原生js实现打飞机游戏，代码易懂，没有复杂的逻辑，适用于初学js的新手练习
纯JavaScript,CSS版打飞机小游戏
05-15
说明:--打飞机小游戏--,按 j 打子弹,上下左右移动,游戏可暂停,共分为九关,每一关过后敌机速度会变快每杀死10个敌人就完成一关,(可以撞死敌人`),游戏小bug:暂停后敌人不动,我方会动,可以发射子弹,点击恢复子弹全部可以按照之前排列的飞出去!虽是BUG,也其乐无穷~
html也能打飞机
asdfghjkl978564的博客
11-29 583
(1)编辑一个html 1 <form> 2 <div class="board"> 3 <div id="scorebar">Your scores:&nbsp;&nbsp;&nbsp;</div> 4 <input id="bonus_01" ...
js打飞机小游戏
qq_35919219的博客
04-26 168
js打飞机小游戏 链接：https://pan.baidu.com/s/10SMTy9zrc288B3tGbHUpOA 提取码：u02x
JavaScript之打飞机小游戏 html
diaodaya5842的博客
09-22 734
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metah...
纯JavaScript实现微信打飞机小游戏
"纯javascript模仿微信打飞机小游戏" 在本文中，我们将探讨如何使用纯JavaScript来实现一个类似于微信上的打飞机小游戏。这个小游戏是专为网页设计的，具有竖长形的界面，模拟手机屏幕的视觉体验，并且游戏运行流畅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值