javascript - 井字游戏中计算机的随机位置选择无法正常工作

标签 javascript html css logic

好吧,我曾经用 Python 制作了一个非常简单的井字游戏,它很有趣,所以我想我会用 HTML/JS/CSS 来增加它的趣味性,让它变得更简单一些更漂亮。进展非常顺利,但是在为游戏制作简单的“AI”时遇到了一点小问题。游戏的简单 AI 应该是完全随机的,确实如此,但有时它会占据一个已经被占用的方格,有时它根本不动,所以我知道这可能很简单,我只是不知道是什么。我认为它可能在这段代码中的某个地方,但我不知道:

function computerEasyModeMove(){
  if(player == 'x'){
    computer = 'o';
  }
  if(player == 'o'){
    computer = 'x';
  }
  var computerMove = Math.floor(Math.random() * 9) + 1;
  while(computerMove == 1 && (topLeftBox.innerHTML == 'o' || topLeftBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
   while(computerMove == 2 && (topMiddleBox.innerHTML == 'o' || topMiddleBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
   while(computerMove == 3 && (topRightBox.innerHTML == 'o' || topRightBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
   while(computerMove == 4 && (middleLeftBox.innerHTML == 'o' || middleLeftBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 5 && (middleMiddleBox.innerHTML == 'o' || middleMiddleBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 6 && (middleRightBox.innerHTML == 'o' || middleRightBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 7 && (bottomLeftBox.innerHTML == 'o' || bottomLeftBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 8 && (bottomMiddleBox.innerHTML == 'o' || bottomMiddleBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 9 && (bottomRightBox.innerHTML == 'o' || bottomRightBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }

  if(computerMove == 1){
      topLeftBox.innerHTML = computer;
      topLeftBox.style.pointerEvents = 'none';
  }
  if(computerMove == 2){
      topMiddleBox.innerHTML = computer;
      topMiddleBox.style.pointerEvents = 'none';
  }
  if(computerMove == 3){
      topRightBox.innerHTML = computer;
      topRightBox.style.pointerEvents = 'none';
  }
  if(computerMove == 4){
      middleLeftBox.innerHTML = computer;
      middleLeftBox.style.pointerEvents = 'none';
  }
  if(computerMove == 5){
      middleMiddleBox.innerHTML = computer;
      middleMiddleBox.style.pointerEvents = 'none';
  }
  if(computerMove == 6){
      middleRightBox.innerHTML = computer;
      middleRightBox.style.pointerEvents = 'none';
  }
  if(computerMove == 7){
      bottomLeftBox.innerHTML = computer;
      bottomLeftBox.style.pointerEvents = 'none';
  }
  if(computerMove == 8){
      bottomMiddleBox.innerHTML = computer;
      bottomMiddleBox.style.pointerEvents = 'none';
  }
  if(computerMove == 9){
      bottomRightBox.innerHTML = computer;
      bottomRightBox.style.pointerEvents = 'none';
  }
}

这就是我基本上用于简单 AI 的代码,下面是完整代码。我觉得我的比赛看起来不错。如果您想尝试一下,我一直在 repl.it 上制作它,(https://repl.it/@AnthonyRobinso2/Tic-Tac-Toe-HTMLJS)如果这样更容易帮助我。我还在开发游戏,以及更难的 AI 模式,所以我仍然需要完成这些,但我想要一个可玩的游戏,即使它真的很容易。再次感谢!

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <center>
      <div id='setup'>
        Hey! Welcome to my Tic-Tac-Toe game! Please choose some settings below!
        <br>
        <div class='xOrO'>
          <h3>Player:</h3>
          Do you want to be X's?<input type='checkbox' id='Xs' value='X' onchange='player = "x"'>
          &nbsp; &nbsp; Or do you want to be O's?<input type='checkbox' id='Os' value='O' onchange='player = "o"'>
          <h3>Opponent AI Level:</h3>
          Easy<input type='checkbox' id='easy' value='easyMode'>
          &nbsp; &nbsp; Medium (Coming Soon)<input type='checkbox' id='medium' value='mediumMode'>
          &nbsp; &nbsp; Hard (Coming Soon)<input type='checkbox' id='hard' value='hardMode'>
          <br>
          <h4>Do you want to go first, or have the computer go first?</h4>
          First<input type='checkbox' id='goFirst' value='first' onchange='playerFirst = true'>
          &nbsp; &nbsp Second<input type='checkbox' id='goSecond' value='second' onchange='playerFirst = false'>
          <br>
          <br>
          <br>
          <button id='confirm' onclick='getGameUp()'>Confirm</button>
      </div>


      <div id='ticTacBoard'>
        <div id='topLeft' onclick='move("topLeft")'>&nbsp;</div>
        <div id='topMiddle' onclick='move("topMiddle")'>&nbsp;</div>
        <div id='topRight' onclick='move("topRight")'>&nbsp;</div>
        <br>
        <div id='middleLeft' onclick='move("middleLeft")'>&nbsp; </div>
        <div id='middleMiddle' onclick='move("middleMiddle")'>&nbsp; </div>
        <div id='middleRight' onclick='move("middleRight")'>&nbsp;</div>
        <br>
        <div id='bottomLeft' onclick='move("bottomLeft")'>&nbsp;</div>
        <div id='bottomMiddle' onclick='move("bottomMiddle")'>&nbsp;</div>
        <div id='bottomRight' onclick='move("bottomRight")'>&nbsp;</div>
      </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <div id='winDiv'>
        <h1 id='winHeader'>
          YOU WON!!!
        </h1>
      </div>
      <div id='lossDiv'>
        <h1 id='lossHeader'>
          You lost...
        </h1>
      </div>
      <div id='tieDiv'>
        <h1 id='tieHeader'>
          It's a tie!
        </h1>
      </div>
    </center>
    <script src="script.js"></script>
  </body>
</html>

Javascript:
var player;
var computer;
var playerFirst;
var topLeftBox = document.getElementById('topLeft');
var topMiddleBox = document.getElementById('topMiddle');
var topRightBox = document.getElementById('topRight');
var middleLeftBox = document.getElementById('middleLeft');
var middleMiddleBox = document.getElementById('middleMiddle');
var middleRightBox = document.getElementById('middleRight');
var bottomLeftBox = document.getElementById('bottomLeft');
var bottomMiddleBox = document.getElementById('bottomMiddle');
var bottomRightBox = document.getElementById('bottomRight');
var winDiv = document.getElementById('winDiv');
var lossDiv = document.getElementById('lossDiv');
var ticTacBoard = document.getElementById('ticTacBoard');
var setup = document.getElementById('setup');
function getGameUp(){
  setup.style.visibility = "hidden";
  ticTacBoard.style.visibility = "visible";
  if(playerFirst == false){
    computerEasyModeMove();
  }
}

function move(x){
  if(x=='topLeft'){
    if(topLeftBox.innerHTML != 'o' && topLeftBox.innerHTML != 'x'){
      topLeftBox.innerHTML = player;
      topLeftBox.style.pointerEvents = 'none';
    }
  }
  if(x=='topMiddle'){
    if(topMiddleBox.innerHTML != 'o' && topMiddleBox.innerHTML != 'x'){
      topMiddleBox.innerHTML = player;
      topMiddleBox.style.pointerEvents = 'none';
    }
  }
  if(x=='topRight'){
    if(topRightBox.innerHTML != 'o' && topRightBox.innerHTML != 'x'){
      topRightBox.innerHTML = player;
      topRightBox.style.pointerEvents = 'none';
    }
  }
  if(x=='middleLeft'){
    if(middleLeftBox.innerHTML != 'o' && middleLeftBox.innerHTML != 'x'){
      middleLeftBox.innerHTML = player;
      middleLeftBox.style.pointerEvents = 'none';
    }
  }
  if(x=='middleMiddle'){
    if(middleMiddleBox.innerHTML != 'o' && middleMiddleBox.innerHTML != 'x' ){
      middleMiddleBox.innerHTML = player;
      middleMiddleBox.style.pointerEvents = 'none';
    }
  }
  if(x=='middleRight'){
    if(middleRightBox.innerHTML != 'o' && middleRightBox.innerHTML != 'x'){
      middleRightBox.innerHTML = player;
      middleRightBox.style.pointerEvents = 'none';
    }
  }
  if(x=='bottomLeft'){
    if(bottomLeftBox.innerHTML != 'o' && bottomLeftBox.innerHTML != 'x'){
      bottomLeftBox.innerHTML = player;
      bottomLeftBox.style.pointerEvents = 'none';
    }
  }
  if(x=='bottomMiddle'){
    if(bottomMiddleBox.innerHTML != 'o' && bottomMiddleBox.innerHTML != 'x'){
      bottomMiddleBox.innerHTML = player;
      bottomMiddleBox.style.pointerEvents = 'none';
    }
  }
  if(x=='bottomRight'){
    if(bottomRightBox.innerHTML != 'o' && bottomRightBox.innerHTML != 'x'){
      bottomRightBox.innerHTML = player;
      bottomRightBox.style.pointerEvents = 'none';
    }
  }
  checkWinCondition();
  if(winDiv.style.visibility != 'visible'){
    computerEasyModeMove();
    checkWinCondition();
  }
}

function computerEasyModeMove(){
  if(player == 'x'){
    computer = 'o';
  }
  if(player == 'o'){
    computer = 'x';
  }
  var computerMove = Math.floor(Math.random() * 9) + 1;
  while(computerMove == 1 && (topLeftBox.innerHTML == 'o' || topLeftBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
   while(computerMove == 2 && (topMiddleBox.innerHTML == 'o' || topMiddleBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
   while(computerMove == 3 && (topRightBox.innerHTML == 'o' || topRightBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
   while(computerMove == 4 && (middleLeftBox.innerHTML == 'o' || middleLeftBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 5 && (middleMiddleBox.innerHTML == 'o' || middleMiddleBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 6 && (middleRightBox.innerHTML == 'o' || middleRightBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 7 && (bottomLeftBox.innerHTML == 'o' || bottomLeftBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 8 && (bottomMiddleBox.innerHTML == 'o' || bottomMiddleBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }
  while(computerMove == 9 && (bottomRightBox.innerHTML == 'o' || bottomRightBox.innerHTML == 'x')){
    computerMove = Math.floor(Math.random() * 9) + 1;
  }

  if(computerMove == 1){
      topLeftBox.innerHTML = computer;
      topLeftBox.style.pointerEvents = 'none';
  }
  if(computerMove == 2){
      topMiddleBox.innerHTML = computer;
      topMiddleBox.style.pointerEvents = 'none';
  }
  if(computerMove == 3){
      topRightBox.innerHTML = computer;
      topRightBox.style.pointerEvents = 'none';
  }
  if(computerMove == 4){
      middleLeftBox.innerHTML = computer;
      middleLeftBox.style.pointerEvents = 'none';
  }
  if(computerMove == 5){
      middleMiddleBox.innerHTML = computer;
      middleMiddleBox.style.pointerEvents = 'none';
  }
  if(computerMove == 6){
      middleRightBox.innerHTML = computer;
      middleRightBox.style.pointerEvents = 'none';
  }
  if(computerMove == 7){
      bottomLeftBox.innerHTML = computer;
      bottomLeftBox.style.pointerEvents = 'none';
  }
  if(computerMove == 8){
      bottomMiddleBox.innerHTML = computer;
      bottomMiddleBox.style.pointerEvents = 'none';
  }
  if(computerMove == 9){
      bottomRightBox.innerHTML = computer;
      bottomRightBox.style.pointerEvents = 'none';
  }
}


function computerMediumModeMove(){

}

function computerHardModeMove(){

}

function checkWinCondition(){
  //Top 3 Player
  if(topLeftBox.innerHTML == player && topMiddleBox.innerHTML == player && topRightBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Top 3 Computer
  if(topLeftBox.innerHTML == computer && topMiddleBox.innerHTML == computer && topRightBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Middle 3 Player
  if(middleLeftBox.innerHTML == player && middleMiddleBox.innerHTML == player && middleRightBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Middle 3 Computer
  if(middleLeftBox.innerHTML == computer && middleMiddleBox.innerHTML == computer && middleRightBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Bottom 3 Player
  if(bottomLeftBox.innerHTML == player && bottomMiddleBox.innerHTML == player && bottomRightBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Bottom 3 Computer
  if(bottomLeftBox.innerHTML == computer && bottomMiddleBox.innerHTML == computer && bottomRightBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Left 3 Player (Up and Down)
  if(bottomLeftBox.innerHTML == player && topLeftBox.innerHTML == player && middleLeftBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Left 3 Computer (Up and Down)
  if(bottomLeftBox.innerHTML == computer && topLeftBox.innerHTML == computer && middleLeftBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Middle 3 Player (Up and Down)
  if(bottomMiddleBox.innerHTML == player && topMiddleBox.innerHTML == player && middleMiddleBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Middle 3 Computer (Up and Down)
  if(bottomMiddleBox.innerHTML == computer && topMiddleBox.innerHTML == computer && middleMiddleBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Right 3 Player (Up and Down)
  if(bottomRightBox.innerHTML == player && topRightBox.innerHTML == player && middleRightBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Right 3 Computer (Up and Down)
  if(bottomRightBox.innerHTML == computer && topRightBox.innerHTML == computer && middleRightBox.innerHTML == computer ){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Diagonal Left to Right Player (Down Slope) 
  if(bottomRightBox.innerHTML == player && topLeftBox.innerHTML == player && middleMiddleBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Diagonal Left to Right Computer (Down Slope) 
  if(bottomRightBox.innerHTML == computer && topLeftBox.innerHTML == computer && middleMiddleBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
  //Diagonal Right to Left Player (Up Slope) 
  if(bottomLeftBox.innerHTML == player && topRightBox.innerHTML == player && middleMiddleBox.innerHTML == player){
    ticTacBoard.style.pointerEvents = 'none';
    winDiv.style.visibility = 'visible';
  }
  //Diagonal Right to Left Computer(Up Slope) 
  if(bottomLeftBox.innerHTML == computer && topRightBox.innerHTML == computer && middleMiddleBox.innerHTML == computer){
    ticTacBoard.style.pointerEvents = 'none';
    lossDiv.style.visibility = 'visible';
  }
}

CSS:
#setup{
  background-color:white;
  height:75vh;
  width:75vw;
}
#ticTacBoard{
  text-transform:capitalize;
  font-size:0vw;
  background-color:white;
  visibility:hidden;
  position:absolute;
  top:2vh;
}
#winDiv{
  visibility:hidden;
  background-color:white;
  position:relative;
  border:2px solid black;
}
#lossDiv{
  visibility:hidden;
  background-color:white;
  position:relative;
  border:2px solid black;
}
#tieDiv{
  visibility:hidden;
  background-color:white;
  position:relative;
  border:2px solid black;
}
#topLeft{
  display:inline-block;
  padding:30px;
  border-right:2px solid black;
  border-bottom:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#topLeft:hover{
  background-color:lightgrey;
}
#topMiddle{
  display:inline-block;
  padding:30px;
  border-bottom:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#topMiddle:hover{
  background-color:lightgrey;
}
#topRight{
  display:inline-block;
  padding:30px;
  border-left:2px solid black;
  border-bottom:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#topRight:hover{
  background-color:lightgrey;
}
#middleLeft{
  display:inline-block;
  padding:30px;
  border-right:2px solid black;
  border-bottom:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#middleMiddle:hover{
  background-color:lightgrey;
}
#middleMiddle{
  display:inline-block;
  padding:30px;
  border-bottom:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#middleLeft:hover{
  background-color:lightgrey;
}
#middleRight{
  display:inline-block;
  padding:30px;
  border-left:2px solid black;
  border-bottom:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#middleRight:hover{
  background-color:lightgrey;
}
#bottomLeft{
  display:inline-block;
  padding:30px;
  border-right:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#bottomLeft:hover{
  background-color:lightgrey;
}
#bottomMiddle{
  display:inline-block;
  padding:30px;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#bottomMiddle:hover{
  background-color:lightgrey;
}
#bottomRight{
  display:inline-block;
  padding:30px;
  border-left:2px solid black;
  width:15vw;
  height:15vh;
  font-size:9vw;
  cursor:pointer;
}
#bottomRight:hover{
  background-color:lightgrey;
}
body{
  background-color:grey;
}

最佳答案

发生这种情况是因为您的逻辑存在缺陷。我将使用您的一小部分代码(如下所示):

var computerMove = Math.floor(Math.random() * 9) + 1;
while(computerMove == 1 && (topLeftBox.innerHTML == 'o' || topLeftBox.innerHTML == 'x')){
  computerMove = Math.floor(Math.random() * 9) + 1;
}
 while(computerMove == 2 && (topMiddleBox.innerHTML == 'o' || topMiddleBox.innerHTML == 'x')){
   computerMove = Math.floor(Math.random() * 9) + 1;
}

考虑这种情况:代码的第一行产生 computerMove = 1 topLeftBox已经填充了“x”或“o”(没关系)。然后,我们转到第二行(第一个 while 循环)。因为它检测到 topLeftBox已经填满了,它会随机化一个数字。假设随机化给出 computerMove = 2 .然后,作为 computerMove不是 1再说了,第一个 while循环退出,进入第二个 while环形。为了这个例子,我们假设 topMiddleBox也已经填充了“x”或“o”。它满足循环条件,因此,它随机化一个数字。假设它随机化 computerMove = 1 .第二个循环的条件,需要computerMove有值(value)2 , 不满足,因此退出循环。问题:它产生了 computerMove1topLeftBox已经填满了。那是你的代码失败的时候。

我还注意到你给了所有 div s 唯一的 ID。但是,在这种特殊情况下,您可以通过只给出所有 div 来简化代码。是一个可以迭代的类。请参阅以下代码,它可以解决您的问题,并且无需为每个 div 提供特定 ID。在您的特定情况下:

JS
let actionBox = document.querySelectorAll('div.action-box')
function computerEasyModeMove() {
  let randomizeMove = () => Math.floor(Math.random() * 9)
  let computerMove = randomizeMove()

  computer = player == 'x' ? 'o' : 'x'
  while (actionBox[computerMove].innerHTML.trim() != '&nbsp;') {
    computerMove = randomizeMove()
  }

  actionBox[computerMove].innerHTML = computer
  actionBox[computerMove].style.pointerEvents = 'none'
}

HTML(在 div#ticTacBoard 内)
<div id='topLeft' class='action-box' onclick='move("topLeft")'>&nbsp;</div>
<div id='topMiddle' class='action-box' onclick='move("topMiddle")'>&nbsp;</div>
<div id='topRight' class='action-box' onclick='move("topRight")'>&nbsp;</div>
    <br>
<div id='middleLeft' class='action-box' onclick='move("middleLeft")'>&nbsp; </div>
<div id='middleMiddle' class='action-box' onclick='move("middleMiddle")'>&nbsp; </div>
<div id='middleRight' class='action-box' onclick='move("middleRight")'>&nbsp;</div>
    <br>
<div id='bottomLeft' class='action-box' onclick='move("bottomLeft")'>&nbsp;</div>
<div id='bottomMiddle' class='action-box' onclick='move("bottomMiddle")'>&nbsp;</div>
<div id='bottomRight' class='action-box' onclick='move("bottomRight")'>&nbsp;</div>

fork 代码:here

关于javascript - 井字游戏中计算机的随机位置选择无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59463769/

相关文章:

css - 链接 + Div + 悬停 + 背景

jquery - 使用自定义 CSS 的垂直范围输入也尊重 parent 的尺寸

javascript - 在指令中使用 $compile 会触发 AngularJS 无限摘要错误

javascript - 如何在 Flot 中的多个堆叠线图之间填充颜色?

javascript - 什么是纯浏览器内 JavaScript 测试框架?

php - 谷歌浏览器不会更新 CSS

javascript - jquery 在密码和文本字段之间切换 IE bug

javascript - 必需的字符串参数 'text' 不存在

javascript - html5 视频中的 Youtube 类型注释

javascript - 我想将查询字符串附加到我的 GitHub 页面 URL,以便它搜索我的搜索栏