用iOS设备控制的HTML5“小蜜蜂”游戏
近日,英国伦敦一家专注于Web App开发的公司Webdigi针对经典FC游戏“小蜜蜂”进行了一次有趣的翻新:用HTML5结合Node.js技术彻底改变该游戏的传统玩法。
玩家可以在PC浏览器上访问: http://www.webdigi.co.uk/fun/space/,然后用iPhone或iPad扫描其中的二维码(或在手机浏览器中访问: http://webdigi.co.uk/821638),响应后玩家能够左右摇晃iPhone/iPad控制飞船打小蜜蜂了,当然,你也可以在PC浏览器中玩该游戏,方向键(左、右)控制飞船的移动,空格键发射子弹。这也是智能手机与PC双屏互动的一种新玩儿法。
用户iOS设备控制端核心代码如下:
//Detect if the browser supports DeviceMotionEvent
if
(window.DeviceMotionEvent != undefined) {
//ondevicemotion is fired when iOS device detects motion
window.ondevicemotion =
function
(e) {
//ax is the movement on the x axis.
//This motion is used to move the ship in the game
ax = event.accelerationIncludingGravity.x * 5;
ay = event.accelerationIncludingGravity.y * 5;
//Status 0 is start, 1 is left, 2 is right, 3 is stay
if
(status == 0){
//initial condition
status = 3;
//stay
socket.emit(
'spaceChange'
, {
'ax'
: 3});
statusmsg =
'Waiting for movement'
;
}
if
(ax > 14 && status != 2){
//move right on device
status = 2;
socket.emit(
'spaceChange'
, {
'ax'
: 2});
statusmsg =
'Moving ship right'
;
}
if
(ax < -14 && status != 1){
//move left on device
status = 1;
socket.emit(
'spaceChange'
, {
'ax'
: 1});
statusmsg =
'Moving ship left'
;
}
if
(ax > -14 && ax < 14 && status != 3){
//device held steady
status = 3;
socket.emit(
'spaceChange'
, {
'ax'
: 3});
statusmsg =
'Ship held steady'
;
}
用户PC浏览器端数据处理的代码如下:
//iOS detection and corresponding action
var
lastkey = 37;
var
dataStart=0;
socket.on(
'connect'
,
function
() {
//if sockets gets disconnected then mention room again
socket.emit(
'setChannel'
,
{
'channelName'
:
''
});
});
socket.on(
'spaceChanges'
,
function
(data) {
if
(dataStart == 0){
//First movement data arrived
document.getElementById(
'status'
).innerHTML
=
'Receiving data from your iOS device'
;
dataStart = 1;
}
ax = data.ax;
【用iOS设备控制的HTML5“小蜜蜂”游戏】相关文章
6. SlimerJS – Web开发人员可编写 JS 控制的浏览器
10. CSS设置DIV背景色渐变显示
本文来源:https://www.51html5.com/a3228.html
﹝用iOS设备控制的HTML5“小蜜蜂”游戏﹞相关内容
- iOS 5.1更新猜想:Siri直接控制硬件
- HTML5游戏开发 之 循环的控制(3)
- HTML5游戏开发 之 循环的控制(1)
- HTML5游戏开发 之 循环的控制(2)
- CSS3绘制的腾讯QQ企鹅Logo
- 超轻量的可定制的回到顶部 jQuery 插件
- 超轻量的可定制的回到顶部 jQuery 插件
- TaggingJS – 可以灵活定制的jQuery标签系统插件
- 超轻量的可定制的回到顶部 jQuery 插件
- 超轻量的可定制的回到顶部 jQuery 插件