JavaScript五子棋效果

antzone發表於2017-04-17
JavaScript

點選方格可以實現下子的效果，不過這不是一個遊戲，我們並不能真正玩。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow: hidden;
}
table {
  width: 700px;
  height: 700px;
  margin: 6% auto;
  border-collapse: collapse;
  background: #EEE9E9;
  box-shadow: 0px 0px 5px #000000;
}
td {
  width: 69px;
  height: 69px;
  border: 1px solid red;
}
.div2 {
  width: 100%;
  height: 100%;
  background: #000000;
  border-radius: 50%;
  box-shadow: 0px 0px 20px #888888;
}
.div3 {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 10px #888888;
}
</style>
<script>
window.onload = function() {
  var tdEle = document.querySelectorAll('tr td')
  var aa = false
  for (var index = 0; index < tdEle.length; index++) {
    tdEle[index].onclick = function () {
      if (aa == false) {
        if (this.className == '') {
          qipan('div2')
          this.className = 'fff000'
          this.appendChild(divE)
          aa = true
        }
      } else {
        if (this.className == '') {
          qipan('div3')
          this.className = 'red'
          this.appendChild(divE)
          aa = false
        }
      }
    }
  }
  function qipan(classEle) {
    divE = document.createElement('div')
    divE.className = classEle
  }
}
</script>
</head>
<body>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
</html>

相關文章