js实现双人五子棋小游戏
程序员文章站
2022-06-25 12:55:28
本文实例为大家分享了js实现双人五子棋小游戏的具体代码，供大家参考，具体内容如下这是自己自学js的时候，在网上找的js源码，由于是自学，花了数小时才把这个源码大致弄明白。大致算法 自定义棋盘规格，直接...
本文实例为大家分享了js实现双人五子棋小游戏的具体代码，供大家参考，具体内容如下
这是自己自学js的时候，在网上找的js源码，由于是自学，花了数小时才把这个源码大致弄明白。
大致算法 自定义棋盘规格，直接在棋盘建新div就可以，长度宽度用计算就可以了。下棋，在div里再建class，这里要给每个class标一个site值，由site值写出该棋子竖直方向和横向的坐标，由坐标可以写出棋子胜利的条件。而棋子的黑白走是用标识符，偶的标识符则是白棋子的class。奇的标识符则是黑棋子的class。
ps 我遇到的一些问题在代码中有注释
<!doctype html>
<html>
<head>
<title>五子棋</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<style>
/* 简单初始化 */
html,body,section,div,p{
padding: 0;
margin: 0;
font-size: 12px;
}
body{
width: 100%;
height: 100%;
position: fixed;
}
/* 棋盘 */
#chessboard{
width: 90vmin;
min-height: 89vmin;
margin: calc(50vh - 46vmin + 2px) auto;
background: #f5ca69;
border: 2px solid #000;
border-radius: 7px;
-webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5) ;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5) ;
}
/* after伪元素,载入chessboard后发生 */
#chessboard::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#chessboard div{
width: calc(9vmin - 2px);
height: calc(9vmin - 2px);
float: left;
border: 1px solid #000;
border-radius: 5px;
}
#chessboard div p{
width: 97%;
height: 97%;
margin: 1.5% auto;
border-radius: 100%;
}
/* 白棋子 */
.white{
background: -webkit-radial-gradient(at 35% 35%,#fff,#ccc,#fff);
background: -o-radial-gradient(at 35% 35%,#fff,#ccc,#fff);
background: -moz-radial-gradient(at 35% 35%,#fff,#ccc,#fff);
background: radial-gradient(at 35% 35%,#fff,#ccc,#fff);
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
/* 黑棋子 */
.black{
background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
background: -o-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
background: -moz-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
background: radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
#mask{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
}
.conbox{
display: block;
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
border-radius: 3px;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
.conbox h1{
width: 100%;
float: left;
margin: 0;
line-height: 45px;
text-align: center;
}
.conbox p{
display: block;
width: 40px;
height: 40px;
float: left;
margin-top: 40px;
font-size: 32px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.conbox p:nth-child(2){
margin-left: 60px;
}
.conbox p:nth-child(3){
width: 100px;
font-size: 20px;
cursor: initial;
}
.conbox button{
width: 80px;
float: left;
margin-top: 30px;
margin-left: 110px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 28px;
background-color: #f60;
border: none;
outline: none;
}
.clear::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.border,
.bordertop,
.borderbot
{
position: relative;
}
.border:after{
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
}
.borderbot:after{
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaley(0.5);
transform: scaley(0.5);
}
.bordertop:before{
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaley(0.5);
transform: scaley(0.5);
}
</style>
<script>
// onload为浏览器对象中的事件,页面载入时触发
window.function(){
var grid;
var chessarr = [];
var timer = 0;
var linenum = parseint(gridnum.innerhtml);
// 获取元素
var box = document.getelementbyid('chessboard');
var chessbox = box.getelementsbytagname('div');
var submitbtn = document.getelementbyid('submitbtn');
// 减去规格
subbtn.onclick = function(){
if ( linenum > 8 ) {
linenum--;
}
// innerhtml为gridnum的全元素
gridnum.innerhtml = linenum;
}
// 加上规格
addbtn.onclick = function(){
if ( linenum < 14 ) {
linenum++;
}
gridnum.innerhtml = linenum;
}
//棋盘初始化
submitbtn.onclick = function(){
var chessmaxnum = linenum * linenum;
var chesswh = 90/linenum;
for (var i = 0; i < chessmaxnum; i++) {
// 设置棋盘里小格子div元素
grid = document.createelement('div');
grid.style.width = 'calc(' + chesswh + 'vmin - 2px)';
grid.style.height = 'calc(' + chesswh + 'vmin - 2px)';
grid.id=i;
box.appendchild(grid);
chessarr[i] = 0;
grid.onclick = function(x){
// target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
var index = x.target.id||x.target.parentnode.id;
return playchess(index);
};
};
mask.style.display = 'none';
}
//棋子对象
function chess(){
this.color = 'white';
this.site = 0;
// 创建一个class
this.chessdom = function(){
// 创造新节点
var dom = document.createelement('p');
// 将这个名字给class
dom.setattribute('class',this.color);
return dom;
}
this.ligature = function(arr){
// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
//是就返回这个site
// 给白棋一个标识号,方便在下列judge中判断
var whitechess = arr.map(function(s){
// parseint() 函数可解析一个字符串，并返回一个整数。
return (s.color == 'white')?parseint(s.site):0;
});
var blackchess = arr.map(function(s){
return (s.color == 'black')?parseint(s.site):0;
});
judge(whitechess,'白子');
judge(blackchess,'黑子');
function judge(che,color){
// length 属性可返回字符串中的字符数目
for (var i = 0;i < che.length;i++) {
// 棋子横坐标
var x = che[i]%linenum;
// 棋子竖坐标
var y = parseint(che[i]/linenum);
// \这样的倾斜判断
if ( x <= linenum - 5 && y <= linenum - 5 && che[i] != 0 ) {
if( che[i+1*linenum+1] != 0 && che[i+2*linenum+2] != 0 && che[i+3*linenum+3] != 0 && che[i+4*linenum+4] != 0 ){
alert(color+'获胜!');
// 胜利后刷新页面
location.replace(location);
return true;
}
};
// |这样的竖直判断
if ( y <= linenum - 5 && che[i] != 0 ) {
if( che[i+1*linenum] != 0 && che[i+2*linenum] != 0 && che[i+3*linenum] != 0 && che[i+4*linenum] != 0 ){
alert(color+'获胜!');
// location 对象方法replace() 用新的文档替换当前文档
location.replace(location);
return true;
}
};
// /这样的倾斜判断
if ( x >= 4 && y <= linenum - 5 && che[i] != 0 ) {
if( che[i+1*linenum-1] != 0 && che[i+2*linenum-2] != 0 && che[i+3*linenum-3] != 0 && che[i+4*linenum-4] != 0 ){
alert(color+'获胜!');
location.replace(location);
return true;
}
};
// ——这样的平行判断
if ( x <= linenum - 5 && che[i] != 0 ) {
if( che[i+1] != 0 && che[i+2] != 0 && che[i+3] != 0 && che[i+4] != 0 ){
alert(color+'获胜!');
location.replace(location);
return true;
}
};
};
}
}
}
function playchess(i){
if(chessarr[i] == 0){
// 标识符
timer++;
// 用new创建新的对象
chessarr[i] = new chess();
timer%2==0?chessarr[i].color = 'black':chessarr[i].color = 'white';
// 给每个小格子设置一个site值
chessarr[i].site = i;
// appendchild() 方法向节点添加最后一个子节点
// 意思就是在小格子div里加上棋子的class
chessbox[i].appendchild(chessarr[i].chessdom());
// 给这个class的棋子赋予site值
chessarr[i].ligature(chessarr);
}else{
alert('此处有子!');
}
}
};
</script>
</head>
<body>
<section id="chessboard" class="clear">
</section>
<section id="mask">
<aside class="conbox">
<h1 class="borderbot">小依，选择棋盘规格哇。</h1>
<p id="subbtn" class="border">-</p>
<p id="gridnum" value="10" class="bordertop borderbot">10</p>
<p id="addbtn" class="border">+</p>
<button id="submitbtn">确认</button>
</aside>
</section>
<div style="text-align:center;">
</div>
</body>
</html>
更多有趣的经典小游戏实现专题，分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。