第一个AirConsole项目”Hello world”

你可能没赶上 2016 AirConsole HTML5游戏峰会，但千万别错过学习如何创建一个 AirConsole 项目

在 AirConsole 项目中，浏览器就是一个Console输出面板，智能手机充当游戏机。我打算把之前的几个游戏项目转成AirConsole，但是，目前还不知道如何在AirConsole项目上产生收益。不过，在AirConsole环境中，重新实现之前的游戏项目，肯定是一个有趣的过程。

那么，创建一个AirConsole都需要准备什么呢？AirConsole的官方网站上有入门教程，但是坦白的讲，我不喜欢（译者：我也不喜欢）。而且按照教程把源码copy到自己的服务器上，不能正常运行，然并卵。另外，教程中建议使用1.3版本的引擎，而他们自个儿已经把引擎升级到1.4了。（译者：国外的开发商，也有这个癖好啊！）

下面是我的示例：

首先，要有一个服务器，来上传游戏项目，或者在电脑本地搭建web服务器环境。如果你从事HTML5游戏开，相信你的电脑上已经安装了 WampServer（for PC）或 MAMP（For Mac），那就直接看下一步。

在服务器上，创建一个文件夹，设置名称为airconsole，然后在文件夹下创建两个文件screen.html和controller.hml。这两个文件代表两个屏，第一个文件是运行游戏的屏，第二个是显示游戏主机的屏。

controller.html文件的代码如下：

<html>
     <head>
          <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.4.0.js"></script>
          <script type="text/javascript">
               // creation of a new AirConsole instance
               var airconsole = new AirConsole();
               // function to be executed every 3 seconds
               setInterval(function(){
                    // generating a random value
                    var value = Math.floor(Math.random() * 100);
                    // this is how we send a message to AirConsole main screen
                    airconsole.message(AirConsole.SCREEN, value);  
                    // updating "value" h1 content to show on the controller the value we are sending
                    document.getElementById("value").innerHTML = "I am sending " + value;   
               }, 3000);
          </script>  
     </head>
<body>
<h1 id = "value" style = "color:white;margin-top:150px"></h1>
</body>
</html>

screen.html的代码如下：

<html>
     <head>
          <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.4.0.js"></script>  
          <script type="text/javascript">
               // creation of an empty array
               var deviceIds = [];
               // creation of a new AirConsole instance
               var airconsole = new AirConsole();
               // this is the listener for incoming messages
               airconsole.onMessage = function(deviceId, data) {
                    // checking if the deviceId is already in deviceIds vector, and if it's not...
                    if(deviceIds.indexOf(deviceId) == -1){
                         // pushing the device id
                         deviceIds.push(deviceId);
                         // adding a new h1 to the body
                         document.body.innerHTML += '<h1 style = "color:white" id = "dev' + deviceId + '"></h1>'
                    }
                    // updating the content of the proper h1 tag according to device id and received data
                    document.getElementById("dev" + deviceId).innerHTML = "I am receiving " + data + " from  device " + deviceId;   
               };
          </script>
     </head>
     <body>
     </body> 
</html>

然后使用下面的url链接，就可以测试游戏项目了

http://www.airconsole.com/simulator/#<path_to_airconsole_directory>
本节中，我的示例url是：
http://www.airconsole.com/simulator/#http://localhost/airconsole/

具体URL根据你的项目文件夹名称、以及项目父级文件夹名称不同，而不同。

运行后得到的结果如下图所示：

正如你看到的，每个控制器，都可以和主屏幕中的游戏进行通信。
下一节，我们来看与喜爱，如果把一个实际的游戏项目，转换成AirConsole项目。

对了，点击下载本节示例源文件。

原文名称：Hello World AirConsole tutorial: your first AirConsole project
原文链接：点击阅读原文
原文作者：Emanuele feronato

Published by 拉登Dony

发表回复