读心术小游戏-祖国的大好河山您去过哪里?-优快云博客

本文链接：https://blog.youkuaiyun.com/cuckoo1/article/details/3362063
这是一个基于网页的小游戏，通过键盘操作使玩家回忆并选择曾去过的地点图片，最终展示该地点的详细信息。游戏使用JavaScript实现图片随机排列及交互功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<script>
var hrefs = "http://www.51yala.com/";
var imgs = [
["upload/NewsIMG/20061131627430.jpg", "list/list_2281_1.html", "北京"],
["upload/newsimg/200612302027274.jpg", "list/list_2282_1.html", "天津"],
["upload/newsimg/20061161627330.jpg", "list/list_2283_1.html", "河北"],
["upload/newsimg/20061151852200.jpg", "list/list_2284_1.html", "山西"],
["upload/newsimg/20061110920420.jpg", "list/list_2285_1.html", "山东"],
["upload/newsimg/200611151139182.jpg", "list/list_2286_1.html", "河南"],
["upload/newsimg/200611151548233.jpg", "list/list_2287_1.html", "陕西"],
["upload/newsimg/200611161023320.jpg", "list/list_2288_1.html", "甘肃"],
["upload/newsimg/200611161010011.jpg", "list/list_2289_1.html", "宁夏"],
["upload/newsimg/200610311352180.jpg", "list/list_2290_1.html", "新疆"],
["upload/newsimg/200611151523292.jpg", "list/list_2291_1.html", "青海"],
["upload/newsimg/20066302130484.jpg", "list/list_2292_1.html", "西藏"],
["upload/newsimg/20079151143140.jpg", "list/list_2293_1.html", "上海"],
["upload/newsimg/20071161616052.jpg", "list/list_2294_1.html", "江苏"],
["upload/newsimg/20071171650541.jpg", "list/list_2295_1.html", "浙江"],
["upload/newsimg/200611101338410.jpg", "list/list_2296_1.html", "安徽"],
["upload/newsimg/20071221429391.jpg", "list/list_2297_1.html", "湖北"],
["upload/newsimg/20071261659040.jpg", "list/list_2298_1.html", "湖南"],
["upload/newsimg/20065241349411.jpg", "list/list_2299_1.html", "云南"],
["upload/newsimg/200610312115511.jpg", "list/list_2300_1.html", "贵州"],
["upload/newsimg/200610201537403.jpg", "list/list_2301_1.html", "四川"],
["upload/newsimg/200610311346180.jpg", "list/list_2302_1.html", "重庆"],
["upload/newsimg/200610311413080.jpg", "list/list_2303_1.html", "广东"],
["upload/newsimg/2007241456462.jpg", "list/list_2304_1.html", "广西"],
["upload/newsimg/2007211519160.jpg", "list/list_2305_1.html", "江西"],
["upload/newsimg/200611271545182.jpg", "list/list_2306_1.html", "福建"],
["upload/newsimg/200412301732030.jpg", "list/list_2307_1.html", "海南"],
["upload/newsimg/20071101609162.jpg", "list/list_2308_1.html", "香港"],
["upload/newsimg/2006113917360.jpg", "list/list_2309_1.html", "澳门"],
["upload/newsimg/20061131347292.jpg", "list/list_2310_1.html", "台湾"],
["upload/newsimg/20071151742110.jpg", "list/list_2311_1.html", "辽宁"],
["upload/newsimg/200611151121562.jpg", "list/list_2312_1.html", "吉林"],
["upload/newsimg/20071181956391.jpg", "list/list_2313_1.html", "黑龙江"],
["upload/newsimg/20079242212360.jpg", "list/list_2314_1.html", "内蒙古"]
];
var glc = new Array(21);
function create(start,end,num)
{
 var A=new Array(),B=new Array();
 var nums="";
 for(var i=start,j=0;i<=end;i++,j++)
 {
 A[j]=i;
 }
 for(var i=0;i<num;i++)
 {
  var indexN=Math.floor(Math.random()*A.length);
  glc[i]=A.splice(indexN,1);
 }
}
/*
 for (var i=0;i<3 ;i++ )
 {
  for (var j=0;j<7 ;j++ )
  {
   glc[i*7+j]=parseInt(Math.random()*()+1;
  }
 }
// 如何获得多个不重复的随机数?
*/
create(0,33,21);
</script>
<script defer>
var t_rows=3,t_cols=7;
 var grow;
 var table=document.createElement("TABLE")
 document.body.appendChild(table)  ;
 table.id ="GLC";
 table.border=0;
 table.style.backgroundColor="white";
 table.cellSpacing=2;
 table.cellPadding=9;
 table.align="center";
 var tbody=document.createElement("TBODY")
 table.appendChild(tbody) ;
 for (var i=0;i<=(t_rows-1);i++){
  var tr=document.createElement("TR");
  tbody.appendChild(tr) ;
  tr.align="center";
  tr.style.cssText="background:#FFFFFF";
  for (var j=0;j<=(t_cols-1);j++){
   var td=document.createElement("TD")  ;
   tr.appendChild(td);
   b=glc[t_cols+(i-1)*t_cols+j];
   td.innerHTML = "<img src='"+hrefs+imgs[b][0]+"' border='1' width='100' height='75'>";
  }
 }
 var B = new Array(3);
  B[0]=new Array(7);
  B[1]=new Array(7);
  B[2]=new Array(7);
 var o1 = document.getElementById("GLC")
 for (var i=0;i<3 ;i++ )
 {
  for (var j=0;j<7 ;j++ )
  {
   B[i][j]=glc[t_cols+(i-1)*t_cols+j];
//   B[i][j]= o1.rows[i].cells[j].innerText;
  }
 }
