HTML5网投正规真人在线信誉平台全赛车彩票平台app财富民飞机大战网页小游戏源码
鼠标操作。不让前面的小飞机经过。飞机掉落速度越来越快， HTML5全民飞机大战网页小游戏源码，玩法比较为简单，游戏结束后有分数显示，赛车彩票平台app财富网投正规真人在线信誉平台
<!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>HTML5全民飞机大战小游戏 - bokequ.com</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>2、可以用来做分数比拼。左右移动鼠标打击，html
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 load = new Image();var loadnum = 1, loadtime = 0, loadrect = 1;var loadtextblur = true, loadtextnum = -1, pointnum = 1;//我方战斗机var myplane = new Image();myplane.src = "img/myplane1.png";var myplaneX = canvas1.width / 2, myplaneY = 730;//战斗机子弹var bullet = new Image();bullet.src = "img/bullet.png";var bullettime = 0, bulletnum = 0, 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, '#e92758'); context.font = '30px sans-serif'; context.fillStyle = gradient; context.fillText("SCORE:" + this.score, 10, 50); }, lifeing: function () { context.font = '30px sans-serif'; context.fillStyle = "#D28140"; 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); }, loading: function () { loadtime++; loadrect++; if (loadtime == 5) { loadtime = 0; loadnum++; if (loadnum == 10) { loadnum = 1; } load.src = `img/load${loadnum}.png`; } context.beginPath(); context.fillStyle = 'white'; context.fillRect(0, 0, 520, 800); var gradient = context.createLinearGradient(20, 500, 397, 30); gradient.addColorStop(0, '#29bdd9'); gradient.addColorStop(1, '#276ace'); context.fillStyle = gradient; context.fillRect(20, 500, loadrect, 30); context.closePath(); context.drawImage(load, loadrect + 20, 480, 102, 72); }, loadtext: function () { if (loadtextblur == false) { loadtextnum--; } else if (loadtextblur == true) { loadtextnum += 2; } context.beginPath(); context.font = '40px sans-serif'; context.fillStyle = 'black'; context.fillText("加载中 ", 50, 450); context.beginPath(); context.font = '80px sans-serif'; if (pointnum == 1) { context.fillText(". ", 200, 450 - loadtextnum); context.fillText(". ", 240, 450); context.fillText(". ", 280, 450); if (loadtextnum < 0) { pointnum = 2; loadtextnum = 0; loadtextblur = true; } else if (loadtextnum > 39) { loadtextblur = false; } } else if (pointnum == 2) { context.fillText(". ", 200, 450); context.fillText(". ", 240, 450 - loadtextnum); context.fillText(". ", 280, 450); if (loadtextnum < 0) { pointnum = 3; loadtextnum = 0; loadtextblur = true; } else if (loadtextnum > 39) { loadtextblur = false; } } else if (pointnum == 3) { context.fillText(". ", 200, 450); context.fillText(". ", 240, 450); context.fillText(". ", 280, 450 - loadtextnum); if (loadtextnum < 0) { pointnum = 1; loadtextnum = 0; loadtextblur = true; } else if (loadtextnum > 39) { loadtextblur = false; } } context.closePath(); }, myplane: function (e) { myplaneX = e.offsetX; myplaneY = e.offsetY; context.drawImage(myplane, myplaneX - myplane.width / 2, myplaneY - myplane.height / 2); }, bulleton: function () { bullettime++; var bulletX = myplaneX - bullet.width / 2; var bulletY = myplaneY - myplane.height / 2 - bullet.height; var num; if (obj.bossattack == 1) { num = 10 }else{ num = 20 } if (bullettime >= num) { var changearr = [bulletX, bulletY, 0]; bulletarr.push(changearr); bullettime = 0; } }, bulletchange: function () { var result = []; for (var i = 0; i < bulletarr.length; i++) { if (bulletarr[i][1] - bulletarr[i][2] >= 0) { context.drawImage(bullet, bulletarr[i][0], bulletarr[i][1] - bulletarr[i][2]); bulletarr[i][2] += 4; result.push(bulletarr[i]); } } bulletarr = result; }, enemy: function () { enemytime++; var enemynum = parseInt(Math.random() * 4); if (obj.bossattack == 1) { num = 10 }else{ num = 25 } if (enemytime >= num) { if (enemynum == 3 && Math.random() < 0.9) { return; } else { var enemylife = 1 if (enemynum == 3) { enemylife = 5 } var changearr = [Math.random() * 520 - enemyall[enemynum].width / 2, -enemyall[enemynum].height, 0, enemynum, enemylife]; enemyarr.push(changearr); enemytime = 0; } } }, enemychange: function () { var result = []; if (obj.bossattack == 1) { bossattacktime++; if (bossattacktime == 80) { bossattacknum += 0.05; bossattacktime = 0; } } for (let i = 0; i < enemyarr.length; i++) { if (enemyarr[i][1] + enemyarr[i][2] <= canvas1.height) { context.drawImage(enemyall[enemyarr[i][3]], enemyarr[i][0], enemyarr[i][1] + enemyarr[i][2]); if (enemyall[enemyarr[i][3]] == enemy4) { enemyarr[i][2] += 1.5* bossattacknum; } else { enemyarr[i][2] += 2* bossattacknum; } result.push(enemyarr[i]); } } enemyarr = result; }, myplaneboom: function () { obj.dead = 1; myboomtime++; if (myboomtime >= 10) { myplane1boom.src = `img/myplane1boom${myboomnum}.png`; myboomnum++; myboomtime = 0; } context.drawImage(myplane1boom, myplaneX - myplane.width / 2, myplaneY - myplane.height / 2); if (myboomnum == 9) { obj.life -= 1; bulletarr = []; enemyarr = []; myplaneX = canvas1.width / 2; myplaneY = 750; } }, myplaneisbroke: function () { for (let i = 0; i < enemyarr.length; i++) { if (enemyarr[i][0] < myplaneX - myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] < myplaneY - myplane.height / 2 + myplane.height) { if (enemyarr[i][0] + enemyall[enemyarr[i][3]].width > myplaneX - myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] + enemyall[enemyarr[i][3]].height > myplaneY - myplane.height / 2) { obj.myplaneboom(); } } else if (enemyarr[i][0] > myplaneX - myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] < myplaneY - myplane.height / 2 + myplane.height) { if (enemyarr[i][0] < myplaneX - myplane.width / 2 + myplane.width && enemyarr[i][1] + enemyarr[i][2] + enemyall[enemyarr[i][3]].height > myplaneY - myplane.height / 2) { obj.myplaneboom(); } } } }, enemyboom: function () { var result = []; for (let i = 0; i < enemychangearr.length; i++) { enemychangearr[i][3]++; if (enemychangearr[i][3] >= 10) { enemychangearr[i][5].src = `img/enemy${enemychangearr[i][2]}boom${enemychangearr[i][4]}.png`; enemychangearr[i][4]++; enemychangearr[i][3] = 0; } context.drawImage(enemychangearr[i][5], enemychangearr[i][0], enemychangearr[i][1]); if (enemychangearr[i][4] < 6) { result.push(enemychangearr[i]); } }; enemychangearr = result; }, enemyisbroke: function () { for (let i = 0; i < bulletarr.length; i++) { for (let x = 0; x < enemyarr.length; x++) { if (bulletarr[i][0] < enemyarr[x][0] && bulletarr[i][1] - bulletarr[i][2] < enemyarr[x][1] + enemyarr[x][2] + enemyall[enemyarr[x][3]].height && bulletarr[i][1] - bulletarr[i][2] > enemyarr[x][1] + enemyarr[x][2]) { if (bulletarr[i][0] + bullet.width > enemyarr[x][0]) { enemyarr[x][4]--; if (enemyarr[x][4] == 0) { var enemyboom = new Image(); enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]); if (enemyarr[x][3] == 3) { obj.score += 10; } else { obj.score += 2; } enemyarr.splice(x, 1); } bulletarr.splice(i, 1); } } else if (bulletarr[i][0] > enemyarr[x][0] && bulletarr[i][1] - bulletarr[i][2] < enemyarr[x][1] + enemyarr[x][2] + enemyall[enemyarr[x][3]].height && bulletarr[i][1] - bulletarr[i][2] > enemyarr[x][1] + enemyarr[x][2]) { if (bulletarr[i][0] < enemyarr[x][0] + enemyall[enemyarr[x][3]].width) { enemyarr[x][4]--; if (enemyarr[x][4] == 0) { var enemyboom = new Image(); enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]); if (enemyarr[x][3] == 3) { obj.score += 10; } else { obj.score += 2; } enemyarr.splice(x, 1); } bulletarr.splice(i, 1); } } } } }, warning: function () { warningchange++; warningtime++; if (warningtime >= 20) { context.drawImage(warning1, 150, 200); context.drawImage(warning2, 190, 400); if (warningtime >= 80) { warningtime = 0; } } if (warningchange == 500) { obj.warnon = 0; obj.bosstime = 1; } }, bossbgy1: -2420, bossbgy2: -1640, bossbgy3: -860, bg2boss: -262, bosstimeblur: true, bossbgon: function () { context.drawImage(bossbg, 0, this.bossbgy1) context.drawImage(bossbg, 0, this.bossbgy2); context.drawImage(bossbg, 0, this.bossbgy3); if (obj.bosstime == 1) { context.drawImage(boss, 0, this.bg2boss); } }, bossbgchange: function () { this.bossbgy1 += 2; this.bossbgy2 += 2; this.bossbgy3 += 2; this.bg2boss += 2; if (this.bg2boss == 800) { this.bosstime = 0; this.bossattack = 1; }; if (this.bossbgy3 == 800) { this.bossbgy1 = -1540; this.bossbgy2 = -760; this.bossbgy3 = 20; } }, // bossY : -262, // bossX : 0, // bossfirstime : 0, // bosssecondtime : 0, // beatboss : function(){ // context.drawImage(boss,this.bossX,this.bossY); // if(obj.bossY <= 0){ // obj.bossfirstime ++; // if( obj.bossfirstime == 4){ // obj.bossY++; // obj.bossfirstime = 0; // } // }else{ // obj.bosssecondtime++; // if(obj.bosssecondtime == 2){ // obj.bossX++; // obj.bossfirstime = 0; // } // } // }, gua: function () { enemychangearr = []; for (let x = 0; x < enemyarr.length; x++) { var enemyboom = new Image(); enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]); } enemyarr = []; }}setInterval(function () { obj.bgon(); obj.bgchange(); if (obj.gamestart == 1) { obj.starting(); } if (obj.gameload == 1) { if (loadrect >= 397) { obj.gameload = 0; obj.gamerun = 1; } obj.loading(); obj.loadtext(); } if (obj.gamerun == 1) { if (obj.score >= 300 && obj.bosstimeblur == true) { obj.warnon = 1; obj.gua(); obj.bosstimeblur = false; } if (obj.bosstime == 1 || obj.bossattack == 1) { obj.bossbgon(); obj.bossbgchange(); } if (obj.dead == 0) { context.drawImage(myplane, myplaneX - myplane.width / 2, myplaneY - myplane.height / 2); if (obj.bosstime == 0 && obj.warnon == 0) { obj.enemy(); obj.enemychange(); } obj.bulleton(); obj.bulletchange(); if (obj.warnon == 1) { obj.warning(); } } obj.myplaneisbroke(); obj.enemyisbroke(); obj.enemyboom(); obj.lifeing(); obj.gameovering(); obj.scoring(); }}, 10)var canvasdiv = document.getElementsByClassName("canvasdiv")[0];canvasdiv.onclick = function () { canvasdiv.className = "canvasdiv none"; obj.gamestart = 0; obj.gameload = 1;}canvas1.onmousemove = function (e) { if (obj.gamerun == 1 && obj.dead == 0) { obj.myplane(e); this.style.cursor = "none"; } else { this.style.cursor = ""; }}document.onkeydown = function (event) { if (event.keyCode == 8 && obj.gamerun == 1) { obj.gua(); };}HTML5全民飞机大战小游戏是一款突破经典的飞行射击类精品网页小游戏，游玩演示地址http://www.bokequ.com/show/youxi/3/
1、
- 最近发表
- 随机阅读
-
- fiddler2抓包工具中文汉化版下载
- CSS通用/元素/ID/类/子/伪元素选择器
- WordPress音乐主题Always1.8使用教程
- CSS3文本效果text
- js实现手机访问网页自动跳转到手机移动页面
- JavaScript对象中的方法/如sort(参数)方法
- WordPress主题特色图片(缩略图)不显示原因
- wordpress主题纯代码禁止复制文章内容的方法
- 帝国CMS列表页分页标题设置页码
- dedecms实现tag标签伪静态方法
- CSS3过渡效果transition
- JavaScript对象中的方法/如sort(参数)方法
- 李炎恢老师HTML5第一季视频教程下载
- These Crypto Assets Dumped the Most as the Total Market Cap Shed Over $200B (Weekend Watch)
- web前端JavaScript介绍
- 易优eyoucms模板源码安装教程
- wordpess博客主题css/js链接版本号如何去掉
- CSS颜色color与度量单位em
- maolai博客模板wordpress主题免费下载
- CSS背景background样式属性设置
- 搜索
-
- 友情链接
-