HTML5 创建手机滚珠子小游戏（一）

来源：互联网发布：股票1272战法源码指标编辑：程序博客网时间：2024/06/10 21:07

人生第一次写技术博客，还是真是相当艰辛啊，望各位看官多多包涵。

首先说一下为什么会有这个想法，因为在偶然之间突然发现HTML5中的一个新特性——DeviceMotionEvent，支持浏览器去探测手机的重力感应，因此脑子灵光一闪就想玩一下这个小技术点，最后确定开发一个简单小游戏——手机滚珠子。游戏来源于一个安卓游戏，市场已经有很多个版本了，各位可去百度或谷歌一下。

现在说说我的开发思路，由于是初学者，所以又害怕自己不够坚持写完这个小游戏，所以写篇博客监督下自己，顺便看看自己的进度。

第一，写个HTML5模板页面，并且测试一下浏览器是否支持DeviceMotionEvent属性，代码大概如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>HTML 5实现手机滚珠子</title>
</head>
<body>
<script>
if(window.DeviceMotionEvent){
window.addEventListener("devicemotion",deviceMotionHandler,false);
}else{
alert("您的浏览器不支持重力测试！");
}
</script>
</body>
</html>

第二，开始写好页面元素，包括背景，小球以及挡板等。

下面代码放在body中：
<div id="lineBox">
<div class="lineH120 line"></div>
</div>
<div id="ballBox">
<div class="ballLight"></div>
</div>

下面为CSS样式代码：

body{
background-color:#dcd7d0;
background-image: -webkit-radial-gradient(circle, rgba(218, 212, 205, 0.11) 0%, rgba(204, 192, 177, 1));
background-image: radialgradient(circle, rgba(218, 212, 205, 0.11) 0%, rgba(204, 192, 177, 1));
font-family:Microsoft Yahei;
margin:0 auto;
padding:0;
text-align:center;
font-size:14px;
color:#636363;
overflow:hidden;
max-width:960px;
height:100%;
}
#ballBox{
background-image: -webkit-radial-gradient(circle, rgba(202, 202, 202, 0.11) 0%, rgba(167, 163, 158, 1));
background-image: radialgradient(circle, rgba(202, 202, 202, 0.11) 0%, rgba(167, 163, 158, 1));
width:60px;
height:60px;
position:absolute;
left:0;
top:0;
box-shadow:2px -2px 4px #999;
border-radius:60px;
}
.ballLight{
width: 22px;
height: 27px;
border-radius: 120px;
opacity: 0.2;
margin-left: 3px;
margin-top: 17px;
background: -webkit-radial-gradient(circle, rgba(255, 253, 253, 0.74) 60%, rgba(255, 253, 250, 0.06));
}
#lineBox .line{
position:absolute;
left:0;
top:0;
background:#000;
}
#lineBox .lineH120{
height:120px;
width:8px;
left:200px;
}

最后，就是书写JS脚本，先是得到手机重力感应的三个方向X,Y,Z,如下图所示:

然后将X,Y,Z的进行十进制转换，最后将珠子的左偏量和上偏量赋值即可，代码如下：

效果图：

这只是初步可以完成珠子自由在屏幕里滚动，demo地址请用手机扫描下面的二维码进行访问。

十分感谢各位看官的观看，第一次写博客还是有很多不懂的，请各位见谅！

邱疯子，人生就是要不断疯癫，要不如何承受生活给予我们的颠簸。

0 0

HTML5 创建手机滚珠子小游戏 （一）

HTML5 创建手机滚珠子小游戏（一）