让弹幕给 PPD 生个孩子
怎样才能跑起来我写的弹幕程序
创建应用：
复制appId到index.html的
var ref = new Wilddog("https://<appId>.wilddogio.com");处可以跑起来了!
怎样才能做一个这样的应用程序呢？
成果图：
我们要使用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代码:
弹幕是滚动的,所以我们写了一个可以让对象移动的方法。
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();
});
}
我们需要做一些准备工作,例如:我们为了让弹幕可以变颜色我们写了下面这个方法。
//随机获取一个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>
但是还是没有加上视频的功能,这个我要好好想一想!
让弹幕给 PPD 生个孩子的更多相关文章
- 产品从生到死的N宗罪
写在前面 昨天晚上做了一个梦,大概就是跟CTO,PM在说着什么..现在回想起好像就是说产品怎么怎么的..:索性就吐槽下这几个项目生与死的N宗罪吧.. 特别提示: 本文为全方位吐槽型,前方多处具有针对性 ...
- Windows编译Nginx源码
Windows下的Nginx战役,人不作就不会死!就像是拿着麦当劳的优惠券去买肯德基一样,别扭啊 Nginx是一款轻量级的Web 服务器.反向代理服务器.邮件服务器等等集一大串荣誉于一身的大牌人物!他 ...
- Cocos2d-x 3.x游戏开发之旅
Cocos2d-x 3.x游戏开发之旅 钟迪龙 著 ISBN 978-7-121-24276-2 2014年10月出版 定价:79.00元 516页 16开 内容提要 <Cocos2d-x ...
- （转）我看PhD by 王珢
我看PhD by 王垠 前段时间看了一下这些关于 PhD 的负面信息: 一个专门反对读 PhD 的 BLOG 叫“100 Reasons NOT to Go to Graduate School”(下 ...
- 批判性思维——Asking The Right Questions
我们生活在一个纷繁复杂的数字世界中,每天都在信息海洋中遨游.如果不想被其淹没,继而成为别人思想的傀儡,就有必要对你接受的信息进行批判.筛选,自己决定该相信什么不该相信什么,进而形成自己的观点,而不是一 ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- Google 面试题和详解
Google的面试题在刁钻古怪方面相当出名,甚至已经有些被神化的味道.这个话题已经探讨过很多次,而科技博客 BusinessInsider这两天先是贴出15道Google面试题并一一给出了答案,其中不 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
- 银行HR：寒门再难出贵子
银行HR:寒门再难出贵子来源:金融行业网 2013 年 8 月 6 日 来源:天涯社区 作者:永乐大帝二世 本文是一位银行的HR写的,他工作了10年,接待了一群到银行实习的实习生,然后观察他们发生的好 ...
随机推荐
- 虚拟地址和物理地址(MMU)以及cache
最近非常忙,博客很乱也没有更新,这里随便记录点东西,周末有空整理下. cache是一个与CPU很近的高速存储器, 作用:提高内存的访问读写速度 cache属性是指对这部分虚拟地址的读写是使用cache ...
- 【Apollo自动驾驶源码解读】车道线的感知和高精地图融合
模式选择 在modules/map/relative_map/conf/relative_map_config.pb.txt文件中对模式进行修改: lane_source: OFFLINE_GENER ...
- 创建 maven项目时：Cannot resolve Plugin org.apache.maven.plugins:maven-install-plugin报错
Maven在每一次下载jar包的过程中,一旦第一次下载完成后,就会有一个lastUpdate文件,表示该jar包已经下载.下次再检索这个包,也就不会去远程仓库进行下载. 解决办法:找到自己的maven ...
- 自己动手写Vector【Cherno C++教程】
动手写一个Vector 本文是对<最好的C++教程>的动手写数据结构部分的一个整理,主要包含91p动手写Array数组和92p动手写Vector数组的内容. 自己动手来写这些数据结构是学习 ...
- 制作自己的rpm包，并为其制作patch包。
本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...
- Centos8 下部署 ASP.net Core 程序
1.安装需要的SDK包,如果程序包含3.1版本,需要安装3.1的SDK. sudo dnf install dotnet-sdk-5.0dotnet --versiondotnet --list-ru ...
- LGP5089题解
考试的一道题,考场上sb了没写出来,然后在两天后的英语课上胡出来了( 首先猜一个奇怪的结论: 对于元素 \((a,b)\),看做连接第 \(a\) 列和第 \(b\) 行的一条边,那么如果一行和一列在 ...
- Java中获取applicationcontext(应用上下文)
package com.wl.iwbservice.util; import org.springframework.beans.BeansException; import org.springfr ...
- [转载]我的WafBypass之道（upload篇）
现在位置: 首页 > 文章 > Web安全 > 正文 我的WafBypass之道(upload篇) 2016 /11/30 15:20 4,901 沙发 0x00 前言 玩waf当然 ...
- (一)【转】asp.net mvc生成验证码
网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录.灌水等危害网站的操作.验证码被广泛应用在注册.登录.留言等提交信息到服务器端处理的页面中. ...