zoukankan      html  css  js  c++  java
  • 打子弹游戏 js

    <table id="table">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    <div class="box" id="box"></div>
    
    css
    
    
    #table td{
         20px;
        height: 20px;
    }
    .box {
         20px;
        height: 20px;
        background: red;
        position: absolute;
        bottom: 0px;
        left: 0px;
    }
    
    .gun {
         20px;
        height: 10px;
        position: absolute;
        bottom: 10px;
        left: 20px;
        background: green;
    }
    
    js
    
    var table=document.getElementById('table');
    var box=document.getElementById('box');
    /*create table lines*/
    /*var timer1=null;
    timer1=setInterval(function () {
        var tr=document.createElement('tr');
        for(var i=0;i<20;i++){
            var td=document.createElement('td');
            td.innerHTML=1;
            tr.appendChild(td);
        }
        table.getElementsByTagName('tbody')[0].insertBefore(tr,table.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0]);
    },3000);*/
    /*move the box*/
    document.onkeydown = function (e) {
        var keycode = e.keyCode;
        switch (keycode){
            case 37:
                $('#box').css('left','-=20');
                break;
            case 39:
                $('#box').css('left','+=20');
                break;
        }
        if(parseInt($('#box').css('left'))<=0){
            $('#box').css('left',0);
        }
    };
    
    /*create gun to shoutdown*/
    var timer2=null;
    timer2=setInterval(function () {
        var gun=document.createElement('div');
        gun.className='gun';
        gun.style.bottom=10+'px';
        gun.style.left=$('#box').css('left')
        document.body.appendChild(gun);
        $(gun).animate({
            'bottom': window.innerHeight-10+"px",
            'left':$('#box').css('left')
        }, 500, function () {
            var Num = parseInt(gun.style.left) / 20;
            $('td').eq(Num).html('');
            document.body.removeChild(gun);
        });
    },5100);
  • 相关阅读:
    AppCan打包问题
    Layui数据表格模型
    Layui关闭弹出层并刷新父窗口
    spring boot重启后图片不见
    MySQL数据库创建时间和更新时间错乱问题
    Spring Boot解决无法访问图片的问题
    Spring Boot解决无法访问图片的问题
    reload() 方法用于重新加载当前文档。配合Ajax异步请求。
    Layui数据表格的接口数据请求方式为Get
    时间格式注解
  • 原文地址:https://www.cnblogs.com/wz0107/p/4878777.html
Copyright © 2011-2022 走看看