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';
                            
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值