master

分支 (1)

管理

管理

master

kedou
/
index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Workerman小蝌蚪互动聊天室 </title>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <meta name="viewport"
          content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-mobile-web-app-capable" content="YES">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
    <meta property="fb:app_id" content="149260988448984"/>
    <meta name="title" content="Workerman-todpole!"/>
    <meta name="description" content="小蝌蚪交互游戏程序 ，坐标实时推送、实时聊天等"/>
    <link rel="image_src" href="images/fb-image.jpg"/>
</head>
<body>
<canvas id="canvas"></canvas>

<div id="ui">
    <div id="fps"></div>
    <input id="chat" type="text"/>
    <div id="chatText"></div>
    <h1>小蝌蚪聊天室</h1>
    <div id="instructions">
        <h2>介绍</h2>
        <p>直接打字聊天!</p>
        <p>输入 我叫XX 则会设置你的昵称为XX</p>
        <p>输入 我是男生/女生 可以设置小蝌蚪为蓝色/粉色</p>
        <p>输入速度10 则会调整移动速度为10 初始速度为5</p>
        <p>输入10,10 则可移动到坐标10,10</p>
        <p>输入跟随XX 则可自动跟随XX玩家;输入停止跟随,即可停止</p>
        <p>觉得聊得不错可以加QQ群看看 群号371304990</p>
    </div>
    <div id="online-users">
        <div class="header">
            <h3>在线列表</h3>
            <div @click.stop="toggleOnlineUsers">{{ showOnlineUsersText }}</div>
        </div>
        <span>在线：{{ onlineCount }}只</span>
        <div class="users" v-if="showOnlineUsers">
            <template v-for="(user,index) in onlineUsers">
                <div class="user" :key="index">
                    <div @click.stop="toUserPos(user.user)" class="name"><span title="点击瞬移到玩家身边" class="name">{{ user.name }}</span><span
                            class="pos">[{{ user.user.x | parseInt }},{{ user.user.y | parseInt }}]</span>
                    </div>
                    <div class="follow" @click.stop="onClickFollowUser(user)"
                         v-if="followUser==null || user.id !== followUser.id">跟随
                    </div>
                    <div class="follow" @click.stop="onClickAroundUser(user)"
                         v-if="followUser==null || user.id !== followUser.id">环绕
                    </div>
                    <div class="cancel-follow" @click.stop="onClickCancelFollow"
                         v-if="followUser!==null && user.id == followUser.id">取消
                    </div>
                </div>
            </template>
        </div>

    </div>
    <div id="world">
        <div class="header">
            <h3>世界动态</h3>
            <div @click.stop="toggleMessages">{{ showText }}</div>
        </div>
        <div class="logs" ref="messages" v-if="showMessages">
            <template v-for="(message,index) in messages">
                <div class="message" v-if="message.type === 'message'" :key="index">
                    <div><span @click.stop="toUserPos(message.user)" title="点击瞬移到玩家身边" class="name">{{ message.user.name }}</span><span
                            title="点击前往" @click.stop="deliveryTo(message.message.x,message.message.y)" class="pos">[{{ message.message.x }},{{ message.message.y }}]</span>:
                        <span class="content">{{ message.message.content }}</span></div>
                </div>
                <div class="connect" v-if="message.type === 'connect'" :key="index">
                    <span class="name" @click.stop="toUserPos(message.user)">{{ message.user.name }}</span>进入了池塘
                </div>
                <div class="disconnect" v-if="message.type === 'disconnect'" :key="index">
                    {{ message.message }}
                </div>
            </template>
        </div>
    </div>
    <aside id="info">
        <section id="share">
        </section>
        <section id="wtf">

            <!-- 尊重他人劳动成果，请保留下面原作者相关链接，否则会导致无法使用 -->
            <h2>powered&nbsp;by&nbsp;<a rel="external" href="http://workerman.net/workerman-todpole" target="_blank">workerman</a>
            </h2>
            <!-- 尊重他人劳动成果，请保留原作者相关链接，否则会导致无法使用 -->

        </section>
    </aside>
    <aside id="frogMode">
        <h3>Frog Mode</h3>
        <section id="tadpoles">
            <h4>Tadpoles</h4>
            <ul id="tadpoleList">
            </ul>
        </section>
        <section id="console">
            <h4>Console</h4>
        </section>
    </aside>

    <div id="cant-connect">
        与服务器断开连接了。您可以重新刷新页面。
    </div>
    <div id="unsupported-browser">
        <p>
            您的浏览器不支持 <a rel="external" href="http://en.wikipedia.org/wiki/WebSocket">WebSockets</a>.
            推荐您使用以下浏览器
        </p>
        <ul>
            <li><a rel="external" href="http://www.google.com/chrome">Google Chrome</a></li>
            <li><a rel="external" href="http://apple.com/safari">Safari 4</a></li>
            <li><a rel="external" href="http://www.mozilla.com/firefox/">Firefox 4</a></li>
            <li><a rel="external" href="http://www.opera.com/">Opera 11</a></li>
        </ul>
        <p>
            <a href="#" id="force-init-button">仍然浏览!</a>
        </p>
    </div>

</div>

<script src="js/lib/vue-2.6.11.min.js"></script>
<script src="js/New.js"></script>
<script src="js/lib/parseUri.js"></script>
<script src="js/lib/modernizr-1.5.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/lib/Stats.js"></script>

<script src="js/App.js"></script>
<script src="js/Model.js"></script>
<script src="js/Settings.js"></script>
<script src="js/Keys.js"></script>
<script src="js/WebSocketService.js"></script>
<script src="js/Camera.js"></script>

<script src="js/Tadpole.js"></script>
<script src="js/TadpoleTail.js"></script>

<script src="js/Message.js"></script>
<script src="js/WaterParticle.js"></script>
<script src="js/Arrow.js"></script>
<script src="js/formControls.js"></script>

<script src="js/Cookie.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5fedb3bdce89499492c079ab4a8a0323' type='text/javascript'%3E%3C/script%3E"));
</script>

</body>
</html>