jquery实现井字小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现井字小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
      <style>
          @import url("https://fonts.googleapis.com/css?family=Amatic+SC|Dawning+of+a+New+Day|League+Script|Loved+by+the+King|Waiting+for+the+Sunrise");
body, html {
  height: 100%;
}

body {
  display: flex;
  flex-flow: column no-wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.paper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 500px;
  background-image: -webkit-repeating-linear-gradient(left, lightblue, 1px, transparent 1px, transparent 20px), -webkit-repeating-linear-gradient(bottom, lightblue, 1px, white 1px, white 20px);
  background-image: repeating-linear-gradient(90deg, lightblue, 1px, transparent 1px, transparent 20px), repeating-linear-gradient(0deg, lightblue, 1px, white 1px, white 20px);
  background-size: 20px 20px;
  background-origin: content-box;
  padding: 1em auto;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 0, 0, 0.1) inset;
}

.rotated {
  transform: rotate(-3deg);
}

.paper:after, .paper:before {
  z-index: -1;
  position: absolute;
  content: "";
  left: auto;
  max-width: 300px;
  background: white;
  transform: rotate(-3deg);
}

.paper:after {
  bottom: 10px;
  right: 7px;
  width: 70%;
  top: 80%;
  box-shadow: 3px 15px 12px #777;
  transform: rotate(3deg);
}

.paper:before {
  bottom: 10px;
  left: 7px;
  width: 70%;
  top: 80%;
  box-shadow: -3px 15px 12px #777;
  transform: rotate(-3deg);
}

#board {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 300px;
  margin: 50px auto;
}

#logo {
  width: 35%;
  height: auto;
  margin: 30px;
}
#logo svg {
  fill: #000033;
}

#gameboard {
  position: absolute;
  top: 5px;
  left: 20px;
  width: 100%;
  height: auto;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  stroke: #000033;
  stroke-width: 1.25px;
  stroke-miterlimit: 10;
  fill: none;
}
#gameboard .st4 {
  stroke-width: 2;
  stroke-miterlimit: 10;
}

draw {
  animation: dash 0.5s ease-in-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.tile {
  margin: 5%;
  width: 22%;
  height: 22%;
  border-radius: 5px;
  cursor: pointer;
  z-index: 2;
}

#winner {
  width: 300px;
  height: 40px;
  margin: auto;
  margin-top: 30px;
  position: absolute;
  align-self: flex-start;
  text-align: center;
  transform: rotate(5deg);
}

#reset {
  margin: 0.5vh;
  padding: 0;
  width: 50%;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  float: left;
}

h1, h2 {
  font-family: "Waiting for the Sunrise", cursive;
  margin: 0;
  font-size: 40px;
  color: #000033;
}

#settings, .container, .options {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#settings {
  height: 70%;
  align-items: center;
  align-content: center;
}
#settings .container {
  height: 30%;
  align-items: center;
}
#settings .container .options {
  flex-direction: row;
  width: 60%;
}

