制作H5游戏做桌面和移动端响应的一些心得

一直在看基础的知识，学得不多又不精。突然说要写个游戏还是比较慌的，总感觉什么都没学就要开始干了。

游戏逻辑很简单，就是两道选择题。因此也不用什么算法，直接点击到对的选项跳个提示和声音就行。用几个色块搭起来演示通过就可以。

<span style="white-space:pre">	</span>//之前有获取过对象

<span style="white-space:pre">	</span>q1a1.click(function () {
		$('#n_q1').hide();
		$('#y_q1').show("500");
		sound[0].play();
		q1a2.unbind("click");	
	});
	q1a2.click(function() {
		$('#n_q1').show("500");
		sound[1].play();
	});

诺如你所见就是这么low的代码。

要是数量多的话可以考虑给每道题目一个flag值，把题目和选项做成二位数组，通过数组的下标值和flag值对比判断错对。

然后从美工拿来界面图，花式抠图。第一次搞这个比较naive，扣出来的选项图大小不一，导致之后布局要给每个选项单独打style布丁。这是一个新的：抠图尺寸要抠一样， 不然之后之后的布局就全是坑。 扣完就可以按照美工给的界面图搭界面了。

这次练习对定位有了全新的理解，之前只会用绝对定位来打补丁，哪里需要元素各种margin、padding又移不到的时候直接来个绝对定位定位过去。这是个非常错误而且充满危险的举动，直接使用绝对定位虽然能获得暂时的效果，但也仅仅能在特定分辨率的机器上正常显示，一旦缩放或者到了不同的显示器上很可能会乱了全部的布局。而在这次的游戏中，通过相对定位和绝对定位的结合，不仅能达到想放哪就放哪的效果，在缩放和支持不同分辨率的屏幕上也能有很好的效果。主要是两点：

·给需要绝对定位的元素（们）的父元素做相对定位。这样能保证在缩放的时候当前元素相对于父元素的位置是确定的，而父元素是相对定位，在缩放的时候也不会乱了布局。

·给绝对定位的元素尺寸和偏移量用百分比。尺寸用百分比可以让元素跟着窗口一起缩放，在整体布局里还是和谐，偏移量用百分比就是为了在缩放和不同分辨率时的布局不会被打乱。

<span style="font-family:Microsoft YaHei;font-size:18px;">.btn_pic {
	position: relative;
}
.btn_pic img {
	position: absolute;
	width: 65%;
	margin-top: 6%;
	right: 0;
}</span>

诺还是这么low的代码，通过这个办法可以让class为btn_pic里的图片随意调整位置并且一直贴着窗口右边，在缩放的时候也还是保持着位置不乱了。用margin-top也是不知道在哪里看到一篇文章说如何让绝对定位实现相对定位的效果。具体的要自己试试才能体会到。

然后z-index属性要在绝对定位下才能实现的。抠出来的图片有些要实现层叠效果所以光用相对布局是行不通的。

然后就是做桌面端和移动端的响应了。实现响应式用的很多的就是媒体查询。奈何bootstrap学得不多只好自己写媒体查询了。这次偷懒只做了一个移动端和桌面端的样式，一方面是事件比较赶，另一方面做适配确实是个很无聊的事...

<span style="font-family:Microsoft YaHei;font-size:18px;">/*媒体查询*/
@media (min-width: 600px) and (max-width: 1600px) {
	#pic5 {
		width: 15%;
		margin-top: 12%;
		margin-left: 71%;
	}
}</span>

诺就是这么个东西，具体的可以百度媒体查询用法，就不现学现卖了。

然后就是在页面显示之前要先播放个视频。这个之前从来没搞过还是很懵逼的，百度了一下也是可以解决的。主要是video的用法。要求页面一打开先播放一段视频，等视频播放完自动显示html页面。这个思路就比较明确了，video标签，autoplay，js判断播放情况等播放完就加载剩下的。这里又偷了个小懒把除了video的元素全给display:none;了，视频播放完显示一下，省心省力。 诺继续看代码。

<span style="font-family:Microsoft YaHei;font-size:18px;">	var video = document.getElementById("video");
	video.loop = false;
	video.addEventListener('ended', function () {  
    	<span style="white-space:pre">	</span>$('#video').hide();;
		$('#all').show("500");
	}, false);</span>

获取video对象，禁止循环，添加绑定事件当ended属性被出发的时候执行函数。

写起来大概就这么几点，有什么错误和纰漏请指正。也不是什么很有营养的东西都能百度到，可是花了一天才搞定它。不过通过这次的练习也真的感觉自己之前学的东西派上了用场。有点意思。

蛤蛤。