数字华容道 test

最新推荐文章于 2024-10-18 11:12:30 发布

EQUINOXwang

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量110

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/EQUINOXwang/article/details/129828908

版权

仅作个人学习用

因为是完全随机分配数字因此有较大可能生成无解情况

后续准备 1、Timer 2、解决无解情况

<html>
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>16宫排序</title>
<style>
input[type="button"]{
  height: 90px;
  width: 180px;
  font-size: 36px;
  font-weight: bold;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  text-align: center;
}
</style>
<script language="javascript">
	
sp=16;
var gameOver = false;
function p1(i)
{
	 if (gameOver) {
	    return;
	  }
  if (sp==i+1 && sp %4!=1 || sp==i-1 && sp%4!=0 || sp==i+4 || sp==i-4) 
  {  document.abc.a1[sp-1].value=document.abc.a1[i-1].value;
     document.abc.a1[i-1].value=" ";
     sp=i;
  }
  checkcorrect();
  checknoanswer();
}
function p10()
   { var abc=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
     function Sortfun(a, b){ 
      return 10*Math.random() - 7; 
       }
   abc.sort(Sortfun);
   gameOver = false;
   for (i=0;i<15;i++)
     document.abc.a1[i].value=abc[i];
     document.abc.a1[15].value=" ";
   var buttons = document.querySelectorAll('input[type="button"]');
   for (var i = 0; i < buttons.length-1; i++) {
     buttons[i].disabled = false; 
   }
}  

function checkcorrect()
{
  var flag=true;
  var answer=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
  for(i=0;i<15;i++){
    if(document.abc.a1[i].value!=answer[i]){flag=false;}
  }
  if(flag){
    alert("Accomplished");
	gameOver = true;
	    var buttons = document.querySelectorAll('input[type="button"]');
	    for (var i = 0; i < buttons.length-1; i++) {
	      buttons[i].disabled = true; 
	    }
  }
  return false;
}

function checknoanswer()
{
  var noanswer1=true;noanswer2=true;
  var noanswer1=[1,2,3,4,5,6,7,8,9,10,11,12,13,15,14];
  var noanswer2=[1,2,3,4,5,6,7,8,9,10,11,12,15,14,13];
  for(i=0;i<15;i++){
    if(document.abc.a1[i].value!=noanswer1[i]){noanswer1=false;}
  }
  for(i=0;i<15;i++){
    if(document.abc.a1[i].value!=noanswer2[i]){noanswer2=false;}
  }
  if(noanswer1||noanswer2){
    alert("No Answer");
	gameOver = true;
	    var buttons = document.querySelectorAll('input[type="button"]');
	    for (var i = 0; i < buttons.length-1; i++) {
	      buttons[i].disabled = true; 
	    }
  }
  return false;
}

</script>
</head>

<body>
<form name="abc">
<script>
for (i=0;i<4;i++)
{
  document.write("<p>");
  for (j=0;j<4;j++)
    document.write("<input name='a1' type='button' value=' ' onclick='return p1(" + (i*4+j+1) + ")'/>&nbsp;&nbsp;");
  document.write("</p>");
}

</script>

<!--
<p><input name="a1" type="button" value="1" onclick="return p1(1)">&nbsp;&nbsp;
<input name="a1" type="button" value="2" onclick="return p1(2)">&nbsp;&nbsp;
<input name="a1" type="button" value="3" onclick="return p1(3)">&nbsp;&nbsp;
<input name="a1" type="button" value="4" onclick="return p1(4)">&nbsp;&nbsp;</p>

<p><input name="a1" type="button" value="5" onclick="return p1(5)">&nbsp;&nbsp;
<input name="a1" type="button" value="6" onclick="return p1(6)">&nbsp;&nbsp;
<input name="a1" type="button" value="7" onclick="return p1(7)">&nbsp;&nbsp;
<input name="a1" type="button" value="8" onclick="return p1(8)">&nbsp;&nbsp;</p>

<p><input name="a1" type="button" value="9" onclick="return p1(9)">&nbsp;&nbsp;
<input name="a1" type="button" value="10" onclick="return p1(10)">&nbsp;&nbsp;
<input name="a1" type="button" value="11" onclick="return p1(11)">&nbsp;&nbsp;
<input name="a1" type="button" value="12" onclick="return p1(12)">&nbsp;&nbsp;</p>

<p><input name="a1" type="button" value="13" onclick="return p1(13)">&nbsp;&nbsp;
<input name="a1" type="button" value="14" onclick="return p1(14)">&nbsp;&nbsp;
<input name="a1" type="button" value="15" onclick="return p1(15)">&nbsp;&nbsp;
<input name="a1" type="button" value="16" onclick="return p1(16)">&nbsp;&nbsp;</p>
-->

<p>
<input id="a10" type="button" value="开始" onclick="return p10()">
</p>
</form>

</body>
</html>