windows8五子棋游戏

最新推荐文章于 2024-10-10 14:30:54 发布

rabbit-dog

最新推荐文章于 2024-10-10 14:30:54 发布

阅读量613

点赞数

分类专栏： js 文章标签： Javascript

本文链接：https://blog.csdn.net/yafei450225664/article/details/8635037

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>五子棋</title>

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <style>
*{
margin:0;
padding:0;
}
#main{
width:502px;
height:502px;
border-top:#555 solid 1px;
border-right:#555 solid 1px;
background-color:#CCC;
margin:0px auto;
position:absolute;
z-index:1;
}
#main .div{
width:19px;
height:19px;
border-bottom:#555 solid 1px;
border-left:#555 solid 1px;
float:left;
display:inline;
line-height:19px;
}
#main2{
position:absolute;
z-index:2;
padding:10px;
width:480px;
height:480px;
}
#main2 span{
width:20px;
height:20px;
display:block;
float:left;
cursor:pointer;
       line-height:20px;
font-size:1px;
}
#main2 span.wb{
background:url(/jscss/demoimg/200901/jMpx.gif) no-repeat;
}
#main2 span.bb{
background:url(/jscss/demoimg/200901/lq.gif) no-repeat;
}
#aa{
text-align:center;
height:36px;
line-height:36px;
font-size:17px;
}
</style>
<script type="text/javascript">
    function $(o) {
        return document.getElementById(o);
    }
    var flag = 0;
    var black = "黑方"
    var witer = "白方"
    function played() {
        var piece = $("main2").getElementsByTagName("span");
        for (var i = 0; i < piece.length; i++) {
            piece[i].onclick = function () {
                showPieces(this);
                return false
            }
        }
    }
    function showPieces(t) {
        if (t.className != "wb" && t.className != "bb") {
            if (flag == 0) {
                t.className = "wb"
                flag = 1;
                panduan(witer)
            } else {
                t.className = "bb"
                flag = 0;
                panduan(black)
            }
        }
    }
    function panduan(te) {
        $("aa").innerHTML = "当前执棋:" + te
    }
</script>
</head>
<body>
<div id="aa"></div>
<div id="main"></div>
<div id="main2"></div>
<script type="text/javascript">
    var _div = []
    var _span = []
    for (i = 0; i < 625; i++) {
        _div[i] = document.createElement("div");
        _div[i].className = "div"
        $("main").appendChild(_div[i])
    }
    for (j = 0; j < 576; j++) {
        _span[j] = document.createElement("span")
        $("main2").appendChild(_span[j])
    }
    panduan(black)
    played()
</script>
</body>
</html>