html自编变九兵小游戏

作者: zhongcx | 来源:发表于2020-05-22 16:21 被阅读0次

html自编变九兵小游戏
html自编造五炮小游戏
html自编走六车小游戏
html自编落十马小游戏
一文搞懂变分自编码器(VAE, CVAE)
CS20si 第10课: 变分自编码器(VAE)
194.htm
facebook instant game 发布指南-最佳实践
WSS升级为TCP的配置问题
好玩的Canvas射箭小游戏

image.png

游戏规则：
点击的位置其上下左右会跟着取反
目标：全部为九个兵

游戏地址：https://7072-production-54a8q-1302064826.tcb.qcloud.la/1590135012172.html

源码：

<!DOCTYPE html> 
<head>
    <meta charset="UTF-8">
    <title>变九兵游戏</title>
    <style type="text/css">
        .pieces_none{
            width:75px;
            height:75px;
            border-radius:50px;
            border:rgb(78,56,23) double 8px;
            background-color:rgb(192,149,106);
            margin:auto;text-align:center;
            font:65px "楷体";
            line-height:75px;text-shadow:0px 0px 2px white;
            box-shadow:3px 3px 2px black;
            float:left;
            margin:10px;
            opacity:0;
        }
        .pieces{
            width:75px;
            height:75px;
            border-radius:50px;
            border:rgb(78,56,23) double 8px;
            background-color:rgb(192,149,106);
            margin:auto;text-align:center;
            font:65px "楷体";
            line-height:75px;text-shadow:0px 0px 2px white;
            box-shadow:3px 3px 2px black;
            float:left;
            margin:10px;
        }
        .red{color:rgb(144,11,11);border-color:rgb(144,11,11)}
        .black{color:rgb(78,56,23)} 
        *{
            padding: 0;
            margin: 0;
            border: 0;
        }
        body {
            width: 100%;
            height: 100%;
        }
        body{
            width:100%;
            height: 100%;
            background: url(picture/timg.jpg) no-repeat;
        }
        #up{
            font-size: 25px;
            font-family: 幼圆;
            color: darkgray;
        }
        #container{
            position: relative;
            width: 335px;
            height: 335px;
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 1px;
        }
        #game{
            position: absolute;
            width: 335px;
            height: 335px;
            border-radius: 5px;
            display: inline-block;
            /*background-color: #ffe171;*/
            box-shadow: 0 0 10px #ffe171;
            
            margin-top:10px;
            margin-bottom:10px; 
            background:#eee;
            background-image:linear-gradient(45deg,#ccc 25%,transparent 0),
            linear-gradient(45deg,transparent 75%,#ccc 0),
            linear-gradient(45deg,#ccc 25%,transparent 0),
            linear-gradient(45deg,transparent 75%,#ccc 0);
            background-size:225px 225px;
            background-position: 0 0,112.5px 112.5px,112.5px 112.5px,225px 225px; 
        }
        
        #p{
            height: 25px;
            font-size: 20px;
            color: #222;
            margin-top: 10px;
        }
        #start{
            display: inline-block;
            font-size: 28px;
            width: 100px;
            height: 28px;
            background-color: #20a6fa;
            color: #ffe171;
            text-shadow: 1px 1px 2px #ffe171;
            border-radius: 5px;
            box-shadow: 2px 2px 5px #4c98f5;
            text-align: center;
            cursor: pointer;
        }
        #reset{
            display: inline-block;
            font-size: 28px;
            width: 100px;
            height: 40px;
            background-color: #20a6fa;
            color: #ffe171;
            text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/
            border-radius: 5px;/*圆角属性*/
            box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/
            text-align: center;/*文字居中*/
            cursor: pointer;
        } 
    </style>

</head>
<body>

<div id="up">  
    <p>游戏规则：</p> 
    <p>点击的位置 其上下左右会跟着取反</p>
    <p>目标：全部为九个兵</p> 
</div>
<rowspan id="reset" onclick="reset()">重来</rowspan>
<div id="container"> 
    <div id="game">
        <!--游戏区，也就是大DIV方块-->
        <div id="d0" class="pieces red" onclick="show(0)">兵</div>
        <div id="d1" class="pieces black" onclick="show(1)">卒</div>
        <div id="d2" class="pieces red" onclick="show(2)">兵</div>
        <div id="d3" class="pieces black" onclick="show(3)">卒</div>
        <div id="d4" class="pieces red" onclick="show(4)">兵</div>
        <div id="d5" class="pieces black" onclick="show(5)">卒</div>
        <div id="d6" class="pieces red" onclick="show(6)">兵</div>
        <div id="d7" class="pieces black" onclick="show(7)">卒</div>
        <div id="d8" class="pieces red" onclick="show(8)">兵</div> 
         
    </div>  
</div>
</body>
<html>
<script type="text/javascript"> 

    //棋子列表，-1:卒，1:兵
    var values=[
        [1,-1,1],
        [-1,1,-1],
        [1,-1,1],
    ];
       
    //显示棋子，index:位置
    function show(index){ 
        var i = parseInt(index/3);
        var j = index%3;  
        
        //当前位置要改变
        values[i][j]= -values[i][j];
        if(j-1>=0){//左
            values[i][j-1]= -values[i][j-1];
        }
        if(j+1<3){//右
            values[i][j+1]= -values[i][j+1];
        }
        if(i-1>=0){//上
            values[i-1][j]= -values[i-1][j];
        }
        if(i+1<3){//下
            values[i+1][j]= -values[i+1][j];
        }
         
        var countEnd = 0 ;//统计游戏结束
        for(var i = 0 ;i<9;i++){
            var index_i = parseInt(i/3)
            var index_j = i%3 
            if(values[index_i][index_j]==1){//兵
                countEnd++;
                document.getElementById("d"+i).setAttribute("class","pieces red");  
                document.getElementById("d"+i).innerHTML = '兵'
            }else{//卒
                document.getElementById("d"+i).setAttribute("class","pieces black"); 
                document.getElementById("d"+i).innerHTML = '卒'              
            } 
        }
         
             
        //判断是到了9个兵了 
        if(countEnd==9){
            alert('挑战成功')
        }
    }

      
    //重置函数
    function reset(){ 
        values=[
            [-1,1,-1],
            [1,-1,1],
            [-1,1,-1],
        ]; 
        for(var i = 0 ;i<9;i++){
            var index_i = parseInt(i/3)
            var index_j = i%3 
            if(values[index_i][index_j]==1){//兵 
                document.getElementById("d"+i).setAttribute("class","pieces red");  
                document.getElementById("d"+i).innerHTML = '兵'
            }else{//卒
                document.getElementById("d"+i).setAttribute("class","pieces black"); 
                document.getElementById("d"+i).innerHTML = '卒'              
            } 
        }
    }
    reset();
</script>