javascript 24点游戏计算

     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>

转载于:https://www.cnblogs.com/yscode/p/9896202.html