javascript
JavaScript id_JavaScript实现五子棋小游戏_javascript技巧
?更新時間：2020年10月26日 11:39:33 ? 作者：布伽思索 ?
這篇文章主要為大家詳細介紹了JavaScript實現五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現五子棋小游戲的具體代碼，供大家參考，具體內容如下
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,);}.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,);}.hq{width: 600px;height: 600px;margin: 0 auto;}</style><script type="text/javascript" src="js/" ></script></head> <body><div class="main"><div class="qipan"></div><div class="hq"><button>悔棋</button></div> </div></body> </html>JavaSrcipt
window.onload = function(){var busz = new Array();//div單擊事件var ansj = function () {const x = ("col");const y = ("row"); // (x, y, nowPlayer)if (nowPlayer) {qjck[("row")][("col")] = 1;("col-actionA");nowPlayer = !nowPlayer;} else {qjck[("row")][("col")] = 2;("col-actionB");nowPlayer = !nowPlayer;}(this);var js = pdsl(y,x);if(js){setTimeout(function(){alert("游戲結束");(); //刷新瀏覽器},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; ("上"+zy);if(qjck[x-t][y]==qjck[x][y] && qjck[x-t][y]!=0)sx++;elsebreak;}//下for(t=1;t<=5;t++){if(Number(x)+t >= 10)break;("下"+zy);if(qjck[Number(x)+t][y]==qjck[Number(x)][y] && qjck[Number(x)+t][y]!=0)sx++;elsebreak;}//左for(t=1;t<=5;t++){if(y-t < 0)break; ("左"+zy);if(qjck[x][y-t]==qjck[x][y] && qjck[x][y-t]!=0)zy++;elsebreak;}//右for(t=1;t<=5;t++){if(Number(y)+t >= 10)break;("右"+zy);if(qjck[x][Number(y)+t]==qjck[x][y] && qjck[x][Number(y)+t]!=0)zy++;elsebreak;}//上左for(t=1;t<=5;t++){if(x-t < 0)break; ("上左"+zy);if(qjck[x-t][y-t]==qjck[x][y] && qjck[x-t][y-t]!=0)zs++;elsebreak;} //下右for(t=1;t<=5;t++){if(Number(x)+t >= 10 || Number(y)+t >= 10)break; ("下右"+zy);if(qjck[Number(x)+t][Number(y)+t]==qjck[x][y] && qjck[Number(x)+t][Number(y)+t]!=0)zs++;elsebreak;}//上右for(t=1;t<=5;t++){if(x-t < 0 || Number(y)+t >= 10)break; ("上右"+zy);if(qjck[x-t][Number(y)+t]==qjck[x][y] && qjck[x-t][Number(y)+t]!=0)ys++;elsebreak;} //下左for(t=1;t<=5;t++){if(Number(x)+t >= 10 || y-t < 0)break; ("下右"+zy);if(qjck[Number(x)+t][y-t]==qjck[x][y] && qjck[Number(x)+t][y-t]!=0)ys++;elsebreak;}(sx + " " + zy + " " + zs + " " + ys);if(sx == 5 || zy==5 || zs==5 || ys==5)return true;elsereturn false;}var nowPlayer = 0;//棋盤數組var qjck = Array();//divvar piece = ("div");piece.id = "piece";//得到divvar qipan = ("qipan");//生成棋盤for (let r = 0; r < 15; r++) {let newrow = ("div");newrow.id = "row" + r;("row")let arrCol = Array()(arrCol)for (let c = 0; c < 15; c++) {(0)let newcol = ("div");newcol.id = "col" + c;("col");("row", r);("col", c)(newcol)newcol.onclick = ansj;}// (newrow)(newrow)}//悔棋var hq = ("hq");hq.onclick = function(){if(busz.length <= 0)return;var divt = ();divt.onclick = ansj;("col-actionA");("col-actionB");qjck[("row")][("col")] = 0;nowPlayer = !nowPlayer;// (qjck);(divt);}}更多有趣的經典小游戲實現專題，分享給大家：
C++經典小游戲匯總
python經典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經典游戲 玩不停
javascript經典小游戲匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
文件上傳插件SWFUpload的使用指南
本文主要介紹了文件上傳插件SWFUpload使用指南,SWFUpload是一個flash和js相結合而成的文件上傳插件，其功能非常強大。需要的朋友可以參考下
2016-11-11淺談layui 表單元素的選中問題
今天小編就為大家分享一篇淺談layui 表單元素的選中問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10js實現圖片從左往右漸變切換效果的方法
這篇文章主要介紹了js實現圖片從左往右漸變切換效果的方法,是比較典型的圖片漸變切換效果特效,非常具有實用價值,需要的朋友可以參考下
2015-02-02js實現自動播放勻速輪播圖
這篇文章主要介紹了js實現自動播放勻速輪播圖，帶勻速運動函數封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02JS中的eval 為什么加括號
JS中的eval 為什么加括號呢？相信很多朋友都不是很清楚吧，下面小編通過本教程幫助大家學習JS中的eval 為什么加括號，感興趣的朋友了解下吧
2016-04-04JavaScript模塊模式實例詳解
這篇文章主要介紹了JavaScript模塊模式,結合實例形式詳細分析了js模塊模式的相關概念、功能、擴展等操作技巧,需要的朋友可以參考下
2017-10-10ES6新數據結構Map功能與用法示例
這篇文章主要介紹了ES6新數據結構Map功能與用法,結合實例形式分析了Map的功能、使用方法及相關注意事項,需要的朋友可以參考下
2017-03-03
總結
以上是生活随笔為你收集整理的JavaScript id_JavaScript实现五子棋小游戏_javascript技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nacos集群搭建
- 下一篇： gradle idea java ssm