JS数字拼图小游戏

最新推荐文章于 2021-06-10 03:58:49 发布

trap94

最新推荐文章于 2021-06-10 03:58:49 发布

阅读量634

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/trap94/article/details/44513315

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<body >

<input type="button" id="1"   onClick="turn(this);"/>
<input type="button" id="2"  onClick="turn(this);"/>
<input type="button" id="3"  onClick="turn(this);"/><br/><br>
<input type="button" id="4"  onClick="turn(this);"/>
<input type="button" id="5"  onClick="turn(this);"/>
<input type="button" id="6"  onClick="turn(this);"/><br/><br>
<input type="button" id="7"  onClick="turn(this);"/>
<input type="button" id="8"  onClick="turn(this);"/>
<input type="button" id="9"  onClick="turn(this);"/><br/><br/>
<font color="red"><b id="bid"></b></font><!--显示游戏成功信息-->
<script>


var num = new Array();
        for(var i = 0; i <9; i++){
            var val =  Math.ceil(Math.random() * 9);//生产0-9的随机数，0的几率非常小，忽略不计
            var isEqu = false;
            for(var idx in num){
                if(num[idx] == val){isEqu = true; break;}//遍历数组看是否有重复的数
            }
            if(isEqu)//判断i是否为false，如果是则表示没有重复的数
                i--;//重复的话继续这个i，这里i--与for的i++相抵消
            else
                num[num.length] = val;//没有重复则赋值，进行下一个i
        }
	
 for(var k=1;k<10;k++){
 document.getElementById(k).value = num[k-1];
 if(num[k-1]==9){
     document.getElementById(k).style.background="#ffffff";
	 document.getElementById(k).value ="  ";
 }
 }

 function turn(btn){
  var btn_id=parseInt(btn.id);
  //上面一格是id-3，下面一格是id+3，左面一格是id-1，右边一格是id+1
  if( ((btn_id+3)>=1) &&  ((btn_id+3)<=9) && (document.getElementById(btn_id+3).value=="  ")     ){
  //通过id判断上下左右是否在界内，空格的value应为空，找到这样的空格
    document.getElementById(btn_id+3).value = document.getElementById(btn_id).value;//换value
	document.getElementById(btn_id+3).style.background = document.getElementById(btn_id).style.background;//换颜色
	document.getElementById(btn_id).value="  ";
	document.getElementById(btn_id).style.background="#ffffff";
  }
  
  if( ((btn_id-3)>=1) &&  ((btn_id-3)<=9) && (document.getElementById(btn_id-3).value=="  ")     ){
  //上下左右各找一次
    document.getElementById(btn_id-3).value = document.getElementById(btn_id).value;
	document.getElementById(btn_id-3).style.background = document.getElementById(btn_id).style.background;
	document.getElementById(btn_id).value="  ";
	document.getElementById(btn_id).style.background="#ffffff";
  }
  
   if( ((btn_id+1)>=1) &&  ((btn_id+1)<=9) && (document.getElementById(btn_id+1).value=="  ")     ){
   document.getElementById(btn_id+1).value = document.getElementById(btn_id).value;
	document.getElementById(btn_id+1).style.background = document.getElementById(btn_id).style.background;
	document.getElementById(btn_id).value="  ";
	document.getElementById(btn_id).style.background="#ffffff";
  }
  
  
   if( ((btn_id-1)>=1) &&  ((btn_id-1)<=9) && (document.getElementById(btn_id-1).value=="  ")     ){
    document.getElementById(btn_id-1).value = document.getElementById(btn_id).value;
	document.getElementById(btn_id-1).style.background = document.getElementById(btn_id).style.background;
	document.getElementById(btn_id).value="  ";
	document.getElementById(btn_id).style.background="#ffffff";
  }
    var bool=true;
	
	  for(var i=1;i<=8;i++){
	  if(document.getElementById(i).id != document.getElementById(i).value) bool=false;
	  //看是否每个id值都与value值相同，都相同则游戏结束
      }
	
	if(bool==true) document.getElementById("bid").innerHTML="you win and we can talk now!";

 }
</script>

</body>