HTML5全九游app 官方Kaiyun体育APP入口民飞机大战网页小游戏源码

HTML5全民飞机大战网页小游戏源码，飞机掉落速度越来越快，游戏结束后有分数显示，

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全民飞机大战小游戏是一款突破经典的飞行射击类精品网页小游戏，玩法比较为简单，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>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+js实现飞机大战网页小游戏，游玩演示地址http://www.bokequ.com/sKaiyun体九游app 官方育APP入口how/youxi/3/

1、可以用来做分数比拼。左右移动鼠标打击，