原生js简单实现五指棋

无聊之时可以玩玩，浏览器直接打开，简单又不失趣味！
如图:

上代码：

<div id="bigBackground"><!-- 棋盘水平线背景板 --><div id="background1"></div>
</div><div id="bigBackground">
<!-- 棋盘竖直线背景板 --><div id="background2"></div>
</div><div id="bigBackground">
<!-- 棋子背景板 --><div id="black"><div id="blackContent"><div id="blackContentLog"></div>黑方</div><div id="blackMessage"></div></div><div id="background3"></div><div id="blue"><div id="blueContent"><div id="blueContentLog"></div>白方</div><div id="blueMessage"></div></div>
</div><script>//游戏是否开始var started = false;//游戏是否结束var isOver = false;const message = '请落子<div>！</div>';const messageWin = '恭喜<div>，</div>你赢了<div>！</div>';document.getElementById('blackMessage').innerHTML = message;//上次出棋方var lastMover = null; // 0代表黑方，1代表蓝方var background1 = document.getElementById('background1');var content = '';//绘制棋盘竖直线for (i = 0; i < 32; i++) {content += '<div class="horizon"></div>';}background1.innerHTML = content;var background2 = document.getElementById('background2');content = '';//绘制棋盘竖直线for (i = 0; i < 32; i++) {content += '<div class="vertical"></div>';}background2.innerHTML = content;var background3 = document.getElementById('background3');content = '';//绘制棋盘竖直线for (i = 0; i < 1024; i++) {content += '<div id="' + Math.ceil((i+1)/32) + ',' + ((i+1)%32==0?32:(i+1)%32) + '" class="cell" onClick="moves()"></div>';}background3.innerHTML = content;//绑定落子事件for (i = 0; i < 1024; i++) {let id = Math.ceil((i+1)/32) + ',' + ((i+1)%32==0?32:(i+1)%32);let cell = document.getElementById(id);cell.onclick = function(){moves(id);}}//落子事件function moves (id) {if (isOver) {return;}let cell = document.getElementById(id);if (!started) {cell.style.cssText='background-color: black;'started = true;lastMover = 0;document.getElementById('blackMessage').innerHTML = '';document.getElementById('blueMessage').innerHTML = message;return;}if (lastMover == 0) {document.getElementById('blackMessage').innerHTML = message;document.getElementById('blueMessage').innerHTML = '';} else if (lastMover == 1) {document.getElementById('blackMessage').innerHTML = '';document.getElementById('blueMessage').innerHTML = message;}if (cell.style.cssText != "") {return;}if (lastMover == 0) {cell.style.cssText='background-color: white;'lastMover = 1;} else {cell.style.cssText='background-color: black;'lastMover = 0;}var coordinate = id.split(',');checkWin(coordinate[0], coordinate[1], cell.style.cssText);}//判定输赢function checkWin (x, y, color) {x = parseInt(x);y = parseInt(y);//判断水平线(-)上是否形成五子let nearCellIds = [];let leftNear = y-4;if (leftNear <= 0) {leftNear = 1;}let rightNear = y+5;if (rightNear > 33) {rightNear = 33;} for (i = leftNear; i < rightNear; i++) {nearCellIds.push(x + ',' + i);}if (checkLineFiveCell(nearCellIds, color)) {return;};//判断竖直线(|)上是否形成五子nearCellIds = [];let topNear = x-4;if (topNear <= 0) {topNear = 1;}let bottomNear= x+5if (bottomNear > 33) {bottomNear = 33}for (i = topNear; i < bottomNear; i++) {nearCellIds.push(i + ',' + y);}if (checkLineFiveCell(nearCellIds, color)) {return;};//判断右斜线(\)上是否形成五子nearCellIds = [];for (i = topNear; i < bottomNear; i++) {if (y-(x-i) <= 0) {continue;}if (y-(x-i) > 32) {break;}nearCellIds.push(i + ',' + (y-(x-i)));}if (checkLineFiveCell(nearCellIds, color)) {return;};//判断左斜线(/)上是否形成五子nearCellIds = [];for (i = topNear; i < bottomNear; i++) {if (y+(x-i) <= 0) {break;}if (y+(x-i) > 32) {continue;}nearCellIds.push(i + ',' + (y+(x-i)));}checkLineFiveCell(nearCellIds, color);}//判断直线上是否形成连续同色五子function checkLineFiveCell (lineCellIds, color) {let seriesColorIds = [];for (let id of lineCellIds) {let nearColor = document.getElementById(id).style.cssText;if (nearColor == color) {seriesColorIds.push(id);if (seriesColorIds.length == 5) {changLineFiveCellToWinColor(seriesColorIds);let cell = null;if ('background-color: black;' == color) {cell = document.getElementById('blackMessage');document.getElementById('blackContent').style.cssText='color: gold;';document.getElementById('blackContentLog').style.cssText='background-color: gold;';document.getElementById('blueMessage').innerHTML = '';} else {cell = document.getElementById('blueMessage');document.getElementById('blueContent').style.cssText='color: gold;';document.getElementById('blueContentLog').style.cssText='background-color: gold;';document.getElementById('blackMessage').innerHTML = '';}cell.innerHTML = messageWin;cell.style.cssText='color: gold;';isOver = true;return true;}} else {seriesColorIds = [];}}return false;}//改变连续同色五子为胜利色function changLineFiveCellToWinColor (lineCellIds) {for (let id of lineCellIds) {let cell = document.getElementById(id);cell.style.cssText='background-color: gold;'}}//console.log(cell.getAttribute('id'));
</script><style>
body{background-color: grey;
}
#bigBackground{position: absolute;width: 99%;height: 694px;
}
#background1{width: 692px;height: 692px;background-color: grey; //#f9f9fa;margin: auto;border: solid 3px;
}.horizon{width: 693px;height: 20px;border-bottom: solid 1px;margin-left: -1px;
}#background2{width: 692px;height: 692px;margin: auto;
}.vertical{width: 20px;height: 694px;border-right: solid 1px;display: inline-block;margin-top: 1px;
}#background3{width: 672px;height: 672px;margin: auto;margin-top: 10px;
}.cell{width: 20px;height: 20px;display: inline-block;margin-left: 1px;margin-top: 1px;border-radius: 10px;
}
#black{float: left;height: 694px;width: 400px;background-color: #FFFFFF;
}
#blue{float: right;height: 694px;width: 400px;position: relative;top: -681px;background-color: black;
}
#blackContent{margin-top: 10px;width: 135px;margin: auto;height: 50px;font-size: 40px;
}
#blackContentLog{width: 40px;height: 40px;display: inline-block;background-color: black;padding-top: -8px;position: relative;top: 6px;border-radius: 20px;margin-right: 10px;
}
#blueContent{margin-top: 10px;width: 135px;margin: auto;height: 50px;font-size: 40px;color: #FFFFFF;
}
#blueContentLog{width: 40px;height: 40px;display: inline-block;background-color: #FFFFFF;padding-top: -8px;position: relative;top: 6px;border-radius: 20px;margin-right: 10px;
}
#blackMessage, #blueMessage{margin: auto;display: block;margin-top: 50px;width: 25px;font-size: 20px;
}
#blueMessage{color: #FFFFFF;
}
</style>

