dagger.js实现一个井字小游戏代码-html代码-BFW代码库

dagger.js实现一个井字小游戏代码

代码语言：html

所属分类：游戏

代码描述：dagger.js实现一个井字小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    [dg-cloak] {
        display: none !important;
    }
    #github-link {
        position: fixed;
        left: 20px;
        bottom: 20px;
        font-size: 20px;
    }
</style>
    <script type="module" crossorigin="anonymous" src="//repo.bfw.wiki/bfwrepo/js/dagger.release.js" defer></script>

  
  
  
<style>
body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol,
ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}
</style>



</head>

<body >
  <!-- Forked from: https://codepen.io/gaearon/pen/gWWZgR?editors=1010 -->
<script type="dagger/configs">
  {
    "script": "#sc1"
  }
</script>

<div class="game" dg-cloak +loading="loading()">
  <div class="game-board">
    <div +loading="{ squares: history[0].squares }" $watch="squares = history[stepNumber].squares">
      <div $each#index:row="[0, 1, 2]" class="board-row">
        <button class="square" $each#index:column="[0, 1, 2]" +loading="{ index: row * 3 + column }" +click="handleClick(index, $scope)">${ squares[index] || &.........完整代码请登录后点击上方下载按钮下载查看