24点游戏大概在很早就完成了，中间jvascript程序也改动过，今天就发出来了，游戏规则是这样的：网页加载后，点击发牌产生 4 个随机数，范围是从1到9之间，可以重复。经过加减乘除计算后结果等于24。刚开始写的时候我对html,css不是很熟勉强布局完成效果还可以看啊，至今也没改动。javascript是经过sea.js模块化加载的，sea.js就不介绍了哈。
直接上代码来说吧：
(function(window){
var PorkeGame=function(){
this.fourPorke=[];
this.result=[];
this.yunsuanfu=[\'+\',\'-\',\'*\',\'/\',\'(\',\')\'];
this.r=[];
}
var p=PorkeGame.prototype;
//从min和max之间产生一个随机数
p._getRandomNumber=function(min,max){
var total = max -min + 1;
return Math.floor(Math.random() * total) + min;
}
//产生随机数
p.randomFourPorke=function(){
for(var i=1;i<=4;i++){
this.r.push(this._getRandomNumber(1,9));
}
return this.r;
}
p.operator=function(arr){
var array=[\'+\',\'-\',\'*\',\'/\',\'(\',\')\',1,2,3,4,5,6,7,8,9];
for(var j=0;j<array.length;j++){
if(array[j]==arr){
return array[j];
}
}
}
//经过各种运算后输出24点计算结果
p.replacement=function(){
var ten=[],str="",count=0,arr1=[],arr2=[];
arr2=this.randomFourPorke();
for(var i=1;i<=4;i++){
arr1.push(arr2.shift());
}
ten=this.createAllExprestion(arr1);
if(ten == undefined){
document.getElementById("source").firstChild.innerHTML="No";
document.getElementById("source").firstChild.className="one";
return arr1;
}else{
for(var i=0;i<=10;i++){
if(this.operator((ten.toString().substr(i,1)))=="+"){
str+=\'<img src="imgs/1.png"/>\';
}
if(this.operator((ten.toString().substr(i,1)))==\'-\'){
str+=\'<img src="imgs/2.png"/>\';
}
if(this.operator((ten.toString().substr(i,1)))==\'*\'){
str+=\'<img src="imgs/3.png"/>\';
}
if(this.operator((ten.toString().substr(i,1)))==\'/\'){
str+=\'<img src="imgs/4.png"/>\';
}
if(this.operator((ten.toString().substr(i,1)))=="("){
str+=\'<img src="imgs/leftbracket.png"/>\';
}
if(this.operator((ten.toString().substr(i,1)))==")"){
str+=\'<img src="imgs/rightbracket.png"/>\';
}
if(this.operator((ten.toString().substr(i,1)))=="1"){
str+=1;
}
if(this.operator((ten.toString().substr(i,1)))==\'2\'){
str+=2;
}
if(this.operator((ten.toString().substr(i,1)))==\'3\'){
str+=3;
}
if(this.operator((ten.toString().substr(i,1)))==\'4\'){
str+=4;
}
if(this.operator((ten.toString().substr(i,1)))=="5"){
str+=5;
}
if(this.operator((ten.toString().substr(i,1)))=="6"){
str+=6;
}
if(this.operator((ten.toString().substr(i,1)))==\'7\'){
str+=7;
}
if(this.operator((ten.toString().substr(i,1)))=="8"){
str+=8;
}
if(this.operator((ten.toString().substr(i,1)))=="9"){
str+=9;
}
}
document.getElementById("source").firstChild.innerHTML=str;
document.getElementById("source").firstChild.className="one";
return arr1;
}
}
//生成所有扑克的组合
p._getRandomPorkeIndex=function(arr1){
var tem= [];
tem.push([arr1[0],arr1[1],arr1[2],arr1[3]]);
tem.push([arr1[0],arr1[1],arr1[3],arr1[2]]);
tem.push([arr1[0],arr1[2],arr1[1],arr1[3]]);
tem.push([arr1[0],arr1[2],arr1[3],arr1[1]]);
tem.push([arr1[0],arr1[3],arr1[2],arr1[1]]);
tem.push([arr1[0],arr1[3],arr1[1],arr1[2]]);
tem.push([arr1[1],arr1[0],arr1[2],arr1[3]]);
tem.push([arr1[1],arr1[0],arr1[3],arr1[2]]);
tem.push([arr1[1],arr1[2],arr1[0],arr1[3]]);
tem.push([arr1[1],arr1[2],arr1[3],arr1[0]]);
tem.push([arr1[1],arr1[3],arr1[2],arr1[0]]);
tem.push([arr1[1],arr1[3],arr1[0],arr1[2]]);
tem.push([arr1[2],arr1[1],arr1[0],arr1[3]]);
tem.push([arr1[2],arr1[1],arr1[3],arr1[0]]);
tem.push([arr1[2],arr1[0],arr1[1],arr1[3]]);
tem.push([arr1[2],arr1[0],arr1[3],arr1[1]]);
tem.push([arr1[2],arr1[3],arr1[0],arr1[1]]);
tem.push([arr1[2],arr1[3],arr1[1],arr1[0]]);
tem.push([arr1[3],arr1[1],arr1[0],arr1[2]]);
tem.push([arr1[3],arr1[1],arr1[2],arr1[0]]);
tem.push([arr1[3],arr1[0],arr1[1],arr1[2]]);
tem.push([arr1[3],arr1[0],arr1[2],arr1[1]]);
tem.push([arr1[3],arr1[2],arr1[0],arr1[1]]);
tem.push([arr1[3],arr1[2],arr1[1],arr1[0]]);
return tem;
}
//生成所有符合计算的运算符的组合
p._getRandomOptIndex=function(){
var temArr = [];
temArr.push([this.yunsuanfu[0],this.yunsuanfu[1],this.yunsuanfu[2]]);
temArr.push([this.yunsuanfu[0],this.yunsuanfu[2],this.yunsuanfu[1]]);
temArr.push([this.yunsuanfu[1],this.yunsuanfu[0],this.yunsuanfu[2]]);
temArr.push([this.yunsuanfu[1],this.yunsuanfu[2],this.yunsuanfu[0]]);
temArr.push([this.yunsuanfu[2],this.yunsuanfu[0],this.yunsuanfu[1]]);
temArr.push([this.yunsuanfu[2],this.yunsuanfu[1],this.yunsuanfu[0]]);
temArr.push([this.yunsuanfu[3],this.yunsuanfu[0],this.yunsuanfu[1]]);
temArr.push([this.yunsuanfu[3],this.yunsuanfu[1],this.yunsuanfu[0]]);
temArr.push([this.yunsuanfu[0],this.yunsuanfu[1],this.yunsuanfu[3]]);
temArr.push([this.yunsuanfu[0],this.yunsuanfu[3],this.yunsuanfu[1]]);
temArr.push([this.yunsuanfu[1],this.yunsuanfu[0],this.yunsuanfu[3]]);
temArr.push([this.yunsuanfu[1],this.yunsuanfu[3],this.yunsuanfu[0]]);
temArr.push([this.yunsuanfu[3],this.yunsuanfu[0],this.yunsuanfu[2]]);
temArr.push([this.yunsuanfu[3],this.yunsuanfu[2],this.yunsuanfu[0]]);
temArr.push([this.yunsuanfu[0],this.yunsuanfu[2],this.yunsuanfu[3]]);
temArr.push([this.yunsuanfu[0],this.yunsuanfu[3],this.yunsuanfu[2]]);
temArr.push([this.yunsuanfu[2],this.yunsuanfu[0],this.yunsuanfu[3]]);
temArr.push([this.yunsuanfu[2],this.yunsuanfu[3],this.yunsuanfu[0]]);
temArr.push([this.yunsuanfu[3],this.yunsuanfu[1],this.yunsuanfu[2]]);
temArr.push([this.yunsuanfu[3],this.yunsuanfu[2],this.yunsuanfu[1]]);
temArr.push([this.yunsuanfu[1],this.yunsuanfu[2],this.yunsuanfu[3]]);
temArr.push([this.yunsuanfu[1],this.yunsuanfu[3],this.yunsuanfu[2]]);
temArr.push([this.yunsuanfu[2],this.yunsuanfu[1],this.yunsuanfu[3]]);
temArr.push([this.yunsuanfu[2],this.yunsuanfu[3],this.yunsuanfu[1]]);
return temArr;
}
// 混合所有的数字符合括号组合
p.createAllExprestion=function(arr1){
var signs =this._getRandomOptIndex();
var cards =this._getRandomPorkeIndex(arr1);
var array = [];
for(var i = 0,j=cards.length;i<j;i++){
for(var m = 0, n=signs.length; m < n; m++){
for(var q = 0; q < 7; q++){
switch(q){
case 0:array.push(cards[i][0] + signs[m][0] + cards[i][1] + signs[m][1] +cards[i][2] + signs[m][2] +cards[i][3]); break;
case 1:array.push(\'(\' + cards[i][0] + signs[m][0] + cards[i][1] +\')\' + signs[m][1] +cards[i][2] + signs[m][2] +cards[i][3]); break;
case 2:array.push(\'(\' + cards[i][0] + signs[m][0] + cards[i][1] + signs[m][1] +cards[i][2] +\')\' + signs[m][2] +cards[i][3]); break;
case 3:array.push(cards[i][0] + signs[m][0] + \'(\' + cards[i][1] + signs[m][1] +cards[i][2] +\')\' + signs[m][2] +cards[i][3]); break;
case 4:array.push(cards[i][0] + signs[m][0] + \'(\' + cards[i][1] + signs[m][1] +cards[i][2] + signs[m][2] +cards[i][3] +\')\'); break;
case 5:array.push(cards[i][0] + signs[m][0] + cards[i][1] + signs[m][1] + \'(\' + cards[i][2] + signs[m][2] +cards[i][3] +\')\'); break;
case 6:array.push(\'(\' + cards[i][0] + signs[m][0] + cards[i][1] +\')\' + signs[m][1] + \'(\' + cards[i][2] + signs[m][2] +cards[i][3] +\')\'); break;
}
}
}
}
//进行组装完成后进行24点计算
for(var y=0;y<array.length;y++){
if(eval(array[y])==24){
return array[y];
}
}
}
define(function(require,exports,module){module.exports=PorkeGame;})
})
define(function(require){
//依赖加载 zepto和index模块js
var $=require("zepto"),PorkeGame=require("index");
var Case=new PorkeGame();
var odd=[1,3,5,7];
var even=[0,2,4,6];
var count=0;
var tp = $.fx.cssPrefix + \'transform\';
var tp2="-webkit-transition";
(function(){
//发牌
$(\'#licensing\').attr("disabled",true);
$(\'#result\').attr("disabled",true);
$("#shuffle").click(function(){
var arr=[];
arr=Case.replacement();
$(\'.poker-box li\').each(function(index){
if($(this).filter(".b")){
$(this).filter(".b").css(tp,\'perspective(400px) rotateY(0deg)\');
}
if($(this).filter(".a")){
$(this).filter(".a").css(tp,\'perspective(400px) rotateY(90deg)\');
}
});
setTimeout(function(){
$.each(even,function(i,n){
$(".poker-box li").eq(n).animate({perspective:"400px", rotateY:"-90deg"},1000,\'\',function(){
$(\'.poker-box li\').eq(odd[i]).children().first().attr("src","img/"+arr[i]+".bmp");
$(".poker-box li").eq(odd[i]).css("display","block").animate({perspective:"400px",rotateY:"0deg"},1000,\'\',
function(){
//点击洗牌 查看结果
$("#licensing").removeAttr("disabled").text("洗牌");
$("#result").removeAttr("disabled").text("查看结果");
}).css(tp,\'perspective(400px) rotateY(0deg)\');
count++;
}).css(tp,\'perspective(400px) rotateY(-90deg)\');
});
},1)
});
//洗牌
$(\'#licensing\').click(function(){
$("#Shuffle").attr("disabled",true);
$("#result").attr("disabled",true);
$("#source span").addClass("one");
$(\'.poker-box li\').each(function(index){
if($(this).filter(".b")){
$(this).filter(".b").css(tp,\'perspective(400px) rotateY(-90deg)\');
}
if($(this).filter(".a")){
$(this).filter(".a").css(tp,\'perspective(400px) rotateY(0deg)\');
}
});
$("ul li").each(function(index){
$("ul li").eq(odd[index]).animate({perspective:"400px",rotateY:"90deg"},1000,\'\',function(){
$("ul li").eq(even[index]).animate({perspective:"400px",rotateY:"0deg"},1000,\'\',function(){
$("#shuffle").removeAttr("disabled");
$(\'#licensing\').attr("disabled",true).text("洗牌禁用");
$(\'#result\').attr("disabled",true).text("查看结果禁用");
});
})
})
})
$(\'#result\').click(function(){
$("#source span").removeClass("one");
})
})()
})
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.one{display:none;}
#container{width:450px;height:150px;margin:0 auto;}
#container .poker-box{position:relative;}
#container .poker-box li{display:inline-block;list-style-type:none;}
#container .poker-box li:nth-child(2){position:absolute;left:37px;top:0px;display:none;}
#container .poker-box li:nth-child(4){position:absolute;left:136px;top:0px;display:none;}
#container .poker-box li:nth-child(6){position:absolute;left:235px;top:0px;display:none;}
#container .poker-box li:nth-child(8){position:absolute;left:334px;top:0px;display:none;}
#PorkeGame{margin:0 auto;width:320px;}
#PorkeGame button{width:100px;height:23px;outline:none;line-height:23px;}
#source{background-color:white;width:430px;height:90px;border-radius:5px;margin:0 auto;margin-bottom:30px; font-size:70px;}
#source span{text-align:center;}
body{background:url(./img/0.jpg);background-size:cover;}
</style>
</head>
<body>
<div id="container">
<ul class="poker-box" id="poker-box">
<li class="b"><img src="img/pk.bmp"/></li>
<li class="a"><img src=""/></li>
<li class="b"><img src="img/pk.bmp"/></li>
<li class="a"><img src=""/></li>
<li class="b"><img src="img/pk.bmp"/></li>
<li class="a"><img src=""/></li>
<li class="b"><img src="img/pk.bmp"/></li>
<li class="a"><img src=""/></li>
</ul>
</div>
<div id="source"><span></span></div>
<div id="PorkeGame">
<button id="shuffle">发牌</button>
<button id="licensing">洗牌</button>
<button id="result">查看结果</button>
</div>
<script src="sea.js"></script>
<script>
seajs.use("indexZepto");
</script>
</body>
</html>