.btn {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.btn:hover {
  transform: rotate(3deg) scale(1.3);
}

.disable {
  display: none !important;
}

.fadeBounceIn {
  animation: fadeBounceIn 1s ease-in-out forwards;
}

.fadeIn {
  animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  80% {
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
      </style>
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <div class="rotated">
            <div class="paper">
                <div id="settings">
                    <div class='container'>
                        <h1 class="sets welcome">THIS IS Tic tac Toe !</h1>
                        <h1 class="sets chooses disable" id="opponent">CHOOSE YOUR OPPONENT</h1>
                        <h1 class="sets destiny disable" id="destiny">Choose your destiny</h1>
                    </div>
                    <div id="logo">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.9 179.6">
                            <path d="M59.5 0c0 0-0.1 2.9-0.3 7.9 -0.1 2.5-0.2 5.5-0.3 9 -0.1 3.5-0.2 7.4-0.3 11.7 -0.1 4.3-0.2 8.9-0.2 13.8 -0.1 4.9 0 10.1-0.1 15.4 0 5.4 0 10.9 0.1 16.5 0.1 5.6 0.2 11.3 0.4 17 0.2 5.7 0.3 11.4 0.6 17 0.2 5.6 0.5 11.1 0.8 16.5 0.4 5.3 0.6 10.5 1 15.4 0.3 4.9 0.7 9.5 1 13.8 0.4 4.3 0.7 8.2 1 11.7 0.3 3.5 0.6 6.5 0.8 9 0.5 5 0.8 7.8 0.8 7.8s-0.4-2.8-1-7.8c-0.3-2.5-0.7-5.5-1.1-9 -0.2-1.7-0.4-3.6-0.6-5.5 -0.2-1.9-0.4-4-0.6-6.1 -0.4-4.3-0.8-8.9-1.3-13.8 -0.4-4.9-0.8-10.1-1.2-15.4 -0.3-5.4-0.7-10.9-0.9-16.5 -0.3-5.6-0.5-11.3-0.7-17 -0.1-5.7-0.3-11.4-0.3-17.1 -0.1-5.6-0.1-11.2-0.1-16.5 0.1-5.4 0.1-10.5 0.3-15.5 0.1-4.9 0.3-9.6 0.4-13.8 0.1-2.1 0.2-4.2 0.2-6.1 0.1-2 0.2-3.8 0.3-5.5 0.2-3.5 0.4-6.5 0.5-9C59.3 2.9 59.5 0 59.5 0z"/>
                            <path d="M131.9 1.3c0 0 0.2 0.6 0.6 1.8 0.2 0.6 0.4 1.3 0.7 2.2 0.3 0.9 0.5 1.9 0.8 3 0.3 1.1 0.6 2.4 0.9 3.7 0.2 0.7 0.3 1.4 0.5 2.1 0.1 0.7 0.3 1.5 0.4 2.3 0.6 3.2 1.1 6.8 1.6 10.8 0.4 4 0.7 8.3 0.8 12.9 0.1 4.6 0.2 9.4 0 14.4 -0.3 10-0.9 20.6-1.4 31.2 -0.6 10.6-1.2 21.2-1.7 31.2 -0.6 9.9-1.2 19.2-1.6 27.2 -0.5 8-1 14.6-1.3 19.2 -0.3 4.6-0.5 7.3-0.5 7.3s0.1-2.7 0.3-7.3c0.2-4.6 0.4-11.3 0.8-19.3 0.4-8 0.8-17.3 1.2-27.2 0.5-10 1-20.6 1.6-31.2 0.6-10.6 1.3-21.2 1.6-31.2 0.1-5 0.2-9.8 0.2-14.3 0-4.6-0.3-8.9-0.6-12.8 -0.2-2-0.3-3.9-0.6-5.7 -0.1-0.9-0.2-1.8-0.3-2.6 -0.1-0.8-0.3-1.7-0.4-2.5 -0.1-0.8-0.3-1.6-0.4-2.3 -0.1-0.7-0.3-1.5-0.4-2.1 -0.3-1.4-0.5-2.6-0.8-3.8 -0.3-1.1-0.5-2.1-0.7-3 -0.2-0.9-0.5-1.6-0.6-2.2C132 1.9 131.9 1.3 131.9 1.3z"/>
                            <path d="M0 75.6c0 0 3.5-0.6 9.7-1.7 3.1-0.5 6.8-1.2 11.1-2 4.3-0.8 9.2-1.6 14.5-2.4 10.6-1.7 23-3.7 36.3-5.7 13.3-2 27.5-4 41.7-5.9 14.2-1.8 28.4-3.6 41.8-5.2 13.3-1.5 25.8-2.8 36.5-3.9 5.3-0.6 10.2-1 14.6-1.4 4.3-0.4 8.1-0.7 11.3-1 6.2-0.5 9.8-0.9 9.8-0.9s-3.6 0.4-9.8 1.1c-6.2 0.7-15.1 1.7-25.8 2.9 -5.3 0.6-11.1 1.3-17.2 2 -6.1 0.7-12.6 1.5-19.2 2.3 -13.3 1.6-27.5 3.4-41.7 5.3C99.2 61 85 62.9 71.7 64.9c-6.6 1-13.1 1.9-19.2 2.8 -6.1 0.9-11.8 1.8-17.2 2.6 -10.6 1.6-19.5 3-25.7 3.9C3.5 75.1 0 75.6 0 75.6z"/>
                            <path d="M-0.8 128.8c0 0 3.7-0.1 10-0.2 3.2-0.1 7.1-0.2 11.5-0.3 4.4-0.1 9.5-0.3 14.9-0.5 5.5-0.2 11.4-0.4 17.7-0.7 6.3-0.3 12.9-0.7 19.7-1 6.8-0.4 13.9-0.8 21.1-1.3 7.2-0.5 14.4-1 21.7-1.6 7.3-0.6 14.6-1.2 21.7-1.8 7.2-0.6 14.2-1.4 21-2 6.8-0.8 13.4-1.4 19.6-2.1 6.2-0.7 12.1-1.4 17.6-2.1 5.4-0.7 10.4-1.3 14.8-1.9 4.4-0.6 8.3-1.1 11.4-1.5 6.3-0.9 9.9-1.4 9.9-1.4s-3.6 0.6-9.9 1.6c-3.2 0.5-7 1.1-11.4 1.7 -2.2 0.3-4.5 0.7-7 1 -2.5 0.3-5.1 0.7-7.8 1.1 -5.4 0.8-11.3 1.5-17.5 2.3 -6.2 0.8-12.8 1.5-19.6 2.3 -6.8 0.7-13.8 1.5-21 2.1 -7.2 0.7-14.4 1.3-21.7 1.9 -7.3 0.5-14.6 1.1-21.7 1.5 -7.2 0.5-14.2 0.8-21.1 1.2 -6.8 0.3-13.5 0.6-19.7 0.8 -6.3 0.2-12.2 0.4-17.7 0.5 -2.7 0.1-5.4 0.1-7.9 0.2 -2.5 0-4.9 0-7.1 0.1 -4.5 0-8.3 0.1-11.5 0.1C2.8 128.8-0.8 128.8-0.8 128.8z"/>
                            <path d="M183.1 4.6c0 0-0.1 0.5-0.4 1.4 -0.3 0.9-0.6 2.1-1.1 3.6 -0.5 1.5-1 3.2-1.7 5 -0.7 1.8-1.4 3.8-2.2 5.7 -1.6 3.9-3.3 7.6-4.7 10.4 -0.7 1.4-1.3 2.5-1.8 3.3 -0.4 0.8-0.7 1.2-0.7 1.2s0.2-0.5 0.5-1.3c0.3-0.9 0.8-2.1 1.3-3.5 0.6-1.4 1.2-3.1 1.9-4.9 0.7-1.8 1.5-3.7 2.3-5.6 0.8-1.9 1.6-3.8 2.3-5.6 0.8-1.8 1.5-3.5 2.1-4.9 0.6-1.4 1.1-2.6 1.5-3.5C182.9 5.1 183.1 4.6 183.1 4.6z"/>
                            <path d="M159.6 6.8c0 0 1.5 1.7 3.6 4.3 0.6 0.6 1.1 1.3 1.8 2.1 0.6 0.7 1.3 1.5 2 2.3 1.4 1.6 2.9 3.2 4.5 4.8 1.6 1.6 3.1 3.2 4.6 4.7 0.8 0.7 1.5 1.4 2.2 2.1 0.7 0.7 1.4 1.3 2 1.9 2.5 2.3 4.1 3.8 4.1 3.8s-0.5-0.3-1.3-0.9c-0.8-0.6-2-1.4-3.3-2.4 -1.4-1-2.9-2.3-4.5-3.7 -0.8-0.7-1.6-1.4-2.4-2.2 -0.8-0.8-1.6-1.6-2.4-2.4 -0.8-0.8-1.6-1.6-2.3-2.5 -0.8-0.8-1.4-1.7-2.1-2.5 -1.3-1.6-2.6-3.2-3.5-4.6 -1-1.4-1.7-2.6-2.3-3.4C159.9 7.3 159.6 6.8 159.6 6.8z"/>
                            <path d="M101.8 141.7c0 0-0.2 0.3-0.6 0.8 -0.2 0.2-0.4 0.6-0.6 0.9 -0.1 0.2-0.2 0.4-0.3 0.6 -0.1 0.2-0.2 0.4-0.3 0.7 -0.2 0.5-0.4 1-0.6 1.5 -0.2 0.6-0.4 1.2-0.5 1.8 -0.3 1.2-0.6 2.6-0.9 4 -0.2 0.7-0.3 1.4-0.5 2.1 -0.1 0.7-0.4 1.3-0.5 2 -0.2 0.6-0.4 1.3-0.7 1.8 -0.2 0.6-0.5 1.1-0.8 1.6 -0.1 0.2-0.3 0.5-0.4 0.7 -0.1 0.2-0.3 0.4-0.4 0.6 -0.3 0.4-0.5 0.6-0.7 0.9 -0.4 0.4-0.7 0.7-0.7 0.7s0.2-0.3 0.5-0.8c0.2-0.2 0.3-0.6 0.5-1 0.1-0.2 0.2-0.4 0.3-0.6 0.1-0.2 0.2-0.5 0.3-0.7 0.2-0.5 0.4-1 0.5-1.6 0.2-0.6 0.3-1.2 0.5-1.8 0.3-1.3 0.6-2.6 0.8-4 0.2-0.7 0.3-1.4 0.5-2.1 0.2-0.7 0.4-1.3 0.6-2 0.2-0.6 0.5-1.2 0.7-1.8 0.3-0.6 0.5-1.1 0.9-1.5 0.2-0.2 0.3-0.4 0.4-0.6 0.2-0.2 0.3-0.4 0.5-0.5 0.3-0.3 0.6-0.6 0.8-0.8C101.5 141.9 101.8 141.7 101.8 141.7z"/>
                            <path d="M86.6 143.9c0 0 1.3 0.8 3.2 2.1 1.9 1.3 4.4 3.2 6.8 5.1 2.4 1.9 4.7 3.9 6.5 5.5 1.7 1.6 2.8 2.7 2.8 2.7s-1.3-0.8-3.2-2.1c-1.9-1.3-4.4-3.2-6.8-5.1 -2.4-1.9-4.7-3.9-6.5-5.5C87.6 145 86.6 143.9 86.6 143.9z"/>
                            <path d="M35.7 87.8c0 0-1.2 1.3-3 3.3 -0.4 0.5-0.9 1-1.4 1.6 -0.5 0.6-1 1.2-1.6 1.8 -1.1 1.3-2.2 2.6-3.4 4 -1.1 1.4-2.2 2.8-3.2 4.1 -0.5 0.7-1 1.3-1.4 1.9 -0.4 0.6-0.9 1.2-1.3 1.7 -1.6 2.2-2.6 3.6-2.6 3.6s0.2-0.4 0.5-1.1c0.3-0.7 0.8-1.7 1.5-2.9 0.6-1.2 1.5-2.5 2.4-3.9 0.5-0.7 1-1.4 1.5-2.1 0.5-0.7 1.1-1.4 1.6-2.1 0.6-0.7 1.2-1.4 1.7-2 0.6-0.7 1.2-1.3 1.8-1.9 1.2-1.2 2.3-2.3 3.3-3.2 1-0.9 1.9-1.6 2.5-2.1C35.3 88.1 35.7 87.8 35.7 87.8z"/>
                            <path d="M14 89.2c0 0 0.9 0.7 2.1 1.9 1.2 1.2 2.8 2.8 4.3 4.4 1.5 1.7 2.9 3.4 3.9 4.8 1 1.4 1.6 2.3 1.6 2.3s-0.9-0.7-2.1-1.9c-1.2-1.2-2.8-2.8-4.3-4.4 -1.5-1.7-2.9-3.4-3.9-4.8C14.6 90.2 14 89.2 14 89.2z"/>
                            <path d="M40.3 149.1c0 0-0.3 0.3-0.7 0.9 -0.5 0.6-1.1 1.4-1.9 2.3 -1.6 1.9-3.8 4.4-5.9 6.9 -2.2 2.5-4.3 5-5.9 6.9 -0.8 0.9-1.5 1.7-2 2.3 -0.5 0.5-0.8 0.8-0.8 0.8s0.2-0.4 0.6-1c0.4-0.6 0.9-1.5 1.6-2.5 0.7-1 1.5-2.2 2.5-3.5 0.9-1.2 2-2.5 3.1-3.8 1.1-1.3 2.2-2.5 3.3-3.6 1.1-1.1 2.1-2.1 3-3 0.9-0.9 1.7-1.5 2.3-2C40 149.4 40.3 149.1 40.3 149.1z"/>
                            <path d="M22.4 148.1c0 0 0.3 0.4 0.9 1 0.5 0.6 1.3 1.6 2.2 2.7 0.9 1.1 1.9 2.5 3 4 1.1 1.5 2.1 3.1 3.2 4.7 1 1.6 2.1 3.3 3 4.8 0.9 1.6 1.7 3 2.4 4.3 0.7 1.3 1.2 2.4 1.6 3.1 0.4 0.8 0.6 1.2 0.6 1.2s-0.3-0.4-0.8-1.1c-0.5-0.7-1.2-1.7-2-2.9 -0.8-1.2-1.7-2.6-2.7-4.1 -1-1.5-2-3.1-3.1-4.7 -1-1.6-2.1-3.2-3.1-4.8 -1-1.5-1.9-2.9-2.7-4.2 -0.8-1.2-1.4-2.3-1.9-3C22.6 148.5 22.4 148.1 22.4 148.1z"/>
                            <path d="M98.5 17.2c0 0-0.1 0-0.3 0.1 -0.2 0-0.5 0.1-0.9 0.1 -0.8 0-1.9-0.3-3.2-0.9 -1.3-0.6-2.8-1.6-4.8-1.8 -1.9-0.3-4.2 0.2-6.4 1.2 -2.2 1.1-4.2 2.8-5.9 5 -1.7 2.2-3.1 4.8-3.9 7.8 -0.4 1.4-0.7 3-0.8 4.5 -0.1 1.5 0 3.1 0.3 4.6 0.4 1.5 0.9 3 1.8 4.3 0.9 1.3 1.9 2.5 3.3 3.2 1.3 0.7 2.9 0.7 4.3 0.2 1.5-0.5 2.8-1.4 4.1-2.4 2.6-1.9 5.1-4 7.3-6.1 2.3-2.1 4.3-4.2 6.2-6.4 1.8-2.1 3.6-4.2 4.9-6.2 0.6-1 1-2.1 1-3.2 0-1.1-0.4-2.1-0.9-2.9 -1-1.7-2.6-2.7-3.8-3.3 -1.3-0.6-2.4-1-3.1-1.2 -0.7-0.2-1.1-0.4-1.1-0.4s0.4 0.1 1.1 0.3c0.7 0.2 1.9 0.5 3.2 1.1 1.3 0.6 2.9 1.5 4.1 3.3 0.6 0.9 1 1.9 1.1 3.1 0.1 1.2-0.3 2.5-1 3.6 -1.4 2.1-3 4.2-4.9 6.5 -1.8 2.2-3.9 4.4-6.2 6.6 -2.3 2.1-4.7 4.2-7.4 6.2 -1.3 1-2.7 2-4.4 2.6 -0.8 0.3-1.7 0.5-2.7 0.5 -0.9 0-1.8-0.3-2.6-0.7 -3.2-1.8-4.9-5.1-5.6-8.4 -0.4-1.7-0.4-3.3-0.3-5 0.1-1.6 0.4-3.2 0.9-4.8 0.9-3 2.5-5.8 4.3-8 1.9-2.2 4-4 6.3-5.1 2.3-1.1 4.7-1.5 6.8-1.1 1 0.2 1.9 0.5 2.7 0.9 0.8 0.4 1.5 0.8 2.1 1.1 1.3 0.7 2.4 1 3.1 1.1 0.4 0 0.7 0 0.9 0C98.4 17.3 98.5 17.2 98.5 17.2z"/>
                            <path d="M180.2 72.9c0 0-0.3-0.2-0.7-0.5 -0.2-0.2-0.6-0.3-0.9-0.5 -0.4-0.2-0.8-0.4-1.3-0.6 -1-0.4-2.3-0.6-3.8-0.6 -1.5 0-3.1 0.3-4.8 1.1 -0.8 0.4-1.6 0.9-2.3 1.5 -0.2 0.2-0.4 0.3-0.5 0.5l-0.5 0.6c-0.3 0.4-0.6 0.7-0.9 1.2 -1.1 1.7-1.8 3.8-2 6 -0.2 2.2 0.2 4.6 1.2 6.6 1 2 2.8 3.9 5 4.1 1.1 0.1 2.2-0.2 3.2-0.8 1.1-0.5 2.1-1.2 3.1-1.8 2-1.3 3.8-2.8 5.5-4.4 1.6-1.6 3.1-3.2 4.1-5 0.5-0.9 0.9-1.8 1-2.8 0.2-0.9 0.1-1.9 0-2.7 -0.3-1.7-1.3-3.2-2.2-4.3 -1-1.1-2-2-2.8-2.6 -0.9-0.6-1.6-1.1-2.1-1.4 -0.5-0.3-0.8-0.4-0.8-0.4s0.3 0.1 0.8 0.4c0.5 0.3 1.3 0.6 2.2 1.2 0.9 0.6 2 1.4 3 2.5 1 1.1 2.1 2.6 2.5 4.5 0.2 1 0.3 2 0.1 3 -0.2 1-0.5 2.1-1 3 -1 2-2.5 3.7-4.2 5.4 -1.7 1.7-3.5 3.2-5.6 4.6 -1 0.7-2.1 1.3-3.2 1.9 -1.1 0.6-2.5 1-3.9 0.9 -1.4-0.1-2.7-0.8-3.6-1.7 -1-0.9-1.7-2-2.3-3.1 -1.1-2.3-1.5-4.9-1.3-7.2 0.2-2.4 1-4.7 2.3-6.4 1.3-1.8 3-3.1 4.8-3.8 1.8-0.8 3.5-1 5.1-0.9 1.5 0.1 2.8 0.4 3.9 0.8 0.5 0.2 0.9 0.5 1.3 0.6 0.3 0.2 0.7 0.4 0.9 0.6C180 72.7 180.2 72.9 180.2 72.9z"/>
                            <path d="M183.5 138.2c0 0-0.2-0.3-0.6-0.7 -0.4-0.5-1-1.1-1.8-1.8 -0.8-0.7-2-1.4-3.4-1.9 -1.4-0.4-3.2-0.5-4.9 0.1 -1.7 0.7-3.2 2-4.6 3.7 -1.4 1.6-2.7 3.5-3.3 5.7 -0.3 1.1-0.5 2.2-0.3 3.3 0 0.3 0.1 0.6 0.2 0.8 0.1 0.3 0.2 0.6 0.3 0.9 0.2 0.5 0.5 1 0.8 1.5 1.4 1.9 3.6 3.2 5.9 4 1.2 0.4 2.3 0.8 3.5 1.1 1.2 0.3 2.4 0.4 3.4 0.1 0.3-0.1 0.5-0.2 0.8-0.3 0.2-0.1 0.4-0.3 0.6-0.5 0.4-0.4 0.8-0.8 1.1-1.3 0.6-1 1.1-2.1 1.6-3.2 1-2.2 1.9-4.2 2.5-6.3 0.6-2 1-4 1-5.9 0-1.8-0.4-3.5-0.9-5 -0.5-1.4-1.3-2.5-2-3.4 -0.7-0.8-1.4-1.3-1.9-1.7 -0.5-0.3-0.8-0.5-0.8-0.5s0.3 0.1 0.8 0.4c0.5 0.3 1.3 0.8 2.1 1.6 0.8 0.8 1.6 1.9 2.3 3.4 0.6 1.4 1.1 3.2 1.2 5.1 0.1 1.9-0.2 4-0.8 6.2 -0.6 2.1-1.4 4.3-2.4 6.5 -0.5 1.1-0.9 2.2-1.6 3.3 -0.3 0.5-0.8 1.1-1.3 1.5 -0.3 0.2-0.5 0.4-0.9 0.6 -0.3 0.2-0.6 0.3-1 0.4 -1.4 0.4-2.8 0.2-4-0.1 -1.3-0.3-2.5-0.6-3.7-1.1 -2.4-0.9-4.8-2.3-6.4-4.5 -0.4-0.5-0.7-1.1-1-1.8 -0.1-0.3-0.2-0.6-0.3-0.9 -0.1-0.4-0.1-0.7-0.2-1 -0.1-1.3 0-2.6 0.4-3.8 0.8-2.4 2.2-4.3 3.7-6 1.5-1.6 3.2-3 5-3.7 1.9-0.7 3.8-0.5 5.3 0.1 1.5 0.6 2.6 1.4 3.4 2.1 0.8 0.7 1.4 1.4 1.7 1.9C183.3 137.9 183.5 138.2 183.5 138.2z"/>
                            <path d="M95.9 83.3c0 0-0.9 0.4-2.4 1.1 -1.5 0.8-3.7 1.9-5.8 3.9 -1 1-2 2.2-2.7 3.7 -0.7 1.5-1.1 3.1-0.9 4.8 0 0.4 0.1 0.8 0.2 1.3 0.1 0.4 0.3 0.8 0.5 1.2 0.4 0.8 0.9 1.5 1.5 2.1 1.3 1.3 3 2.1 4.8 2.2 1.8 0.1 3.6-0.5 5-1.5 1.5-1 2.5-2.5 2.9-4.2 0.5-1.7 0.6-3.4 0.7-5.1 0.1-1.7 0.2-3.2 0-4.6 -0.2-1.4-0.6-2.6-1.3-3.6 -0.6-1-1.4-1.6-2.2-2 -0.7-0.4-1.4-0.7-1.8-0.8 -0.2 0-0.4-0.2-0.5-0.2 -0.1 0-0.2 0-0.2 0s0.1 0.2 0.2 0.1c0.1 0 0.3 0 0.5 0.1 0.5 0 1.1 0.1 1.9 0.5 0.8 0.4 1.7 1 2.4 2 0.8 1 1.3 2.3 1.6 3.8 0.3 1.5 0.3 3.1 0.2 4.8 -0.1 1.7-0.1 3.5-0.5 5.3 -0.4 1.9-1.6 3.7-3.3 4.9 -1.6 1.2-3.7 1.9-5.8 1.8 -2.1-0.2-4.1-1.2-5.5-2.6 -0.7-0.7-1.3-1.6-1.7-2.5 -0.2-0.5-0.4-0.9-0.5-1.4 -0.1-0.4-0.2-1-0.2-1.4 -0.2-1.9 0.4-3.8 1.2-5.3 0.8-1.5 1.9-2.8 3-3.8 1.1-1 2.3-1.7 3.3-2.3 1.1-0.6 2-1 2.8-1.3 0.8-0.3 1.4-0.5 1.9-0.7C95.6 83.4 95.9 83.3 95.9 83.3z"/>
                            <path d="M26.3 35.6c0 0-0.2-0.1-0.7-0.3 -0.4-0.2-1.1-0.4-2-0.4 -0.9-0.1-1.9 0-3.1 0.3 -1.2 0.3-2.4 1-3.5 1.9 -0.6 0.5-1.1 1-1.6 1.7 -0.2 0.3-0.4 0.7-0.6 1 -0.2 0.4-0.4 0.8-0.5 1.1 -0.6 1.5-0.8 3.3-0.7 5.2 0.1 1.8 0.6 3.7 1.5 5.4 0.8 1.7 2 3.3 3.6 4.5 1.5 1.2 3.4 1.8 5.2 1.4 1.8-0.4 3.2-1.8 4.1-3.3 0.9-1.6 1.5-3.3 2-5 0.4-1.7 0.9-3.3 0.7-4.7 -0.2-1.4-1.2-2.4-2.2-3 -1.1-0.6-2.1-0.8-3-0.9 -0.9-0.1-1.6-0.2-2-0.2 -0.5 0-0.7 0-0.7 0s0.3 0 0.7 0c0.5 0 1.2 0 2.1 0 0.9 0.1 2 0.2 3.2 0.7 0.6 0.3 1.2 0.6 1.7 1.2 0.3 0.3 0.5 0.6 0.7 1 0.1 0.3 0.3 0.7 0.4 1.1 0.2 0.8 0.1 1.7 0 2.5 -0.1 0.8-0.3 1.7-0.5 2.5 -0.4 1.7-0.9 3.5-1.9 5.3 -0.5 0.9-1.1 1.7-1.9 2.4 -0.4 0.3-0.8 0.7-1.3 0.9 -0.5 0.3-1.1 0.5-1.5 0.6 -2.2 0.6-4.5-0.2-6.2-1.5 -1.7-1.3-3-3.1-3.9-5 -0.9-1.9-1.4-3.9-1.5-5.9 -0.1-2 0.2-3.9 1-5.6 0.2-0.4 0.4-0.8 0.6-1.2 0.3-0.4 0.5-0.8 0.8-1.1 0.5-0.7 1.1-1.2 1.8-1.7 1.3-1 2.6-1.5 3.9-1.8 1.2-0.3 2.4-0.3 3.3-0.1 0.9 0.1 1.6 0.4 2 0.6C26.1 35.5 26.3 35.6 26.3 35.6z"/>
                        </svg>
                    </div>
                    <div class='container'>
                        <h1 class="sets btn welcome" id="play">Let's play !</h1>
                        <div class="sets  options chooses disable" id="humvscomp">
                            <h2 class="btn" id="human">human</h2>
                            <h1 class="vs">vs</h1>
                            <h2 class="btn" id="computer">computer</h2>
                        </div>
                        <div class="sets  options destiny disable" id="xvso">
                            <h2 class="btn" id="x">X</h2>
                            <h1 class="vs">vs</h1>
                            <h2 class="btn" id="o">O</h2>
                        </div>
                    </div>
                </div>
                <div id="winner"></div>
                <div id="board" class="disable">
                    <svg version="1.1" id="gameboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.9 179.6" style="enable-background:new 0 0 231.9 179.6;" xml:space="preserve">
                        <g id="tictactoe">
                            <path id="left" class="drawboard" d="M59.5,0c-3.6,60.8-1.8,122,5.3,182.5"/>
                            <path id="right" class="drawboard" d="M131.9,1.3c7.5,22.9,6.3,47.5,5,71.5c-1.7,32.6-3.5,65.2-5.2,97.8"/>
                            <path id="top" class="drawboard" d="M0,75.6c75.3-12.8,151.1-22.8,227.2-30.1"/>
                            <path id="bottom" class="drawboard" d="M-0.8,128.8c77.9-0.5,155.7-6.6,232.7-18.4"/>
                        </g>
                        <g id="x">
                            <g id="x2">
                                <path id="_x32__7_" class="st0" d="M183.1,4.6c-3.7,10.4-7.8,20.7-12.5,30.7"/>
                                <path id="_x31__7_" class="st0" d="M159.6,6.8c6.9,9.8,15.4,18.5,24.9,25.8"/>
                            </g>
                            <g id="x7">
                                <path id="_x32__6_" class="st0" d="M101.8,141.7c-5.6,4.9-3.4,14.9-8.5,20.4"/>
                                <path id="_x31__6_" class="st0" d="M86.6,143.9c6.4,5.1,12.8,10.3,19.3,15.4"/>
                            </g>
                            <g id="x3">
                                <path id="_x32__5_" class="st1" d="M36.2,88.9c-7.3,6.4-13.6,14-18.3,22.5"/>
                                <path id="_x31__5_" class="st1" d="M14,90.3c4.1,4.6,8.1,9.1,12.2,13.7"/>
                            </g>
                            <g id="x6">
                                <path id="_x32__4_" class="st0" d="M40.3,149.1c-6.3,6.2-12,13-17.3,20.1"/>
                                <path id="_x31__4_" class="st0" d="M22.4,148.1c6.1,8.3,11.8,16.9,16.8,25.9"/>
                            </g>
                            <g id="x0">
                                <path id="XMLID_133_" class="st2" d="M14.7,24.1C20.9,32.8,27,41.5,33,50.4"/>
                                <path id="XMLID_134_" class="st2" d="M15.4,49.1c1.2-1.6,1.5-3.6,1.9-5.5c1-5.2,2.5-10.3,4.4-15.2c0.8-2.1,1.9-4.3,3.9-5.1"/>
                            </g>
                            <g id="x1">
                                <path id="XMLID_135_" class="st3" d="M82.7,21.3c5.6,5.9,11.2,11.8,16.7,17.7"/>
                                <path id="XMLID_138_" class="st3" d="M101.8,23.3C84.7,41.4,80.4,40.4,80.4,40.4"/>
                            </g>
                            <g id="x4">
                                <path id="XMLID_137_" class="st3" d="M78.2,81.1c8.2,7.6,16,15.7,23.3,24.2"/>
                                <path id="XMLID_139_" class="st3" d="M105.2,76.7c-5,11.8-12.5,22.4-21.9,31.1"/>
                            </.........完整代码请登录后点击上方下载按钮下载查看