程序员节来个华容道

最新推荐文章于 2022-10-24 20:15:35 发布

hzhfxian

最新推荐文章于 2022-10-24 20:15:35 发布

阅读量3.9k

点赞数 2

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/hzhfxian/article/details/120934478

版权

《数字华容道》是一款数字解密类游戏,益智休闲的游戏风格,是磨练大脑,挑战思维逻辑,不可缺少的良友。

今天是程序员节，下水来个小游戏！直接上代码：

<html>
<title>数字华容道</title>
<script type="text/javascript">

var h=[1,2,3,4,5,6,7,8,0];
var di4=[[0,-1],[0,1], [-1,0],[1,0]]
//4个方向的x y 的下一步偏移量 上、下、左、右 
function rand()
{
　var i,x1,x,y,y1;
  for(i=0;i<9;i++)
   if(h[i]==0)
     {y=parseInt(i/3);x=i-y*3};
  i=parseInt(Math.random()*4);
  x1=x+di4[i][0];
  y1=y+di4[i][1];
  while(x1<0||x1>2||y1<0||y1>2)
  {
  i=parseInt(Math.random()*4);
  x1=x+di4[i][0];
  y1=y+di4[i][1];
  }  
  if(h[x1+3*y1]>0)
   {h[x+3*y]=h[x1+3*y1];h[x1+3*y1]=0; }
}
function show_coords(event)
{
　var i,x1,x,y,y1;
  x=parseInt(event.clientX/40)
  y=parseInt(event.clientY/40)
　//与0为邻可换
　//alert(h[x+y*3]);
　for(i=0;i<4;i++)
    {
      x1=x+di4[i][0];
      y1=y+di4[i][1];
      if(x1>=0&&x1<=2&&y1>=0&&y1<=2&&h[x1+3*y1]==0)
        {h[x1+3*y1]=h[x+3*y];h[x+3*y]=0; }
    }
  init();
}
function init()
{
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,0,0);
　fresh();
}
function fresh()
{
　var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
　context.fillStyle = "red";  // 填充颜色为红色
  context.strokeStyle = "blue";  // 画笔的颜色
  context.lineWidth = 5;  // 指定描边线的宽度
  context.save();
  context.beginPath();
  // 写字
     context.font = "30px orbitron";
  for(i=0;i<3;i++)
    for(j=0;j<3;j++)
      context.fillText(h[i*3+j], j*40+10,i*40+30);
  context.restore();
  context.closePath();
}
function begin()
{
  for(j=0;j<10;j++) rand();
  init();
}

</script>
<body >
<img id="scream" width="0" height="0"
src="jing.jpg">
<canvas id="canvas" width="120" height="120" onmousedown="show_coords(event)" style="border:1px solid #d3d3d3;">抱歉，您的浏览器不支持canvas元素</canvas>
<p><input type="button" value="开始" onClick="begin()">


</script>
</body>
</html>

hzhfxian

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
程序员节来个华容道

《数字华容道》是一款数字解密类游戏,益智休闲的游戏风格,是磨练大脑,挑战思维逻辑,不可缺少的良友。今天是程序员节，下水来个小游戏！直接上代码：<html><title>数字华容道</title><script type="text/javascript">var h=[1,2,3,4,5,6,7,8,0];var di4=[[0,-1],[0,1], [-1,0],[1,0]]//4个方向的x y 的下一步偏移量上、下、左、右 fun
复制链接

扫一扫