js教程

JS+HTML开发一个飞机大战小游戏JS实例

我的站长站 2023-05-25 人阅读

源码示例:

<!doctype html>
<html>
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                *{padding: 0;margin: 0;}
                #con{
                        width: 320px; height: 566px; margin: 0 auto;
                        border: 1px solid green; cursor: pointer;
                        position: relative; margin-top: 10px; overflow: hidden;
                }
                #box{
                        width: 320px; height: 566px;
                        margin: 0 auto; overflow: hidden; 
                        position: absolute; z-index: 1;
                }
                #index,#copy{
                        background: url('./images/background_1.png') no-repeat;
                }
                #me{
                        display: block; position: absolute;
                        left: 100px; top: 400px; z-index: 10; opacity: 1;
                }
                .buiOne{
                        display: block;position: absolute;z-index: 10;
                }
                .enemyOne,.enemyTwo,.enemyThree{
                        display: block;position: absolute;z-index: 10;
                }
                .explode{
                        display: block;position: absolute;z-index: 10;
                }
                #over,#start{
                        position: absolute;z-index: 16; border: 2px solid #5E6262;
                        left: 100px; top: 230px; line-height: 40px; border-radius: 10px; width: 100px; text-align: center;opacity: 1;
                        background: #CCCCCC; display: none;
                }
                #start:hover{background: #666;}
                .copy{
                        display: block; position: absolute;z-index: 15; width: 100%; height: 100%;
                }
                #tmpscore{position: absolute;z-index: 20;}
        </style>
        <script>
                var timeGo;
                window.onload = function(){
                        setInterval(function(){explodeNum++},20000);
                        // 分数
                        var score = 0;
                        // 等级
                        var level = 0;
                        var explodeNum = 20;
                        // 射击定时次数 [开始时间,间隔]
                        var shootTimes = [30,8];[/align]
 
                        // 敌军生成定时次数 [开始时间,间隔]
                        var enemyTimes = [30,60];
                        var timing;
                        // 获取元素box 、index 和copy
                        var con         = document.getElementById('con');
                        var box         = document.getElementById('box');
                        var index         = document.getElementById('index');
                        var copy         = document.getElementById('copy');
                        var me         = document.getElementById('me');
 
                        // 背景图滚动相关
                        index.style.height = box.offsetHeight+'px';
                        copy.style.height = box.offsetHeight+'px';
                        copy.innerHTML = index.innerHTML;                
 
                        // 键盘上下左右空格事件
                        document.onkeydown=function(event){
                                var e = event || window.event || arguments.callee.caller.arguments[0];
                                if(e && e.keyCode ==37 && (me.offsetLeft>0)){
                                        me.style.left = (me.offsetLeft-10)+'px';
                                }
                                if(e && e.keyCode ==38 && (me.offsetTop>0)){
                                        me.style.top = (me.offsetTop-10)+'px'; 
                                }
                                if(e && e.keyCode ==39 && (me.offsetLeft<255)){
                                        me.style.left = (me.offsetLeft+10)+'px'; 
                                }
                                if(e && e.keyCode ==40 && (me.offsetTop<485)){
                                                me.style.top = (me.offsetTop+10)+'px'; 
                                }
                                if(e && e.keyCode ==32){
                                                clearInterval(timing);
                                                start();                                
                                }
                                if(e && e.keyCode ==90){
                                        if(explodeNum <=0){
                                                return false;
                                        }
                                        explodeNum--;
                                        // 特技
                                        var width = con.offsetWidth;
                                        var height = con.offsetHeight+50;
                                        (function(e){
                                                        var time = new Date().getTime()+1000*e;
                                                        var tmp = setInterval(function(){
                                                                for(var i=-25; i<width-10; i+=20){
                                                                        shoot(i,height,'./images/bullet2.png');
                                                                }
                                                                if(new Date().getTime()>time){
                                                                        clearInterval(tmp);
                                                                }
                                                        },100)
                                        })(2);
                                }
                        }
 
                        // 飞机射击
                        function shoot(left,top,imgSrc){
                                var left = left ? left : me.offsetLeft;
                                var top = top ? top : me.offsetTop;
                                var imgSrc = imgSrc ? imgSrc :'./images/bullet1.png';
                                (function(){
                                        var bui = document.createElement("img");
                                        bui.setAttribute('src',imgSrc);
                                        bui.setAttribute('class','buiOne');
                                        bui.setAttribute('style','left:'+(left+31)+'px;top:'+(top-15)+'px;');
                                        con.appendChild(bui);
                                        return 1;
                                })();
                        }
 
                        // 定时器
                        timeGo = function(){
                                box.setAttribute('style','opacity:1');
                                me.setAttribute('style','opacity:1;');
                                var start = document.getElementById('start');
                                start.setAttribute('style','display:none;');
 
                                timing = setInterval(function(){
                                        /**  子弹射击  **/ 
                                        (function(){
                                                if(score>50)         shootTimes[1]        =6;
                                                if(score>100)         shootTimes[1]        =5;
                                                if(score>150)         shootTimes[1]        =4;
                                                if(score>200)         shootTimes[1]        =3;
                                                if(shootTimes[0] > 0){
                                                        shootTimes[0] --;
                                                }else{
                                                        shootTimes[0] = shootTimes[1];
                                                        shoot();
                                                }
                                        })();
 
                                        // 等级 
                                        (function(){level=Math.floor(score/100)})();
 
                                        /**  背景滚动  **/ 
                                        box.scrollTop-=4;
                                        if(box.scrollTop == 0){
                                                box.scrollTop = box.offsetHeight;
                                        }
 
                                        /**  敌军生成  **/ 
                                        (function(){
                                                enemyTimes[1] = 60-level*5;
                                                if(enemyTimes[0] > 0){
                                                        enemyTimes[0] --;
                                                }else{
                                                        enemyTimes[0] = enemyTimes[1];
                                                        makeEnemy();
                                                }
 
                                                function makeEnemy(){
                                                        var enemy = document.createElement("img");
                                                        var n = Math.ceil(Math.random()*100);
                                                        if(n>30){
                                                                enemy.setAttribute('src','./images/enemy1_fly_1.png');
                                                                enemy.setAttribute('class','enemyOne');
                                                                enemy.setAttribute('blood','3');
                                                        }else if(n>2){
                                                                enemy.setAttribute('src','./images/enemy3_fly_1.png');
                                                                enemy.setAttribute('class','enemyTwo');
                                                                enemy.setAttribute('blood','10');        
                                                        }else if(n>0){
                                                                enemy.setAttribute('src','./images/enemy2_fly_1.png');
                                                                enemy.setAttribute('class','enemyThree');        
                                                                enemy.setAttribute('blood','40');
                                                        }else{
                                                                return false;
                                                        }
                                                        var left = Math.random()*200;
                                                        enemy.setAttribute('style','left:'+left+'px;top:0px;');
                                                        con.appendChild(enemy);
                                                }
                                        })();
 
                                        /**  飞行,超出消失  **/
                                        // 获取所有图片元素
                                        var bui = document.getElementsByTagName('img');
 
                                        // 定义所有敌军
                                        var enemy = new Array();
                                        // 定义所有子弹
                                        var buis = new Array();
 
                                        // 子弹,敌军,飞行事件   超出范围消失事件
                                        for(e in bui){
                                                if(typeof(bui[e])==='object'){
                                                        var classs = bui[e].getAttribute('class'); 
                                                        if((classs =='enemyOne')||(classs == 'enemyTwo')||(classs == 'enemyThree')){
                                                                // 给大型飞机定义速度
                                                                speedOne         =        (classs == 'enemyOne')                 ? -1 : 0;
                                                                speedTwo         =        (classs == 'enemyTwo')                 ? -2 : 0;
                                                                speedThree         =        (classs == 'enemyThree')         ? -3 : 0;
                                                                bui[e].style.top = bui[e].offsetTop+5+speedThree+speedTwo+speedOne+level/2+'px';
                                                                // 敌军消失事件
                                                                if(bui[e].offsetTop>520){
                                                                        con.removeChild(bui[e]);
                                                                }else{
                                                                        enemy.unshift(bui[e]);
                                                                }
                                                        }else if(bui[e].getAttribute('class')=='buiOne'){
                                                                bui[e].style.top = bui[e].offsetTop-25+'px';
                                                                // 子弹消失事件
                                                                if(bui[e].offsetTop<-25){
                                                                        con.removeChild(bui[e]);
                                                                }else{
                                                                        buis.unshift(bui[e]);
                                                                }
                                                        }
                                                }
                                        }
 
                                        // 子弹和敌军撞击判断
                                        for(var i in enemy){
                                                for(var j in buis){
                                                        if(impact(enemy[i],buis[j])){
                                                                var blood = parseInt(enemy[i].getAttribute('blood'));
                                                                enemy[i].setAttribute('blood',blood-1);
                                                                if(enemy[i].getAttribute('class')=='enemyOne'){
                                                                        if(blood<0){
                                                                                explode(enemy[i],2);
                                                                        }
                                                                }else if(enemy[i].getAttribute('class')=='enemyTwo'){
                                                                        if(blood<0){
                                                                                explode(enemy[i],3);
                                                                        }
                                                                }else if(enemy[i].getAttribute('class')=='enemyThree'){
                                                                        if(blood<0){
                                                                                explode(enemy[i],4);
                                                                        }
                                                                }
                                                                explode(buis[j],5);
                                                        }
                                                }
                                        }
 
                                        // 自己和敌军撞击判断
                                        for(e in bui){
                                                if(typeof(bui[e])==='object'){
                                                        if((bui[e].getAttribute('class')=='enemyOne')){
                                                                if(impact(bui[e],me)){
                                                                        explode(bui[e],2);
                                                                        explode(me,1);
                                                                }
                                                        }else if(bui[e].getAttribute('class')=='enemyTwo'){
                                                                if(impact(bui[e],me)){
                                                                        explode(bui[e],3);
                                                                        explode(me,1);
                                                                }
                                                        }else if(bui[e].getAttribute('class')=='enemyThree'){
                                                                if(impact(bui[e],me)){
                                                                        explode(bui[e],4);
                                                                        explode(me,1);
                                                                }
                                                        }
                                                }
                                        }
                                        document.getElementById('tmpscore').innerHTML='分数:'+score+'<br />装弹:'+shootTimes+'<br />level:'+level+'<br />特技:'+explodeNum;
                                },50);
                        }
                         
                        /**
                        * 检测两个元素是否碰撞
                        * [url=home.php?mod=space&uid=952169]@Param[/url] 检测的两个元素
                        * [url=home.php?mod=space&uid=155549]@Return[/url] 如果碰撞返回true 否则返回false
                        */ 
                        function impact(a,b){
                                var aTop         = a.offsetTop;
                                var aLeft         = a.offsetLeft;
                                var aWidth         = a.offsetWidth;
                                var aHeight = a.offsetHeight;
                                var bTop         = b.offsetTop;
                                var bLeft         = b.offsetLeft;
                                var bWidth         = b.offsetWidth;
                                var bHeight = b.offsetHeight;
 
                                if((bLeft>(aLeft+aWidth))||(aLeft>(bLeft+bWidth))||(bTop>(aTop+aHeight))||(aTop>(bTop+bHeight))){
                                        return false;        
                                }else{
                                        return true;
                                }
                        }
 
                        /**
                        * 处理爆炸
                        * @param o需要爆炸的对象 n 1=自身,2=小型敌军,3=中型敌军,4=巨型敌军
                        * @return over 游戏结束  true,false
                        */ 
                        function explode(o,n){
                                if(n==5){
                                        if(o){
                                                con.removeChild(o);
                                        }
                                        return false;
                                }
                                switch(n){
                                        case 1: 
                                                        src = './images/myself.gif';
                                                        clearInterval(timing);
                                                        document.getElementById('score').innerHTML = score;
                                                        document.getElementById('over').style = 'display:block';
                                                        break;
                                        case 2: src = './images/small_explode.gif';score+=3;
                                                        break;
                                        case 3: src = './images/middle_explode.gif';score+=10;
                                                        break;
                                        case 4: src = './images/large_explode.gif';score+=100;
                                                        break;
                                        default: 
                                                    break;
                                }
                                var top         = o.offsetTop;
                                var left         = o.offsetLeft;
                                var explode = document.createElement("img");
                                explode.setAttribute('src',src);
                                explode.setAttribute('class','explode');
                                explode.setAttribute('style','left:'+left+'px;top:'+top+'px;');
                                con.appendChild(explode);
                                if(n != 1){
                                        setTimeout(function(){
                                                con.removeChild(explode);
                                        },1000);
                                }
                                if(o){
                                        con.removeChild(o);
                                }
                        }
                        // 游戏开始相关
                        start();
                        function start(){
                                var con        = document.getElementById('con');
                                con.setAttribute('style','background:url("./images/start.png")');
                                var box = document.getElementById('box');
                                box.setAttribute('style','opacity:0');
                                var me = document.getElementById('me');
                                me.setAttribute('style','opacity:0;');
                                var start = document.getElementById('start');
                                start.setAttribute('style','display:block;top:350px;cursor:pointer;');
                                start.setAttribute('onclick','timeGo()');
                        }
                }
                 
        </script>