function MoveBar(d)
{
 var o = document.getElementById("GLC")
// for (var b in o) alert(b);
 var TtlLine=o.rows.length;
 var curline = CurLine.innerText;
 if (d==0)
 {
  curline = parseInt(curline)-1
 } else if (d==1)
 {
  curline = parseInt(curline)+1
 }
 if (curline>TtlLine-1)
 {
  curline = 0;
 } else if (curline<0)
 {
  curline = TtlLine-1;
 }
 if (curline+"" == "NaN")
 {
  curline = 0;
 }
// msg.innerText= CurLine.innerText+";"+curline+";"+TtlLine+";"+o.rows[curline];
 for (var i=0;i<TtlLine ;i++ )
 {
  o.rows[i].style.cssText = "background:#FFFFFF;color:#000000"
 }
 o.rows[curline].style.cssText ="background:#3333FF;color:#EE3333"
 CurLine.innerText = curline;
}
document.onkeydown=function()
{
 help.style.display = 'none';
 if(event.keyCode && (event.keyCode==37 || event.keyCode==38))
 {
//Move Up
  event.keyCode=0
  event.returnValue=false;
  MoveBar(0);
 } else if(event.keyCode && (event.keyCode==39 || event.keyCode==40))
 {
//Move Down
  event.keyCode=0
  event.returnValue=false;
  MoveBar(1);
 } else if(event.keyCode && (event.keyCode==13))
 {
//Transport
  if (CurLine.innerText=="")
  {
   alert("按上下键进行选择.")
   return;
  }
  trans();
 }
}
function trans()
{
// msg.innerText = CurLine.innerText;
 var o = document.getElementById("GLC")
 var A = new Array(3);
 for (var i=0;i<3 ;i++ )
 {
  A[i]=new Array(7);
  for (var j=0;j<7 ;j++ )
  {
   A[i][j]=B[i][j];
  }
 }
 if (CurLine.innerText==0)
 {
  for (var i=0;i<3 ;i++ )
  {
   for (var j=0;j<7 ;j++ )
   {
    if (j==0) B[i][0] = A[1][i];
    if (j==1) B[i][1] = A[1][3+i];
    if (j==2)
    {
     B[0][2] = A[1][6];
     B[1][2] = A[0][0];
     B[2][2] = A[0][1];
    }
    if (j==3) B[i][3] = A[0][2+i];
    if (j==4)
    {
     B[0][4] = A[0][5];
     B[1][4] = A[0][6];
     B[2][4] = A[2][0];
    }
    if (j==5) B[i][j] = A[2][i+1];
    if (j==6) B[i][j] = A[2][i+4];
   }
  }
  
 } else if (CurLine.innerText==1)
 {
  for (var i=0;i<3 ;i++ )
  {
   for (var j=0;j<7 ;j++ )
   {
    if (j==0) B[i][0] = A[0][i];
    if (j==1) B[i][1] = A[0][3+i];
    if (j==2)
    {
     B[0][2] = A[0][6];
     B[1][2] = A[1][0];
     B[2][2] = A[1][1];
    }
    if (j==3) B[i][3] = A[1][2+i];
    if (j==4)
    {
     B[0][4] = A[1][5];
     B[1][4] = A[1][6];
     B[2][4] = A[2][0];
    }
    if (j==5) B[i][j] = A[2][i+1];
    if (j==6) B[i][j] = A[2][i+4];
   }
  }
  
 } else if (CurLine.innerText==2)
 {
  for (var i=0;i<3 ;i++ )
  {
   for (var j=0;j<7 ;j++ )
   {
    if (j==0) B[i][0] = A[0][i];
    if (j==1) B[i][1] = A[0][3+i];
    if (j==2)
    {
     B[0][2] = A[0][6];
     B[1][2] = A[2][0];
     B[2][2] = A[2][1];
    }
    if (j==3) B[i][3] = A[2][2+i];
    if (j==4)
    {
     B[0][4] = A[2][5];
     B[1][4] = A[2][6];
     B[2][4] = A[1][0];
    }
    if (j==5) B[i][j] = A[1][i+1];
    if (j==6) B[i][j] = A[1][i+4];
   }
  }
  
 }
 var m = parseInt(Math.random()*7)
// var s= m+"<br/>"
 for (var i=0;i<3 ;i++ )
 {
  for (var j=0;j<7 ;j++ )
  {
   b =B[i][(j+m)%7];
   o.rows[i].cells[j].innerHTML = "<img src='"+hrefs+imgs[b][0]+"' border='1' width='100' height='75'>";
//   s += B[i][j]+","
  }
//   s += "<br/>"
 }
// msg.innerHTML = s;   //可以显示矩阵B中的数据进行对照
 Grond.innerText++;
 if (Grond.innerText==3)
 {
  b=B[1][3];
  o.style.display="none";
  result.innerHTML = "您去过的地方是:"+imgs[b][2]+"<br><a href='"+hrefs+imgs[b][1]+"' target='_blank'><img src='"+hrefs+imgs[b][0]+"' width=300></a>";
  result.style.display = "block";
//  window.location.reload();
 }
}
</script>
<body style="font-size:11pt;color:#333377;">
<div id=help onclick="this.style.display='none';" style="position:absolute;top:100;left:300;background:#EEEE00;border:1;padding:10;display:none"><pre>
这里有二十一个随机图片,按3x7的方阵排列  [x]
 1,按上下键或左右键, 使蓝色光条位于您去过的
   地方的图片所在的一排上;
 2,按回车,这二十一个图片会重新排列;
 3,重复第一，二步;
 4,当第三次按回车，您所去过的地方的图片就会
   弹出;
 5,您在弹出的图片上点击，您就会故地重游, 再
   次领略当地的风光;
 6,按F5后玩下一局.
                作者:谷来成 2008.11.22</pre></div>
<span id=CurLine style="display:none"></span><br/>
<span id=Grond style="display:none">0</span><br/>
<span id=msg style="display:none"></span>
<div id=result style="position:absolute;top:120;left:300;display:none"></div>
[小游戏]祖国的大好河山，您去过哪里?    <input type=button value="帮助" onclick="help.style.display='block';">
<br/><br/></body>