html自编走六车小游戏

作者: zhongcx | 来源:发表于2020-05-23 10:15 被阅读0次

html自编走六车小游戏
html自编变九兵小游戏
html自编造五炮小游戏
html自编落十马小游戏
194.htm
facebook instant game 发布指南-最佳实践
WSS升级为TCP的配置问题
好玩的Canvas射箭小游戏
HTML5阶段总结
the Apollo Project Album 2

游戏规则：
类似于一笔画六直线，车可以斜着走
目标：所有的背面棋子都显示车

image.png

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

游戏参考：https://zhidao.baidu.com/question/52358631.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: 558px;
            height: 558px;
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 1px;
        }
        #game{
            position: absolute;
            width: 558px;
            height: 558px;
            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 black" onclick="show(0)">车</div>
        <div id="d1" class="pieces black" onclick="show(1)">车</div>
        <div id="d2" class="pieces black" onclick="show(2)">车</div>
        <div id="d3" class="pieces black" onclick="show(3)">车</div>
        <div id="d4" class="pieces black" onclick="show(4)">车</div>
        <div id="d5" class="pieces black" onclick="show(5)">车</div>
        <div id="d6" class="pieces black" onclick="show(6)">车</div>
        <div id="d7" class="pieces black" onclick="show(7)">车</div>
        <div id="d8" class="pieces black" onclick="show(8)">车</div> 
        <div id="d9" class="pieces black" onclick="show(9)">车</div> 
        <div id="d10" class="pieces black" onclick="show(10)">车</div> 
        <div id="d11" class="pieces black" onclick="show(11)">车</div> 
        <div id="d12" class="pieces black" onclick="show(12)">车</div> 
        <div id="d13" class="pieces black" onclick="show(13)">车</div> 
        <div id="d14" class="pieces black" onclick="show(14)">车</div> 
        <div id="d15" class="pieces black" onclick="show(15)">车</div> 
        <div id="d16" class="pieces black" onclick="show(16)">车</div> 
        <div id="d17" class="pieces black" onclick="show(17)">车</div> 
        <div id="d18" class="pieces black" onclick="show(18)">车</div> 
        <div id="d19" class="pieces black" onclick="show(19)">车</div> 
        <div id="d20" class="pieces black" onclick="show(20)">车</div> 
        <div id="d21" class="pieces black" onclick="show(21)">车</div> 
        <div id="d22" class="pieces black" onclick="show(22)">车</div> 
        <div id="d23" class="pieces black" onclick="show(23)">车</div> 
        <div id="d24" class="pieces black" onclick="show(24)">车</div> 
         
    </div>  