</head>
<body>
        <div id="con">
                <span id="tmpscore"></span>
                <div id="box">
                        <div id="index"></div>                
                        <div id="copy"></div>
                </div>
                <img src="./images/me.gif" id="me" alt="">
                <div id="over">
                        成绩:<span id="score"></span>
                        <br />
                        Game Over
                </div>
                <div id="start">
                        开始游戏
                </div>
                <div></div>
        </div>
</body>
</html>

源码释义:

此代码是一个小游戏,其功能是控制一个飞机在空中飞行并进行打击,消灭敌军以获得积分。具体实现方式如下:
HTML部分:使用了一个主容器,一个背景图层,一个前景图层(用于显示敌军飞机和自己的飞机),以及一个游戏结束图层和开始游戏按钮。同时定义了一个临时分数显示元素。
CSS样式部分:定义了主容器和背景图的样式,同时将前景图层标记为绝对定位的,并将z-index设置为1,以使其显示于背景之上。此外还定义了子弹、敌军飞机和爆炸效果的样式,以及游戏结束和开始游戏按钮的样式。
JavaScript部分:程序的主要逻辑在函数timeGo中,该函数主要实现了以下功能:
监听键盘事件控制飞机的移动,具体实现使用了document.onkeydown方法和event.keyCode属性。
飞机发射子弹(shoot函数):检查是否超时,超时则发射一个新的子弹,具体实现使用了setInterval方法。
制作敌军飞机:按照一定规则生成不同类型的敌军飞机,并设定它们的初始位置,具体实现也使用了setInterval方法。
检测子弹和敌军飞机的碰撞事件,具体实现使用了impact函数判断是否有碰撞,并调用explode函数处理爆炸效果。
检测飞机和敌军飞机的碰撞事件,并调用explode函数处理爆炸效果。
背景图自动滚动,将box.scrollTop的值减去4,并在scrollTop为0时重新将其赋值为box.offsetHeight。
定时刷新临时分数显示,显示当前的分数、剩余子弹、等级和可用特技。
另外,该文件还定义了函数explode、start以及impact,分别用于处理爆炸效果、游戏开始和碰撞事件。

源码下载地址:https://www.wdzzz.com/code/youxi/1717.html

相关推荐
  • 小游戏源码
  • 飞机游戏源码
  • 飞机大战源码
  • HTML5跑酷网页小游戏源码
    HTML5跑酷网页小游戏源码

    HTML5跑酷网页小游戏源码,一款平面跑酷网页小游戏源码。按空格键控制小人跳动,右上角有积分统计,掉水里就输了。HTML5跑酷源码截图...

    游戏源码 292 3年前
  • html5一个都不能死的小游戏源码
    html5一个都不能死的小游戏源码

    游戏截图安装步骤1.选择适当的虚拟主机上传源码2.解压文件至网站根目录(一般为wwwroot)3.网站文字内容请在index.html中修改4.图片在images文件夹中可替换修改5.绑定域名后访问即可。...

    游戏源码 225 4年前
  • HTML超解压迷宫小游戏源码
    HTML超解压迷宫小游戏源码

    HTMLL超解压迷宫小游戏源码功能1、可以做404页面 2、可以自定义迷宫格数HTMLL超解压迷宫小游戏源码使用方法1、直接上传到主机2、服务器就可以使用...

    游戏源码 334 4年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 3个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 3个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 3个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 3个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 4个月前