javascript 小游戏 --飞机大战（单体单例）

最新推荐文章于 2022-06-30 22:15:46 发布

原创

最新推荐文章于 2022-06-30 22:15:46 发布 · 515 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 小游戏 –飞机大战（单体单例）

最近跟着教学视频一边学习一边做了一个javascript的实战小游戏

话不多说直接附上码源

<!DOCTYPE HTML>
<html>
    <head>
        <title>please enter your title</title>
        <meta charset="utf-8">
        <meta name="Author" content="潭州学院-阿飞老师">
        <style type='text/css'>
            *{ margin:0; padding:0;font-family:"Microsoft yahei";}
            body{ overflow:hidden;}
        </style>
    </head>
    <body>

        <script type="text/javascript">
        /*单例模式*/

            window.onload = function(){
    
    

                Game.exe();

            };

            var Game = {

                //启动程序
                exe : function(){
    
    
                    document.body.style.background = '#000';
                    var oDiv = document.createElement('div');
                        oDiv.id = 'GameBox';
                        oDiv.style.cssText = 'width:300px;height:500px;border:10px solid #fff;margin:50px auto;text-align:center;position:relative;overflow:hidden;';
                    document.body.appendChild( oDiv );
                    this.init();
                },

                score : 0,

                ifEnd : false,

                //初始化
                init : function(){
    
    
                    var This = this;
                    var oDiv = document.getElementById('GameBox');
                    oDiv.innerHTML = '';
                    Game.score = 0;
                    Game.ifEnd = false;
                    var oH = document.createElement('h1');
                        oH.innerHTML = '飞机大战v1.0';
                        oH.style.cssText = 'color:#fff;font-size:26px;font-weight:normal;padding-top:50px;';
                        oDiv.appendChild( oH );
                    for (var i=0;i<4;i++ )
                    {
                        var oP = document.createElement('p');
                            oP.index = i;
                            oP.style.cssText = 'font-size:14px;color:#000;width:150px;height:40px;margin:50px auto;text-align:center;line-height:40px;background:#fff;cursor:pointer;';
                        var html = '';
                        oP.onmouseenter = function(){
    
    
                            this.style.background = '#f60';
                            this.style.color = '#fff';
                        };
                        oP.onmouseleave = function(){
    
    
                            this.style.background = '#fff';