</div>
</body>
<html>
<script type="text/javascript"> 

    //棋子列表，-2:无棋，-1:无字，0：红车，1:黑车
    var values=[
        [-1,-1,-1,-1,-1],
        [-1,-1,-1,-1,-1],
        [-1,-1,-1,-1,-1],
        [-1,-1,-1,-1,-1],
        [-1,-1,-1,-1,-1],
    ];
    
    //旧的红车位置
    var old_i = -1;
    var old_j = -1;
    var countEnd = 0;
       
    //显示棋子，index:位置
    function show(index){ 
    
        if(countEnd==7){//第七次结束游戏（算上一开始的落子，一共画了6条直线）
            return;
        }
    
        var i = parseInt(index/5);
        var j = index%5;  
        
        if(old_i==i && old_j == j){//不符合落子条件 当前点与旧的红车位置相同
            return;
        }
        
        /**先改数据*/
        if(old_i==-1){//是首次落子
            
        }else{//非首次落子
            if(old_i == i ){//符合落子条件 在同一行上
                //从小到大设置黑车
                if(old_j < j){
                    for(var k = old_j ; k <= j ; k++){
                        values[i][k] = 1;
                    }
                }else{
                    for(var k = j ; k <= old_j  ; k++){
                        values[i][k] = 1;
                    }                   
                } 
            }else if(old_j == j){//符合落子条件 在同一列上
                //从小到大设置黑车
                if(old_i < i){
                    for(var k = old_i ; k <= i ; k++){
                        values[k][j] = 1;
                    }
                }else{
                    for(var k = i ; k <= old_i  ; k++){
                        values[k][j] = 1;
                    }                   
                } 
            }else if(old_i - i == old_j - j){//符合落子条件 在同一正对角线上               
                if(old_i < i){
                    for(var k = old_i ,f=old_j; k <= i ; k++,f++){
                        values[k][f] = 1;
                    }
                }else{
                    for(var k = i ,f=j ; k <= old_i  ; k++,f++){
                        values[k][f] = 1;
                    }                   
                }           
            }else if(Math.abs(old_i - i) == Math.abs(old_j - j)){//符合落子条件 在同一反对角线上
                if(old_i < i){
                    for(var k = old_i ,f=old_j; k <= i ; k++,f--){
                        values[k][f] = 1;
                    }
                }else{
                    for(var k = i ,f= j ; k <= old_i  ; k++,f--){
                        values[k][f] = 1;
                    }                   
                }               
            }else{//不符合落子条件 
                return;
            }
        }
        old_i = i;
        old_j = j;
        values[i][j] = 0;
         
        var countWin = 0 ;
        /**再改展示的样式*/
        for(var i = 0 ;i<25;i++){
            var index_i = parseInt(i/5)
            var index_j = i%5 
            if(values[index_i][index_j]==-2){//无棋
                document.getElementById("d"+i).setAttribute("class","pieces_none");  
                document.getElementById("d"+i).innerHTML = ' '
            }else if(values[index_i][index_j]==-1){//无字
                document.getElementById("d"+i).setAttribute("class","pieces black");  
                document.getElementById("d"+i).innerHTML = ' '
            }else if(values[index_i][index_j]==0){//红车
                document.getElementById("d"+i).setAttribute("class","pieces red"); 
                document.getElementById("d"+i).innerHTML = '车'              
            }else if(values[index_i][index_j]==1){//黑车
                document.getElementById("d"+i).setAttribute("class","pieces black");  
                document.getElementById("d"+i).innerHTML = '车'
            }
            
            if(index_i !=0 && index_j !=0 && (values[index_i][index_j]==0 || values[index_i][index_j]==1 )){
                countWin++;
            }
        }
         
        //判断游戏结束
        countEnd++;
        if(countEnd==7){//第七次结束游戏（算上一开始的落子，一共画了6条直线）
            //判断挑战成功
            if(countWin==16){
                alert('游戏结束，挑战成功。')
            }else{
                alert('游戏结束，挑战失败。还差'+(16-countWin)+'个')
            }           
        }
    }

      
    //重置函数
    function reset(){  
        values=[
            [-2,-2,-2,-2,-2],
            [-2,-1,-1,-1,-1],
            [-2,-1,-1,-1,-1],
            [-2,-1,-1,-1,-1],
            [-2,-1,-1,-1,-1],
        ];
        old_i = -1;
        old_j = -1;
        countEnd = 0 ;
        for(var i = 0 ;i< 25;i++){
            var index_i = parseInt(i/5)
            var index_j = i%5  
            if(values[index_i][index_j]==-2){//无棋
                document.getElementById("d"+i).setAttribute("class","pieces_none");  
                document.getElementById("d"+i).innerHTML = ' '
            }else if(values[index_i][index_j]==-1){//无字
                document.getElementById("d"+i).setAttribute("class","pieces black");  
                document.getElementById("d"+i).innerHTML = ' '
            }else if(values[index_i][index_j]==0){//红车
                document.getElementById("d"+i).setAttribute("class","pieces red"); 
                document.getElementById("d"+i).innerHTML = '车'              
            }else if(values[index_i][index_j]==1){//黑车
                document.getElementById("d"+i).setAttribute("class","pieces black");  
                document.getElementById("d"+i).innerHTML = '车'
            }
        }
    }
    reset();
</script>

html自编走六车小游戏
游戏规则：类似于一笔画六直线，车可以斜着走目标：所有的背面棋子都显示车游戏地址：https://7072-pro...
html自编变九兵小游戏
游戏规则：点击的位置其上下左右会跟着取反目标：全部为九个兵游戏地址：https://7072-producti...
html自编造五炮小游戏
游戏规则：红色背面棋子可以翻出红炮，红炮可以隔两个红色棋子或一个黑色棋子落下，落下后成为黑炮，黑炮不可移动。目标：...
html自编落十马小游戏
研究了一种玩法估且就叫落十马吧。落下十马就算挑战成功哈。点击下面的链接可以玩https://7072-produ...
194.htm
小球撞墙小游戏 body{ background-color: black; } ...
facebook instant game 发布指南-最佳实践
小游戏最佳实践构建小游戏时，要求使用 HTML5 语言。下面是关于开发小游戏的一系列最佳实践：加载时间与性能 ...
WSS升级为TCP的配置问题
背景微信小游戏、Facebook小游戏等基于HTML5的网页游戏采用的是WebSocket协议，而现在...
好玩的Canvas射箭小游戏
Canvas射箭小游戏 body{ margin:0; background:#2...
HTML5阶段总结
对HTML5的第一印象是害怕，由于之前并没有接触过代码，在Java小游戏阶段曾因为代码问题掉了好多头发，现在走...
the Apollo Project Album 2
来源 http://www.apolloarchive.com/apollo_archive.html小游戏htt...