js五子棋

爱被打了一巴掌 2023-07-02 10:25 104阅读 0赞

# 效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NwaWN5Q2hpY2tlbl9fXw_size_16_color_FFFFFF_t_70]

# 1. js代码 #

let hang = 17;
    let lie = 23;
    let count; //==5游戏获胜
    let c = 0;
    let qis = new Array();
    
    function init() { 
    	$("#qipan").css({ 
    		'width': lie * 40,
    		'height': hang * 40
    	});
    	for(var i = 1; i <= hang; i++) { 
    		for(var j = 1; j <= lie; j++) { 
    			let ge = $("<div></div>");
    			ge.attr({ 
    				'x': j,
    				'y': i
    			})
    			ge.addClass("ge");
    			ge.css({ 
    				'left': j * 40,
    				'top': i * 40
    			});
    			let cvs = $("<canvas></canvas>");
    			cvs.attr({ 
    				"width": "40",
    				"height": "40"
    			});
    			//获取画布
    			let ctx = cvs[0].getContext('2d');
    			ctx.beginPath();
    			ctx.moveTo(0, 20);
    			ctx.lineTo(40, 20);
    			ctx.moveTo(20, 0);
    			ctx.lineTo(20, 40);
    			ctx.closePath();
    			//调用 写死
    			ctx.stroke();
    			ge.append(cvs);
    			$("#qipan").append(ge);
    		}
    	}
    }
    $("body").on("click", '.ge', function() { 
    	if($(this).children("span").length != 0) { 
    		return;
    	}
    	c++;
    	let $qi = $("<span></span>");
    	if(c % 2 == 0) { 
    		$qi.addClass("bai");
    	} else { 
    		$qi.addClass("hei");
    	}
    	qis.push($qi);
    	$(this).append($qi);
    	x = $(this).attr('x');
    	y = $(this).attr('y');
    	win(x, y);
    });
    $("body").on("click", ".huiqi", function() { 
    	c++;
    	qis[qis.length - 1].remove();
    	qis.pop();
    })
    $("body").on("click", ".kaishi", function() { 
    		$(".modal").hide();
    	$("#qipan").html("");init();
    	c=0;
    	localStorage.clear();
    })
    function win(x, y) { 
    	y = y - 0;
    	if(win_1(x, y) || win_2(x, y) || win_3(x, y) || win_4(x, y)) { 
    		$(".modal").slideDown();
    		localStorage.clear();
    	};
    }
    //左右
    function win_1(x, y) { 
    	count = 1;
    	var yanse = $(`.ge[x=${ x}][y=${ y}]`).children("span").attr("class"); //棋子颜色
    	var x1 = x;
    	var y1 = y;
    	while(true) { 
    		x1--;
    		var qi = $(`.ge[x=${ x1}][y=${ y1}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	var x2 = x;
    	var y2 = y;
    	while(true) { 
    		x2++;
    		var qi = $(`.ge[x=${ x2}][y=${ y2}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	if(count > 4) { 
    		return true;
    	} else { 
    		return false;
    	}
    }
    //上下
    function win_2(x, y) { 
    	count = 1;
    	var yanse = $(`.ge[x=${ x}][y=${ y}]`).children("span").attr("class"); //棋子颜色
    	var x1 = x;
    	var y1 = y;
    	while(true) { 
    		y1--;
    		var qi = $(`.ge[x=${ x1}][y=${ y1}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	var x2 = x;
    	var y2 = y;
    	while(true) { 
    		y2++;
    		var qi = $(`.ge[x=${ x2}][y=${ y2}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	if(count > 4) { 
    		return true;
    	} else { 
    		return false;
    	}
    }
    
    function win_3(x, y) { 
    	count = 1;
    	var yanse = $(`.ge[x=${ x}][y=${ y}]`).children("span").attr("class"); //棋子颜色
    	var x1 = x;
    	var y1 = y;
    	while(true) { 
    		y1++;
    		x1++;
    		var qi = $(`.ge[x=${ x1}][y=${ y1}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	var x2 = x;
    	var y2 = y;
    	while(true) { 
    		y2--;
    		x2--;
    		var qi = $(`.ge[x=${ x2}][y=${ y2}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	if(count > 4) { 
    		return true;
    	} else { 
    		return false;
    	}
    }
    
    function win_4(x, y) { 
    	count = 1;
    	var yanse = $(`.ge[x=${ x}][y=${ y}]`).children("span").attr("class"); //棋子颜色
    	var x1 = x;
    	var y1 = y;
    	while(true) { 
    		y1++;
    		x1--;
    		var qi = $(`.ge[x=${ x1}][y=${ y1}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	var x2 = x;
    	var y2 = y;
    	while(true) { 
    		y2--;
    		x2++;
    		var qi = $(`.ge[x=${ x2}][y=${ y2}]`).children("span").attr("class");
    		if(qi == yanse) { 
    			count++;
    		} else { 
    			break;
    		}
    	}
    	if(count > 4) { 
    		return true;
    	} else { 
    		return false;
    	}
    }
    window.onbeforeunload = function() { 
    		localStorage.setItem("name", $("#qipan").html());
    }
    window.onload = function() { 
    	init();
    	let daima = localStorage.getItem("name");
    	
    	if(daima != null && daima != "") { 
    		$("#qipan").append(daima);
    	}
    };

# 2.css+html代码 #

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css"> html, body { width: 100%; height: 100%; } * { margin: 0px; padding: 0px; } .body { width: 100%; height: 100%; background: #64eced40; } #qipan { position: relative; margin: 0 auto; } .ge { width: 40px; height: 40px; position: absolute; } .bai, .hei { position: absolute; left: 2px; top: 2px; display: inline-block; box-shadow: 2px 0px 6px #000; width: 36px; height: 36px; background-color: #fff; border-radius: 100%; } .hei { background-color: #000; box-shadow: 2px 0px 6px #fff; } canvas { position: absolute; } .huiqi { width: 80px; height: 30px; background-color: #f00; border: 0px; color: #fff; position: absolute; right: 50px; top: 100px; } .kaishi { width: 80px; height: 30px; background-color: #fff; border: 0px; color: #000; position: absolute; right: 50px; top: 200px; } .modal { position: absolute; width: 60%; left: 23%; top: 40%; display: none; height: 120px; background-color: aquamarine; z-index: 999; opacity: 0.6; text-align: center; font-size: 30px; line-height: 120px; } </style>
    	</head>
    	<body>
    		
    		<form action="" enctype="" method="post">
    			
    			<input type="submit" value=""/>
    		</form>
    		
    		<form action="" enctype="multipart/form-data" method="post">
    			
    			<input type="submit" value=""/>
    		</form>
    		<div class="body">
    			
    			<div id="qipan"></div>
    			<button class="huiqi">悔棋</button>
    			<button class="kaishi">重新开始</button>
    		</div>
    		<div class="modal">
    			<h2>游戏结束!</h2>
    		</div>
    		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    	</body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NwaWN5Q2hpY2tlbl9fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200129030742797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NwaWN5Q2hpY2tlbl9fXw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

相关 js五子棋

效果展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

爱被打了一巴掌/ 2023年07月02日 10:25/ 0 赞/ 105 阅读

相关 c++五子棋

五子棋一.前言二.代码一.前言 1.可以和你的朋友来一句噢！ 2.这是用了坐标的方法，所以代码简单，适合新手二.代码 in

刺骨的言语ヽ痛彻心扉/ 2023年01月01日 07:00/ 0 赞/ 174 阅读

相关 php 设计五子棋游戏,基于js+canvas实现五子棋小游戏

![11579caf6f9db83a1b5a0d42ccbf7fef.png][] 本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下

客官°小女子只卖身不卖艺/ 2022年11月17日 11:22/ 0 赞/ 322 阅读

相关五子棋c语言代码贴吧,五子棋

该楼层疑似违规已被系统折叠隐藏此楼查看此楼 void map(int array\[NUM\]\[NUM\],int x,int y,int arrx\[\],int ar

叁歲伎倆/ 2022年10月15日 11:50/ 0 赞/ 203 阅读

相关控制台游戏五子棋

\代表黑棋，@代表白棋大致步骤： 1.绘棋盘 2.黑子或白子落子(检测落子处是否有棋子，还有棋子的位置是否合法) 3.检测落下的棋子是否构成5连(8个方向)

素颜马尾好姑娘i/ 2022年07月12日 10:45/ 0 赞/ 220 阅读

相关五子棋

建立一个主函数 public static void main(String args\[\])\{ //新建对象 FiveChess chess = new Fiv

叁歲伎倆/ 2022年06月17日 08:26/ 0 赞/ 246 阅读

相关 pygame 五子棋

import pygame WHITE = [255, 255, 255] BLACK = [0, 0, 0] layout

╰+攻爆jí腚メ/ 2022年05月29日 05:13/ 0 赞/ 250 阅读

相关 C语言——五子棋

一个C语言版的五子棋游戏，亲测有效！ include <stdio.h> include <string.h> //定义一个宏，表示棋盘大小

Bertha 。/ 2022年05月09日 12:08/ 0 赞/ 248 阅读

相关五子棋（人工智能）

五子棋人人对战人机对战 \ include<stdio.h> \ include<string.h> //字符数组的函数定义的头文件 \ include<std

￡神魔★判官ぃ/ 2022年04月22日 13:08/ 0 赞/ 388 阅读

相关联网版五子棋

下面的代码实现了一个非常简单的联网五子棋程序，写给学生的一个例子，很多功能都还没实现，用的也是民间规则，姑且一看吧！棋盘类： package com.accp;

忘是亡心i/ 2021年09月22日 03:22/ 0 赞/ 495 阅读