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.........完整代码请登录后点击上方下载按钮下载查看