在 iOS 应用中，控制器不点击屏幕右侧
In iOS App, Controller not taking click on right side of screen
我为我的 AirConsole 应用程序创建了一个简单的 controller.html。其中内容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
<title>AirConsole Controller</title>
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<!-- 3rd Party Libs -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- AIRCONSOLE -->
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
<script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
<script>
var airConsole = null;
var viewManager = null;
var deviceId = null;
var isReady = false;
var isLoadingActive = true;
/**
* Sets up the communication to the screen.
*/
function init() {
airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
airConsole.onMessage = function ( from, data ) {
if ( data.action == "REMOVE_LOADING" ) {
if ( isLoadingActive ) {
isLoadingActive = false;
showScreen ( "Ready" );
}
} else if (data.action == "SHOW_READY_SCREEN") {
showScreen ( "Ready" );
} else if ( data.action == "READY_RECEIVED") {
deviceId = data.info.deviceId;
showScreen ( "DoneReady" );
} else if ( data.action == "GAME_STARTED" ) {
showScreen ( "Waiting" );
} else if ( data.action == "START_GAME" ) {
showScreen ( "Controls" );
} else if (data.action == "GAME_END") {
showScreen ( "PerformEndGame" );
} else {
alert ( "Message: " + data.info.deviceId );
}
}
airConsole.onActivePlayersChange = function ( player_number ) {
// alert ( "Active Players Change" );
}
airConsole.onReady = function () {
// alert ( "On Ready" );
viewManager = new AirConsoleViewManager ( airConsole );
}
// Listen for view changes
airConsole.onCustomDeviceStateChange = function ( deviceId, data ) {
viewManager.onViewChange ( data, function ( view_id ) {
// view has changed
alert ( "VIEW MANAGER WORKING" );
} );
};
airConsole.onConnect = function ( id ) {
//alert ( "Device ID RECEIVED: " + id );
isReady = false;
}
airConsole.onGameEnd = function () {
alert ( "On Game End" );
}
}
</script>
<style type="text/css">
*{
padding: 0px;
margin: 0px auto;
}
html, body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
height: 100%;
overflow: hidden;
}
#controller-container {
background-color: #ff0000;
text-align: center;
font-family: sans-serif;
width: 100%;
height: 100vh;
position: relative;
}
.container_div {
position: relative;
display: flex;
background-color: #ff0000;
width: calc(100% -10px);
height: calc(100% -10px);
padding: 5px;
}
.inner_div{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: calc(100vh - 10px);
background-color: green;
}
.controls_div {
padding: 5px;
display: flex;
flex-direction: row;
}
.button_div {
width: calc(50% - 5px);
float: left;
}
.right_button{
float: right;
}
.control {
flex: 1;
justify-content: center;
align-items: center;
height: calc( 100vh - 10px );
background-color: cadetblue;
float: left;
}
.hidden_initially {
display: none;
}
.btn {
position: absolute;
width: 100%;
height: 100%;
}
.btn_left {
width: 40%;
left: 2%;
}
.btn_right {
width: 40%;
right: 2%;
}
.center_align {
text-align: center;
}
</style>
</head>
<body onload="init()">
<div id="controller-container">
<!-- CREATED BY ME -->
<div id="loading_container_id_div" class="container_div">
<div class="inner_div">LOADING</div>
</div>
<div id="ready_container_id_div" class="container_div view hidden_initially" onmousedown="sendReadyMessage ( 'READY' )">
<div class="inner_div">TAP TO READY</div>
</div>
<div id="done_ready_container_id_div" class="container_div hidden_initially">
<div class="inner_div">GAME is ABOUT to START</div>
</div>
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
<div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
<div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>
<div id="waiting_container_id_div" class="container_div hidden_initially" onmousedown="alert ( 'BINGO' )">
<div class="inner_div">WAITING for Game to END</div>
</div>
</div>
<script>
var controlsContainer = document.getElementById ( "controls_container_id_div" );
var doneReadyContainer = document.getElementById ( "done_ready_container_id_div" );
var loadingContainer = document.getElementById ( "loading_container_id_div" );
var readyContainer = document.getElementById ( "ready_container_id_div" );
var waitingContainer = document.getElementById ( "waiting_container_id_div" );
function sendReadyMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function sendMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function hideScreens () {
controlsContainer.style.display = "none";
doneReadyContainer.style.display = "none";
loadingContainer.style.display = "none";
readyContainer.style.display = "none";
waitingContainer.style.display = "none";
}
function showScreen ( screen ) {
hideScreens ();
switch ( screen ) {
case "Waiting":
waitingContainer.style.display = "block";
break;
case "Controls":
controlsContainer.style.display = "block";
break;
case "Ready":
readyContainer.style.display = "block";
break;
case "DoneReady":
doneReadyContainer.style.display = "block";
break;
case "PerformEndGame":
waitingContainer.style.display = "block";
break;
}
}
</script>
</body>
</html>
当我在任何设备上 运行 时，Android ( both app and browsers ) 或 iOS ( browsers )，下面粘贴的部分：
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
<div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
<div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>
屏幕截图：
工作正常，虽然同一部分无法纯粹检测“onmousedown”事件，当在 iOS AirConsole App[=42 上播放时=].似乎点击事件基本上发生在靠近屏幕中心的区域，其余区域无法检测到任何用户交互。
为什么只有 iOS AirConsole app 显示这种异常行为？我该怎么做才能让这两个按钮都被点击？
我的 CSS 或 html 内容是否存在缺陷。请引导我朝着正确的方向前进。
这是 the game 在 AirConsole
我没有 iOS phone 来测试这个，但据我所知，你使用
似乎很奇怪
.inner_div {
width: 100%;
}
... 其中 .inner_div 用于 "Jump" 和 "Dash" 按钮，但您也使用
.button_div {
width: calc(50% - 5px);
float: left;
}
那么为什么相同的 DIV 元素有两个不同的 width 值？
此外，我可能会做一些不同的事情来减少代码量并使事情变得更简单。如果你有兴趣，我可以举个例子。
不过，我希望这对你有所帮助。
这是我创建的 "controller.html"，目的是为了 获得整个 window 的点击iOS AirConsole 应用程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
<title>AirConsole Controller</title>
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<!-- AirConsole-Controls -->
<link rel="stylesheet" type="text/css" href="airconsole-controls/button/button.css">
<link rel="stylesheet" type="text/css" href="airconsole-controls/dpad/dpad.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="controller/styles/styles.css">
<link rel="stylesheet" type="text/css" href="controller/styles/controls.css">
<!-- AIRCONSOLE -->
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
<script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
<!-- AIRCONSOLE CONTROLS -->
<script type="text/javascript" src="airconsole-controls/button/button.js"></script>
<script type="text/javascript" src="airconsole-controls/dpad/dpad.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-analog/swipe-analog.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-digital/swipe-digital.js"></script>
<!-- 3rd Party Libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="controller/libs/handlebars-v4.0.5.js"></script>
<!-- GENERATOR -->
<script type="text/javascript" src="controller/js/controller_generator.js"></script>
<script type="text/javascript" src="controller/js/main.js"></script>
<script>
var airConsole = null;
var viewManager = null;
var deviceId = null;
var characterName = null;
/**
* Sets up the communication to the screen.
*/
function init() {
airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
airConsole.onMessage = function ( from, data ) {
if ( data.action == "REMOVE_LOADING" ) {
showScreen ( "Ready" );
} else if ( data.action == "SHOW_READY_SCREEN" ) {
showScreen ( "Ready" );
} else if ( data.action == "READY_RECEIVED" ) {
deviceId = data.info.deviceId;
characterName = data.info.characterString;
var imageId = document.getElementById ( "image_id" );
imageId.src = "images/character/" + characterName + ".png";
imageId.alt = characterName;
showScreen ( "DoneReady" );
} else if ( data.action == "GAME_STARTED" ) {
showScreen ( "Waiting" );
} else if ( data.action == "START_GAME" ) {
showScreen ( "Controls" );
} else if (data.action == "GAME_END") {
showScreen ( "PerformEndGame" );
} else {
alert ( "Message: " + data.info.deviceId );
}
}
airConsole.onActivePlayersChange = function ( player_number ) {
// alert ( "Active Players Change" );
}
airConsole.onReady = function () {
// alert ( "On Ready" );
}
airConsole.onConnect = function ( id ) {
//alert ( "Device ID RECEIVED: " + id );
}
airConsole.onGameEnd = function () {
alert ( "On Game End" );
}
}
</script>
<style>
body{margin:0px;padding:0px;}
#controller-container {
background-color: #00ff00;
text-align: center;
font-family: sans-serif;
width:100%;
height: 100vh;
position: relative;
}
.image_div {
pointer-events: none;
position: absolute;
z-index:99;
top:5%;
width:50vh;
left: 0;right: 0;margin: 0 auto;
}
.image_div img{width: 100%;}
.bin_div {
z-index:0;
}
.message_div {
border: 2px outset white;
background-color: dodgerblue;
}
.btn-half {
text-align: center;
background-color: green;
/* background-image: url( "images/background/yellow_square.gif" );*/
background-size: contain;
color: #000000;
display:inline-block;
width:49%;
border: 4px solid white;
height: 98vh;
z-index: 1;
position: relative;
}
</style>
</head>
<body onload="init()">
<div id="controller-container">
<!-- REPLACE_HERE START -->
<div id="view-0" class="view" style="display: flex;">
<div id="view-0-section-0" class="section" style="height: 100%;">
<div id="loading_container_id" class="btn button-element element message_div">
<div class="button-text">Loading...</div>
</div>
</div>
</div>
<div id="view-3" class="view" style="display: none;">
<div id="view-3-section-0" class="section" style="height: 100%;">
<div id="ready_container_id" class="btn button-element element message_div">
<div class="button-text">TAP to READY</div>
</div>
</div>
</div>
<div id="view-4" class="view" style="display: none;">
<div id="view-4-section-0" class="section" style="height: 100%;">
<div id="done_ready_container_id" class="btn button-element element message_div">
<div class="button-text">Game will Start in few seconds, HOLD ON</div>
</div>
</div>
</div>
<div id="view-5" class="view" style="display: none;">
<div id="view-5-section-0" class="section horizontal" style="height: 100%;position: relative;">
<div id="jump_id" class="btn button-element element btn-half btn_div">
<div class="button-text">JUMP</div>
</div>
<div id="dash_id" class="btn button-element element btn-half btn_div">
<div class="button-text">DASH</div>
</div>
<div id="image_container_id" class="btn button-element element image_div">
<img id="image_id">
</div>
</div>
</div>
<div id="view-6" class="view" style="display: none;">
<div id="view-6-section-0" class="section" style="height: 100%;">
<div id="waiting_container_id" class="btn button-element element message_div">
<div class="button-text">Waiting for Game to End...</div>
</div>
</div>
</div>
<script type="text/javascript">
var ctrl_data = '{"orientation":"landscape","selected_view_id":"view-0","views":[{"id":"view-0","sections":[{"id":"view-0-section-0","elements":[{"id":"loading_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-0-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Loading...","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-3","sections":[{"id":"view-3-section-0","elements":[{"id":"ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-3-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"TAP to READY","send_onrelease":false,"message_data":[{"key":"action","value":"READY"}]}}],"classes":[]}]},{"id":"view-4","sections":[{"id":"view-4-section-0","elements":[{"id":"done_ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-4-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Game will Start in few seconds, HOLD ON","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-5","sections":[{"id":"view-5-section-0","elements":[{"id":"jump_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"JUMP","send_onrelease":false,"message_data":[{"key":"action","value":"JUMP"}]}},{"id":"dash_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-1","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"DASH","send_onrelease":false,"message_data":[{"key":"action","value":"DASH"}]}}],"classes":["horizontal"]}]},{"id":"view-6","sections":[{"id":"view-6-section-0","elements":[{"id":"waiting_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-6-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Waiting for Game to End...","send_onrelease":false,"message_data":[]}}],"classes":[]}]}]}';
</script>
<!-- REPLACE_HERE END -->
</div>
<script>
var controlsContainer = document.getElementById ( "view-5" );
var doneReadyContainer = document.getElementById ( "view-4" );
var loadingContainer = document.getElementById ( "view-0" );
var readyContainer = document.getElementById ( "view-3" );
var waitingContainer = document.getElementById ( "view-6" );
function sendReadyMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function sendMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function hideScreens () {
controlsContainer.style.display = "none";
doneReadyContainer.style.display = "none";
loadingContainer.style.display = "none";
readyContainer.style.display = "none";
waitingContainer.style.display = "none";
}
function showScreen ( screen ) {
hideScreens ();
switch ( screen ) {
case "Waiting":
waitingContainer.style.display = "flex";
break;
case "Controls":
controlsContainer.style.display = "flex";
break;
case "Ready":
readyContainer.style.display = "flex";
break;
case "DoneReady":
doneReadyContainer.style.display = "flex";
break;
case "PerformEndGame":
waitingContainer.style.display = "flex";
break;
}
}
</script>
</body>
</html>
用 AirConsole Controller Generator 生成 html 的小小帮助，成功了，个人 css 操作帮助实现了预期的输出。
我为我的 AirConsole 应用程序创建了一个简单的 controller.html。其中内容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
<title>AirConsole Controller</title>
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<!-- 3rd Party Libs -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- AIRCONSOLE -->
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
<script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
<script>
var airConsole = null;
var viewManager = null;
var deviceId = null;
var isReady = false;
var isLoadingActive = true;
/**
* Sets up the communication to the screen.
*/
function init() {
airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
airConsole.onMessage = function ( from, data ) {
if ( data.action == "REMOVE_LOADING" ) {
if ( isLoadingActive ) {
isLoadingActive = false;
showScreen ( "Ready" );
}
} else if (data.action == "SHOW_READY_SCREEN") {
showScreen ( "Ready" );
} else if ( data.action == "READY_RECEIVED") {
deviceId = data.info.deviceId;
showScreen ( "DoneReady" );
} else if ( data.action == "GAME_STARTED" ) {
showScreen ( "Waiting" );
} else if ( data.action == "START_GAME" ) {
showScreen ( "Controls" );
} else if (data.action == "GAME_END") {
showScreen ( "PerformEndGame" );
} else {
alert ( "Message: " + data.info.deviceId );
}
}
airConsole.onActivePlayersChange = function ( player_number ) {
// alert ( "Active Players Change" );
}
airConsole.onReady = function () {
// alert ( "On Ready" );
viewManager = new AirConsoleViewManager ( airConsole );
}
// Listen for view changes
airConsole.onCustomDeviceStateChange = function ( deviceId, data ) {
viewManager.onViewChange ( data, function ( view_id ) {
// view has changed
alert ( "VIEW MANAGER WORKING" );
} );
};
airConsole.onConnect = function ( id ) {
//alert ( "Device ID RECEIVED: " + id );
isReady = false;
}
airConsole.onGameEnd = function () {
alert ( "On Game End" );
}
}
</script>
<style type="text/css">
*{
padding: 0px;
margin: 0px auto;
}
html, body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
height: 100%;
overflow: hidden;
}
#controller-container {
background-color: #ff0000;
text-align: center;
font-family: sans-serif;
width: 100%;
height: 100vh;
position: relative;
}
.container_div {
position: relative;
display: flex;
background-color: #ff0000;
width: calc(100% -10px);
height: calc(100% -10px);
padding: 5px;
}
.inner_div{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: calc(100vh - 10px);
background-color: green;
}
.controls_div {
padding: 5px;
display: flex;
flex-direction: row;
}
.button_div {
width: calc(50% - 5px);
float: left;
}
.right_button{
float: right;
}
.control {
flex: 1;
justify-content: center;
align-items: center;
height: calc( 100vh - 10px );
background-color: cadetblue;
float: left;
}
.hidden_initially {
display: none;
}
.btn {
position: absolute;
width: 100%;
height: 100%;
}
.btn_left {
width: 40%;
left: 2%;
}
.btn_right {
width: 40%;
right: 2%;
}
.center_align {
text-align: center;
}
</style>
</head>
<body onload="init()">
<div id="controller-container">
<!-- CREATED BY ME -->
<div id="loading_container_id_div" class="container_div">
<div class="inner_div">LOADING</div>
</div>
<div id="ready_container_id_div" class="container_div view hidden_initially" onmousedown="sendReadyMessage ( 'READY' )">
<div class="inner_div">TAP TO READY</div>
</div>
<div id="done_ready_container_id_div" class="container_div hidden_initially">
<div class="inner_div">GAME is ABOUT to START</div>
</div>
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
<div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
<div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>
<div id="waiting_container_id_div" class="container_div hidden_initially" onmousedown="alert ( 'BINGO' )">
<div class="inner_div">WAITING for Game to END</div>
</div>
</div>
<script>
var controlsContainer = document.getElementById ( "controls_container_id_div" );
var doneReadyContainer = document.getElementById ( "done_ready_container_id_div" );
var loadingContainer = document.getElementById ( "loading_container_id_div" );
var readyContainer = document.getElementById ( "ready_container_id_div" );
var waitingContainer = document.getElementById ( "waiting_container_id_div" );
function sendReadyMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function sendMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function hideScreens () {
controlsContainer.style.display = "none";
doneReadyContainer.style.display = "none";
loadingContainer.style.display = "none";
readyContainer.style.display = "none";
waitingContainer.style.display = "none";
}
function showScreen ( screen ) {
hideScreens ();
switch ( screen ) {
case "Waiting":
waitingContainer.style.display = "block";
break;
case "Controls":
controlsContainer.style.display = "block";
break;
case "Ready":
readyContainer.style.display = "block";
break;
case "DoneReady":
doneReadyContainer.style.display = "block";
break;
case "PerformEndGame":
waitingContainer.style.display = "block";
break;
}
}
</script>
</body>
</html>
当我在任何设备上 运行 时，Android ( both app and browsers ) 或 iOS ( browsers )，下面粘贴的部分：
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
<div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
<div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>
屏幕截图：
工作正常，虽然同一部分无法纯粹检测“onmousedown”事件，当在 iOS AirConsole App[=42 上播放时=].似乎点击事件基本上发生在靠近屏幕中心的区域，其余区域无法检测到任何用户交互。
为什么只有 iOS AirConsole app 显示这种异常行为？我该怎么做才能让这两个按钮都被点击？
我的 CSS 或 html 内容是否存在缺陷。请引导我朝着正确的方向前进。
这是 the game 在 AirConsole
我没有 iOS phone 来测试这个，但据我所知，你使用
似乎很奇怪.inner_div {
width: 100%;
}
... 其中 .inner_div 用于 "Jump" 和 "Dash" 按钮，但您也使用
.button_div {
width: calc(50% - 5px);
float: left;
}
那么为什么相同的 DIV 元素有两个不同的 width 值？
此外，我可能会做一些不同的事情来减少代码量并使事情变得更简单。如果你有兴趣，我可以举个例子。
不过，我希望这对你有所帮助。
这是我创建的 "controller.html"，目的是为了 获得整个 window 的点击iOS AirConsole 应用程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
<title>AirConsole Controller</title>
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<!-- AirConsole-Controls -->
<link rel="stylesheet" type="text/css" href="airconsole-controls/button/button.css">
<link rel="stylesheet" type="text/css" href="airconsole-controls/dpad/dpad.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="controller/styles/styles.css">
<link rel="stylesheet" type="text/css" href="controller/styles/controls.css">
<!-- AIRCONSOLE -->
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
<script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
<!-- AIRCONSOLE CONTROLS -->
<script type="text/javascript" src="airconsole-controls/button/button.js"></script>
<script type="text/javascript" src="airconsole-controls/dpad/dpad.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-analog/swipe-analog.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-digital/swipe-digital.js"></script>
<!-- 3rd Party Libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="controller/libs/handlebars-v4.0.5.js"></script>
<!-- GENERATOR -->
<script type="text/javascript" src="controller/js/controller_generator.js"></script>
<script type="text/javascript" src="controller/js/main.js"></script>
<script>
var airConsole = null;
var viewManager = null;
var deviceId = null;
var characterName = null;
/**
* Sets up the communication to the screen.
*/
function init() {
airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
airConsole.onMessage = function ( from, data ) {
if ( data.action == "REMOVE_LOADING" ) {
showScreen ( "Ready" );
} else if ( data.action == "SHOW_READY_SCREEN" ) {
showScreen ( "Ready" );
} else if ( data.action == "READY_RECEIVED" ) {
deviceId = data.info.deviceId;
characterName = data.info.characterString;
var imageId = document.getElementById ( "image_id" );
imageId.src = "images/character/" + characterName + ".png";
imageId.alt = characterName;
showScreen ( "DoneReady" );
} else if ( data.action == "GAME_STARTED" ) {
showScreen ( "Waiting" );
} else if ( data.action == "START_GAME" ) {
showScreen ( "Controls" );
} else if (data.action == "GAME_END") {
showScreen ( "PerformEndGame" );
} else {
alert ( "Message: " + data.info.deviceId );
}
}
airConsole.onActivePlayersChange = function ( player_number ) {
// alert ( "Active Players Change" );
}
airConsole.onReady = function () {
// alert ( "On Ready" );
}
airConsole.onConnect = function ( id ) {
//alert ( "Device ID RECEIVED: " + id );
}
airConsole.onGameEnd = function () {
alert ( "On Game End" );
}
}
</script>
<style>
body{margin:0px;padding:0px;}
#controller-container {
background-color: #00ff00;
text-align: center;
font-family: sans-serif;
width:100%;
height: 100vh;
position: relative;
}
.image_div {
pointer-events: none;
position: absolute;
z-index:99;
top:5%;
width:50vh;
left: 0;right: 0;margin: 0 auto;
}
.image_div img{width: 100%;}
.bin_div {
z-index:0;
}
.message_div {
border: 2px outset white;
background-color: dodgerblue;
}
.btn-half {
text-align: center;
background-color: green;
/* background-image: url( "images/background/yellow_square.gif" );*/
background-size: contain;
color: #000000;
display:inline-block;
width:49%;
border: 4px solid white;
height: 98vh;
z-index: 1;
position: relative;
}
</style>
</head>
<body onload="init()">
<div id="controller-container">
<!-- REPLACE_HERE START -->
<div id="view-0" class="view" style="display: flex;">
<div id="view-0-section-0" class="section" style="height: 100%;">
<div id="loading_container_id" class="btn button-element element message_div">
<div class="button-text">Loading...</div>
</div>
</div>
</div>
<div id="view-3" class="view" style="display: none;">
<div id="view-3-section-0" class="section" style="height: 100%;">
<div id="ready_container_id" class="btn button-element element message_div">
<div class="button-text">TAP to READY</div>
</div>
</div>
</div>
<div id="view-4" class="view" style="display: none;">
<div id="view-4-section-0" class="section" style="height: 100%;">
<div id="done_ready_container_id" class="btn button-element element message_div">
<div class="button-text">Game will Start in few seconds, HOLD ON</div>
</div>
</div>
</div>
<div id="view-5" class="view" style="display: none;">
<div id="view-5-section-0" class="section horizontal" style="height: 100%;position: relative;">
<div id="jump_id" class="btn button-element element btn-half btn_div">
<div class="button-text">JUMP</div>
</div>
<div id="dash_id" class="btn button-element element btn-half btn_div">
<div class="button-text">DASH</div>
</div>
<div id="image_container_id" class="btn button-element element image_div">
<img id="image_id">
</div>
</div>
</div>
<div id="view-6" class="view" style="display: none;">
<div id="view-6-section-0" class="section" style="height: 100%;">
<div id="waiting_container_id" class="btn button-element element message_div">
<div class="button-text">Waiting for Game to End...</div>
</div>
</div>
</div>
<script type="text/javascript">
var ctrl_data = '{"orientation":"landscape","selected_view_id":"view-0","views":[{"id":"view-0","sections":[{"id":"view-0-section-0","elements":[{"id":"loading_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-0-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Loading...","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-3","sections":[{"id":"view-3-section-0","elements":[{"id":"ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-3-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"TAP to READY","send_onrelease":false,"message_data":[{"key":"action","value":"READY"}]}}],"classes":[]}]},{"id":"view-4","sections":[{"id":"view-4-section-0","elements":[{"id":"done_ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-4-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Game will Start in few seconds, HOLD ON","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-5","sections":[{"id":"view-5-section-0","elements":[{"id":"jump_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"JUMP","send_onrelease":false,"message_data":[{"key":"action","value":"JUMP"}]}},{"id":"dash_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-1","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"DASH","send_onrelease":false,"message_data":[{"key":"action","value":"DASH"}]}}],"classes":["horizontal"]}]},{"id":"view-6","sections":[{"id":"view-6-section-0","elements":[{"id":"waiting_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-6-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Waiting for Game to End...","send_onrelease":false,"message_data":[]}}],"classes":[]}]}]}';
</script>
<!-- REPLACE_HERE END -->
</div>
<script>
var controlsContainer = document.getElementById ( "view-5" );
var doneReadyContainer = document.getElementById ( "view-4" );
var loadingContainer = document.getElementById ( "view-0" );
var readyContainer = document.getElementById ( "view-3" );
var waitingContainer = document.getElementById ( "view-6" );
function sendReadyMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function sendMessage ( action ) {
airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
}
function hideScreens () {
controlsContainer.style.display = "none";
doneReadyContainer.style.display = "none";
loadingContainer.style.display = "none";
readyContainer.style.display = "none";
waitingContainer.style.display = "none";
}
function showScreen ( screen ) {
hideScreens ();
switch ( screen ) {
case "Waiting":
waitingContainer.style.display = "flex";
break;
case "Controls":
controlsContainer.style.display = "flex";
break;
case "Ready":
readyContainer.style.display = "flex";
break;
case "DoneReady":
doneReadyContainer.style.display = "flex";
break;
case "PerformEndGame":
waitingContainer.style.display = "flex";
break;
}
}
</script>
</body>
</html>
用 AirConsole Controller Generator 生成 html 的小小帮助，成功了，个人 css 操作帮助实现了预期的输出。