原生js简单实现五指棋相关推荐

H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...
原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
原生JS 简单购物车网页
以下是代码: HTML <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
购物车原生js简单明了
页面如下图所示实现添加购物车,数量添加.减少,物品删除,计算金额的功能,麻雀虽小五脏俱全.表格用的是layui框架. <!DOCTYPE html> <html lang=&quo ...
原生js简单实现双向数据绑定原理
根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...
原生js简单实现定时抢月饼
早上跟人聊起月饼来,突然就想起了去年阿里的抢月饼事件,顺手写下这个抢月饼脚本. window.onload = function () {//判断时间数字是否小于10并格式化function form ...
原生js简单抽奖页面
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>抽奖 ...
工作只用jquery，原生js知道就好了
前几天公众号有位小伙伴微信上问我说:听朋友说工作中全部用jquery,学好jquery,js只需要知道就好了,是这样的吗? 一听到这种的观点,我只想说:远离这样的朋友,简直误人子弟. 幸好这个公众号的 ...
原生 JS 实现飘雪效果
一.前言大家也许见过到以下场景: 1. 逢年过年或活动日,各大网站(淘宝,京东等)飘着漫天红包: 2. 下雨下雪的时候美团上的外卖地图上会有飘雨飘雪的景象: 3. 手机里的天气背景有电闪雷鸣的效果: ...

原生js简单实现五指棋

原生js简单实现五指棋

原生js简单实现五指棋相关推荐

最新文章

热门文章