讓彈幕給 PPD 生個孩子

時間 2019-12-06

標籤 ppd 孩子简体版

原文原文鏈接

怎樣才能跑起來我寫的彈幕程序

資源下載css
申請野狗後端雲帳號註冊html
建立應用：
前端
複製appId到index.html的 var ref = new Wilddog("https://<appId>.wilddogio.com"); 處jquery
能夠跑起來了!git

怎樣才能作一個這樣的應用程序呢？

成果圖：數據庫

咱們要使用HTML和CSS畫一個界面，以下：後端

具體代碼就不一一介紹了,若是你想直接使用狗場的界面UI,請複製下面的代碼:數組

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">


<style>
.dm{width:100%;height:100%;border:1px solid #000}
.dm .d_screen .d_mask{width:100%;height:380px;background:#000;opacity:0.5;
 filter:alpha(opacity=50) z-index:1;}
 .dm .d_screen .d_show div{font-size:22px;line-height:36px;font-weight:500;color:#fff;position:absolute;left:0;top:0;}
</style>
</head>

<body>
    <div id="container">
    <div id="main-container">


        <main id="main" style="margin-left:5px">



            <div style="text-align:center;margin-top:10px">
                <div class="dm" style="border:0">
                    <div class="d_screen" style="border: 1px solid rgb(229, 229, 229);">
                        <div class="d_mask" style="background:#fff"></div>
                        <div class="d_show">
                            <!-- <div>text message</div>  -->
                        </div>
                    </div>

                    <div class="send">
                        <div class="s_fiter">
                            <div class="s_con">
                                <p><input placeholder="說點什麼?" class="s_txt" type="text" style="width:388px;
  height: 34px;
  border-radius: 3px;
  border: 1px solid rgb(204, 204, 204);
  padding-left: 10px;"/> </p><p>
                                <input type="button" value="發 射" class="s_sub" style="border: 1px solid rgb(230, 80, 30);color:rgb(230, 80, 30);
  border-radius: 3px;
  text-align: center;
  padding: 0;
  height: 35px;
  line-height: 35px;
  font-size: 14px;width:159px;background-color:white"/>
                                <input type="button" value="清 屏" class="s_del" style="border: 1px solid rgb(176, 168, 165);color:rgb(176, 168, 165);
  border-radius: 3px;
  text-align: center;
  padding: 0;
  height: 35px;
  line-height: 35px;
  font-size: 14px;width:159px;background-color:white" /> </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>

       </div>

    </div>


    <script src="https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
    <script src="https://cdn.wilddog.com/js/vendor/jquery-1.11.2.min.js"></script>
</body>

這個HTML和CSS是前端的基礎,這個咱們很少說,咱們主要來看一下JS代碼:
彈幕是滾動的,因此咱們寫了一個可讓對象移動的方法。app

var moveObj = function(obj) {
        var _left = $('.d_mask').width() - obj.width();
        _top = _top + 50;
        if(_top > (topMax - 50)){
            _top = topMin;
        }
        obj.css({left:_left,top:_top,color:getReandomColor()});
        var time = 20000 + 10000 * Math.random();
        //使用的JQuery的animate方法實現了文字滾動
        obj.animate({left:"-"+_left+"px"}, time, function(){
            obj.remove();
        });
    }

咱們須要作一些準備工做,例如:咱們爲了讓彈幕能夠變顏色咱們寫了下面這個方法。dom

//隨機獲取一個RGB格式顏色,關於什麼是RGB格式的顏色,請百度
var getReandomColor = function() {
        return '#'+(function(h){
            return new Array(7-h.length).join("0")+h
            })((Math.random()*0x1000000<<0).toString(16))
}

以後咱們把文字獲取過來,而且執行文字滾動的方法。

var getAndRun = function() {
        //判斷存儲彈幕信息的數據是否爲空
        if (arr.length > 0) {
            var n = Math.floor(Math.random() * arr.length + 1) - 1;
            //隨機抽取arr數組中的一個元素,以後把它追加到.d_show這個div中
            var textObj = $("<div>" + arr[n] + "</div>");
            $(".d_show").append(textObj);
            //執行文字滾動的方法。
            moveObj(textObj);
        }

        setTimeout(getAndRun, 3000);
    }

如下是咱們的所有JS代碼,帶有很是詳細的註釋。但願大家能看懂。

<script>
$(document).ready(function() {
  //加載野狗實例
    var ref = new Wilddog("https://<appId>.wilddogio.com");

    var arr = [];
    //點擊發送按鈕把彈幕文字發送到屏幕，同時清空文本框裏面的文字
    $(".s_sub").click(function() {
    //獲取文本框的文字
        var text = $(".s_txt").val();
    //把信息添加到wilddog數據庫
        ref.child('message').push(text);
    //清空文本框
        $(".s_txt").val('');
    });
  //監聽回車鍵
    $(".s_txt").keypress(function(event) {
    //回車鍵的ACSII碼是13
        if(event.keyCode == "13") {
      //觸發.s_sub事件的click時間
            $(".s_sub").trigger('click');
        }
    });
  //清屏的點擊事件
    $(".s_del").click(function() {
    //清屏就是把彈幕數據庫的數據清零
        ref.remove();
        arr = [];
    //同時div區域的內容清除。
        $('.d_show').empty();
    });
  //屏幕在顯示彈幕屏幕的時候，若是要加載新彈幕，那麼就會觸發child_added.
    ref.child('message').on('child_added', function(snapshot) {
    //獲取新彈幕的內容
        var text = snapshot.val();
    //把彈幕存到存到後臺數據庫
        arr.push(text);
        var textObj = $("<div class=\"dm_message\"></div>");
                textObj.text(text);
    //把彈幕內容追加到.d_show這個節點下面。
        $(".d_show").append(textObj);
    //彈幕移動方法。
        moveObj(textObj);
    });
    //獲取屏幕左上角的點的高度,.d_mask在html中對應的是視頻區域的div。
    var topMin = $('.d_mask').offset().top;
  //獲取屏幕左下角的點的高度
    var topMax = topMin + $('.d_mask').height();
    var _top = topMin;

    var moveObj = function(obj) {
        var _left = $('.d_mask').width() - obj.width();
        //爲了保證彈幕是從右邊從上往下依次出來,咱們每發一條彈幕,下一條的彈幕位置就在上一條下面出來。
        _top = _top + 50;
        //當一次往下最後一條彈幕的高度小於最小的50px的時候,彈幕從屏幕上方開始發。
        if(_top > (topMax - 50)){
            _top = topMin;
        }
        obj.css({left:_left,top:_top,color:getReandomColor()});
        var time = 20000 + 10000 * Math.random();
        obj.animate({left:"-"+_left+"px"}, time, function(){
            obj.remove();
        });
    }

    var getReandomColor = function() {
        return '#'+(function(h){
            return new Array(7-h.length).join("0")+h
            })((Math.random()*0x1000000<<0).toString(16))
    }

    var getAndRun = function() {
        if (arr.length > 0) {
            var n = Math.floor(Math.random() * arr.length + 1) - 1;
            var textObj = $("<div>" + arr[n] + "</div>");
            $(".d_show").append(textObj);
            moveObj(textObj);
        }

        setTimeout(getAndRun, 3000);
    }

//jQuery.fx.interval 屬性用於改變以毫秒計的動畫運行速率。可操做該屬性來調整動畫運行的每秒幀數
    jQuery.fx.interval = 50;
    getAndRun();
});

</script>

可是仍是沒有加上視頻的功能,這個我要好好想想!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。