制作一个新的H5游戏

这次做的游戏逻辑上并不麻烦，本质是个选择题，小朋友们操纵一只大象进行选择。要是选对了大象会到对应的选项下喷水，选错了大象跑到对应的选项下做个尴尬的表情。

主要卡在这几个地方：随机从一堆题目（数组）里取5道作为一次游戏的体量，随机从多个选项里取2个作为一次游戏里单次题目的选项。因为正确选项是固定的，所以只要取另外两个错误选项加上正确的选项打乱顺序做成三个选项就行。再就是当用户触发点击事件后给大象做出动画效果。

首先解决从一堆题目中随机取5道和一堆选项中随机取两道。

function getArrayItems(arr, num) {
//新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
//取出的数值项,保存在此数组
var return_array = new Array();
for (var i = 0; i<num; i++) {
//判断如果数组还有可以取出的元素,以防下标越界
if (temp_array.length>0) {
//在数组中产生一个随机索引
var arrIndex = Math.floor(Math.random()*temp_array.length);
//将此随机索引的对应的数组元素值复制出来
return_array[i] = temp_array[arrIndex];
//然后删掉此索引的数组元素,这时候temp_array变为新的数组
temp_array.splice(arrIndex, 1);
} else {
//数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
break;
}
}
return return_array;
}

就是这个函数，第一个参数为传进来的数组，比如一堆题目就把一堆题目作为数组穿进去；第二个参数是需要取出的个数。返回值为一个新的数组，比如需要从一堆题目数组里随机取5道，那么返回值就是一个从原来的数组随机取出5道题目的新数组。有了这么函数就能很好解决以上两个问题。

再然后就是把数组随机排序。因为题目是随机取出的，所以不用再对5道题目打乱顺序。但选项不能每次都是相同位置的，需要打乱顺序。

function randomArray (array) {
return array.sort(function () {
return 0.5 - Math.random();
});
}


以上函数实现传入一个数组，直接返回打乱顺序之后的。

再然后就是在用户点击之后让大象动一动了。这里用了三个图，一个是静态的大象图，另外两个是gif，大象喷水和大象做尴尬的表情。在答对之后大象喷水，打错大象做尴尬的表情。封装了一个又臭又长的函数。触发点击事件后直接把图片的引用地址更换，同时用动画改变大象的位置，看起来像是大象在动一样。使用延时函数对应gif的帧数等gif加载一次之后再让大象回来变成静态等待用户第二次点击。之后再调用第二个延时函数调用changeAll把题目和选项更换一下作为下一题。这里应该在触发每个动画函数时调用一下stop方法，不然万一用户丧心病狂地点击会出事。

function moveElephant (gifSrc,wid,position1,position2,position3,t1,t2,t3,t4) {
elephant.animate({marginLeft:position1}, t1).attr('src',gifSrc).css({"width":wid}).css({"position":"absolute","margin-top":position3});
setTimeout(function () {
elephant.attr('src',"img/case1.png").animate({marginLeft:position2}, t2).css({"width":"30%"}).css({"margin-top":"18%"});
},t3);
setTimeout(function () {
changeAll();
},t4);
}

然后就是做一个倒计时。用延时函数每隔1秒调用一次。

var flag = 1;
function countDown () {
var tm = parseInt(time.innerHTML);
time.innerHTML = tm - flag;
checkAlive();
}

<span style="white-space:pre">	</span>var ct = setInterval(function () {<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>countDown();<span style="white-space:pre">		</span>
<span style="white-space:pre">	</span>},1000);

最后初始化一下页面，生成一个题目和三个选项，给每个选项绑定点击事件就行了。