gh-pages

Branches (2)

Tags (4)

Manage

Manage

gh-pages

test

联机之前的

0.5

0.2

0.1

ChineseChessOnline
/
index.html

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

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>中国象棋 online</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				background: black;
				overflow: hidden;
				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-user-select: none;
				-webkit-transform: translate3d(0, 0, 0);
				-moz-transform: translate3d(0, 0, 0);
				-ms-transform: translate3d(0, 0, 0);
				-o-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
			}

			#box {
				font-family: 'xingkai';
				width: 100vw;
				height: 100vh;
				margin: 0;
				padding: 0;
				position: relative;
				top: 0;
				left: 0;
				text-align: center;
				font-size: 2.5vmin;
			}

			#map {
				position: absolute;
				left: 50%;
				top: 50%;
				padding: 0px;
				margin: 0;
				border: 0.06rem solid darkgoldenrod;
				background: rgba(249, 216, 162, 1);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/view.css"/>
		<link href="./css/css/font-awesome.css" rel="stylesheet">
		<script>
			(function() {
				//rem 与屏幕/字体大小比例计算
				var userFontSize = parseFloat(getComputedStyle(document.documentElement, false)['fontSize']);
				var ratio = 16 / userFontSize;
				var fontSize = (innerWidth / 1536 * 0.625) * 10 * ratio;
				document.documentElement.style.fontSize = fontSize + "rem";
//				if(innerWidth<=768){
//					var userFontSize = parseFloat(getComputedStyle(document.documentElement, false)['fontSize']);
//					var ratio = 16 / userFontSize;
//					var fontSize = (innerWidth / 1536 * 0.625) * 10 * ratio;
//					document.documentElement.style.fontSize = fontSize + "rem";
//				}
				//				window.onresize = function() {
				//					fontSize = (innerWidth / 1536 * 0.625) * 10 * ratio;
				//					document.documentElement.style.fontSize = fontSize + "rem";
				//}
			})();
		</script>
		<!--<script src="http://livejs.com/live.js"></script>-->
		<!--<script src="js/live.js"></script>-->
		<script src="js/socket.io.min.js"></script>
		<script src="js/axios0.18.min.js"></script>
	</head>

	<body>
		<div id="box">
			<canvas id="map"></canvas>
			<audio src="audio/MOVE.WAV" hidden="hidden" id="audioClick"></audio>
			<audio src="audio/go.wav" hidden="hidden" id="audioGo"></audio>
			<audio src="audio/kill.wav" hidden="hidden" id="audioKill"></audio>
			<audio src="audio/dong.wav" hidden="hidden" id="audioEat"></audio>
			<form class="form" id="login">
				<div class="inputPosition" id="loginName"><span>账 号:</span><input type="text"  class="inputStyle"  value="" maxlength="6" autocomplete="on" placeholder="请输入账号"/></div>
				<div class="inputPosition" id="loginPassWord"><span>密 码:</span><input type="password"  class="inputStyle" value="" maxlength="18" autocomplete="on" placeholder="请输入密码"/></div>
				<div id="loginBtn" class="formBtn">登录</div>
				<div id="regBtn" class="formBtn">注册</div>
				<div id="youkeBtn" class="formBtn">游客</div>
				<div id="forgetBtn" class="formBtn">忘记密码</div>
			</form>
			<div id="gameMainMenu">
				<div id="singlePlay">单机对战</div>
				<div id="btnMenuChat">聊天室</div>
				<div id="btnMenuPlay">加入房间</div>
				<div id="btnMenuCrateRoom">创建房间</div>
				<div id="btnMenuChessRecord">棋谱</div>
				<div id="btnMenuUserInfo">用户信息</div>
				<div id="btnMenuGameSet">游戏设置</div>
			</div>
			<div id="btnOnlinePlay">
				<div class="room">1000</div>
				<div class="room">1002</div>
				<div class="room">1001</div>
			</div>
			<div id="gameMenu" style="display: none;">游戏菜单</div>
			<div id="Chessboard">
				棋谱
			</div>
			<div id="chat" class=''>
			<div id="chat_title">在线交流<span class="chat_title_onlineNum"></span>
			</div><i class="fa fa-close"><span></span></i>
			<div id="chat_body" class="chat_center">
				<div id="chat_main">
					<div id="chat_main_info">
						<!--别人的-->
						<div class="other_info">

						</div>
					</div>
				</div>
				<div id="chat_input" contenteditable="true">

				</div>
				<i class="" id="onlineNum" title="在线人数"></i>
				<i class="fa fa-smile-o" id="biaoqing" title="选择表情">
					<div id="biaoqing_box"></div>
				</i>

				<div id="btnSend">发送</div>
			</div>
			<div id="setName">
				<input type="text" id="" value="" placeholder="输入您的昵称" maxlength="6" />
				<div id="selfName"></div>
				<div id="smile" class="fa fa-paper-plane-o"></div>
				<!--头像列表-->
				<div id="smileList">
					<div>选择您的头像</div>
					<i class="fa fa-paper-plane-o"></i>
					<i class="fa fa-user-o"></i>
					<i class="fa fa-github"></i>
					<i class="fa fa-android"></i>
					<i class="fa fa-pagelines"></i>
					<i class="fa fa-diamond"></i>
					<i class="fa fa-frown-o"></i>
					<i class="fa fa-smile-o"></i>
					<i class="fa fa-star"></i>
					<i class="fa fa-pied-piper-alt"></i>
					<i class="fa fa-heart"></i>
				</div>
				<div id="btnSetName">进入房间</div>
			</div>
		</div>

			<form class="form" id="reg">
				注册
				<div id="youkeBtn111" class="formBtn btnBack">注册</div>
			</form>
			<form class="form" id="youke">
				游客
			</form>
			<form class="form" id="forgetPassword">
				忘记密码
			</form>
		</div>
		<script type="text/javascript" src="js/map3.js"></script>
	</body>

</html>