JavaSrcipt 五子棋

最新推荐文章于 2024-04-24 13:58:19 发布

布伽思索

最新推荐文章于 2024-04-24 13:58:19 发布

阅读量274

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/DRAGON_ranhou/article/details/109277665

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
		
		body{
			padding-top: 100px;
			
		}
		
        .main {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background-color: burlywood;
        }

        .col {
            position: relative;

            width: 40px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid #000;
            border-collapse: collapse;
            /*border-radius: 20px;*/

        }

        .row {
            position: relative;
            display: flex;
            height: 40px;
            /*background-color: brown;*/
        }

        .col-action {
            background-color: blue;
        }

        .col-actionA {
            /*background-color: white;*/

        }

        .col-actionB {
            /*background-color: black;*/

        }
        
        .col-actionA::before{
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 99px;
            top:4.5px;
            left:4.5px;
            box-shadow: 0 0 2px rgba(0,0,0,0.5);

        }
        .col-actionB::before{
            content: "";
            width: 30px;
            height: 30px;
            background-color: black;
            border-radius: 99px;
            position: absolute;
            top:4.5px;
            left:4.5px;
            box-shadow: 0 0 2px rgba(128,128,128,0.5);
        }
		
		.hq{
			width: 600px;
            height: 600px;
            margin: 0 auto;
		}

    </style>
	
	<script type="text/javascript" src="js/demo03.js" ></script>
	
</head>
<body>

<div class="main">
	
    <div class="qipan" id="qipan">


    </div>
	<div class="hq"><button id="hq">悔棋</button></div>
</div>

</body>
</html>

JavaSrcipt


window.onload = function(){
	
	var busz = new Array();
	
	//div单击事件
	var ansj = function () {
            	
        const x = this.getAttribute("col");
        const y = this.getAttribute("row");
//              console.log(x, y, nowPlayer)
				
        if (nowPlayer) {
            qjck[this.getAttribute("row")][this.getAttribute("col")] = 1;
            this.classList.add("col-actionA");
            nowPlayer = !nowPlayer;
        } else {
            qjck[this.getAttribute("row")][this.getAttribute("col")] = 2;
            this.classList.add("col-actionB");
            nowPlayer = !nowPlayer;
        }
        
        busz.push(this);
        
        var js = pdsl(y,x);
				
		if(js)
		{
			setTimeout(function(){
				alert("游戏结束");
				location.reload();  //刷新浏览器
					
			},50);
					
		}
                
        this.onclick = null;
                
    }
	
	//判断是否结束
	var pdsl = function(x,y){

		var sx=1,zy=1,zs=1,ys=1,t=1;
	
		//上
		for(t=1;t<=5;t++){
			
			if(x-t < 0)
				break;		
			
			console.log("上"+zy);
			if(qjck[x-t][y]==qjck[x][y] && qjck[x-t][y]!=0)
				sx++;
			else
				break;
		}
		
		//下
		for(t=1;t<=5;t++){
			
			if(Number(x)+t >= 10)
				break;
			
			console.log("下"+zy);
			if(qjck[Number(x)+t][y]==qjck[Number(x)][y] && qjck[Number(x)+t][y]!=0)
				sx++;
			else
				break;
		}
		
		//左
		for(t=1;t<=5;t++){
			
			if(y-t < 0)
				break;		
			
			console.log("左"+zy);
			if(qjck[x][y-t]==qjck[x][y] && qjck[x][y-t]!=0)
				zy++;
			else
				break;
		}
		
		//右
		for(t=1;t<=5;t++){
			
			if(Number(y)+t >= 10)
				break;
			
			console.log("右"+zy);
			if(qjck[x][Number(y)+t]==qjck[x][y] && qjck[x][Number(y)+t]!=0)
				zy++;
			else
				break;
		}
	
		//上左
		for(t=1;t<=5;t++){
			
			if(x-t < 0)
				break;		
			
			console.log("上左"+zy);
			if(qjck[x-t][y-t]==qjck[x][y] && qjck[x-t][y-t]!=0)
				zs++;
			else
				break;
		}	
		
		//下右
		for(t=1;t<=5;t++){
			
			if(Number(x)+t >= 10 || Number(y)+t >= 10)
				break;		
			
			console.log("下右"+zy);
			if(qjck[Number(x)+t][Number(y)+t]==qjck[x][y] && qjck[Number(x)+t][Number(y)+t]!=0)
				zs++;
			else
				break;
		}
		
		//上右
		for(t=1;t<=5;t++){
			
			if(x-t < 0 || Number(y)+t >= 10)
				break;		
			
			console.log("上右"+zy);
			if(qjck[x-t][Number(y)+t]==qjck[x][y] && qjck[x-t][Number(y)+t]!=0)
				ys++;
			else
				break;
		}	
		
		//下左
		for(t=1;t<=5;t++){
			
			if(Number(x)+t >= 10 || y-t < 0)
				break;		
			
			console.log("下右"+zy);
			if(qjck[Number(x)+t][y-t]==qjck[x][y] && qjck[Number(x)+t][y-t]!=0)
				ys++;
			else
				break;
		}
		
		
		console.log(sx + " " + zy + " " + zs + " " + ys);
		
		if(sx == 5 || zy==5 || zs==5 || ys==5)
			return true;
		else
			return false;
		
	}

    var nowPlayer = 0;

	//棋盘数组
    var qjck = Array();
	
	//div
    var piece = document.createElement("div");
    piece.id = "piece";

	//得到div
    var qipan = document.getElementById("qipan");

	//生成棋盘
    for (let r = 0; r < 15; r++) {
        let newrow = document.createElement("div");
        newrow.id = "row" + r;
        newrow.classList.add("row")

        let arrCol = Array()
        qjck.push(arrCol)

        for (let c = 0; c < 15; c++) {
            arrCol.push(0)
            let newcol = document.createElement("div");

            newcol.id = "col" + c;

            newcol.classList.add("col");

            newcol.setAttribute("row", r);
            newcol.setAttribute("col", c)
            newrow.appendChild(newcol)

            newcol.onclick = ansj;

        }


        // console.log(newrow)
        qipan.appendChild(newrow)
    }
    
    //悔棋
    var hq = document.getElementById("hq");
    
    hq.onclick = function(){
    	
    	if(busz.length <= 0)
    		return;
    	
    	var divt = busz.pop();
    	divt.onclick = ansj;
    	
    	divt.classList.remove("col-actionA");
    	divt.classList.remove("col-actionB");
    	
    	qjck[divt.getAttribute("row")][divt.getAttribute("col")] = 0;
    	
    	nowPlayer = !nowPlayer;
    	
//  	console.log(qjck);
    	console.log(divt);
    }
	
	
}

布伽思索

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaSrcipt 五子棋

HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { padding: 0; margin: 0; } body{ padding-top: 100px;
复制链接

扫一扫