Gomoku JS

Developer
Anton Mudrenok
Size
8,326 Kb
Views
135,608
  1. Gomoku JS Previews
  2. Gomoku JS HTML Codes
  3. Gomoku JS CSS Codes
  4. Gomoku JS JS Codes

How do I make an gomoku js?

Gomoku 5 in a row game.. What is a gomoku js? How do you make a gomoku js? This script and codes were developed by Anton Mudrenok on 28 September 2022, Wednesday.

Gomoku JS Previews
IQ Test

Gomoku JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gomoku JS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section> <div class="controls"> <div class="newGameCtrl"> <input type="checkbox" id="check"/> <label class="newMain" for="check"> <div class="newMainText">new</div> </label> <div class="newContainer"> <div class="newPlate"> <div class="boardCellCircle" id="new-O"></div> </div> <div class="newPlate"> <div class="boardCellCross" id="new-X"></div> </div> </div> </div> <div class="sizeCtrl"> <div class="newMain"> <div class="newMainText" id="scale-Up">+</div> </div> </div> <div class="sizeCtrl"> <div class="newMain"> <div class="newMainText" id="scale-Down">-</div> </div> </div> <div class="messages"> <div class="messagesContainer"> <div class="newMainText" id="message">try to get 5 in a row!</div> </div> </div> </div> <div class="board"> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="0-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="0-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="1-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="1-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="2-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="2-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="3-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="3-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="4-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="4-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="5-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="5-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="6-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="6-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="7-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="7-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="8-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="8-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="9-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="9-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="10-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="10-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="11-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="11-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="12-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="12-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="13-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="13-14"></div> </div> </div> <div class="boardRow"> <div class="boardCol"> <div class="boardCell" id="14-0"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-1"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-2"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-3"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-4"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-5"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-6"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-7"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-8"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-9"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-10"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-11"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-12"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-13"></div> </div> <div class="boardCol"> <div class="boardCell" id="14-14"></div> </div> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Gomoku JS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:700);
body { margin: 0; padding: 0; background-color: #2c3e50; min-width: 300px;
}
section { margin-top: 10px;
}
.board { margin: auto; margin-top: 10px; width: 400px; height: 400px;
}
.boardRow { width: 100%; height: 6.66667%; border-bottom: 1px solid #2c3e50; box-sizing: border-box;
}
.boardCol { width: 6.66667%; height: 100%; background-color: #34495e; float: left; border-radius: 3px; border-left: 1px solid #2c3e50; box-sizing: border-box;
}
.boardCellCross { margin: auto; margin-top: 0.65%; width: 3px; height: 98.7%; background-color: #2ecc71; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-radius: 1.5px;
}
.boardCellCross:before { background-color: inherit; border-radius: inherit; height: inherit; width: inherit; position: absolute; content: ""; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.boardCellCircle { margin: 15%; width: 70%; height: 70%; border: 3px solid #e74c3c; border-radius: 50%; box-sizing: border-box;
}
.controls { width: 400px; height: 26.66667px; margin: auto;
}
.newGameCtrl, .sizeCtrl, .messages { position: relative; display: inline-block; height: 100%; width: 6.66667%;
}
.sizeCtrl, .messages { float: right;
}
.messages { width: 73.33333%; z-index: 0;
}
#check { display: none;
}
.newContainer { z-index: 10;
}
.newMain, .sizeScale, .messagesContainer { width: 100%; height: 100%; position: absolute; z-index: 50; display: table; text-align: center;
}
.newMain, .sizeScale { cursor: pointer; background-color: #2ecc71; border-radius: 50%;
}
.newMain:hover, .sizeScale:hover { background-color: #e74c3c;
}
.newMainText { font-family: "Roboto", sans-serif; font-size: 13px; color: #2c3e50; display: table-cell; vertical-align: middle;
}
.messagesContainer .newMainText { color: #2ecc71;
}
.messagesContainer .looseState { color: #e74c3c;
}
.newPlate { width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
}
.newPlate:hover { background-color: #34495e;
}
.newPlate:nth-of-type(1) { -webkit-transition-delay: 0s; transition-delay: 0s;
}
.newPlate:nth-of-type(2) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
#check:checked ~ .newMain + .newContainer .newPlate { opacity: 1;
}
#check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(1) { left: 100%;
}
#check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(2) { left: 200%;
}

Gomoku JS - Script Codes JS Codes

/** * browserify, combines 3 modules
*/
(function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = "MODULE_NOT_FOUND", f } var l = n[o] = { exports: {} }; t[o][0].call(l.exports, function(e) { var n = t[o][1][e]; return s(n ? n : e) }, l, l.exports, e, t, n, r) } return n[o].exports } var i = typeof require == "function" && require; for (var o = 0; o < r.length; o++) s(r[o]); return s
})({
/** * browserify ends, modules:
*/ 1: [function(require, module, exports) { module.exports = function() { var win = [ [1, 1, 1, 1, 1] ]; var unCovered4 = [ [0, 1, 1, 1, 1, 0] ]; var unCovered3 = [ [0, 1, 1, 1, 0, 0], [0, 0, 1, 1, 1, 0], [0, 1, 0, 1, 1, 0], [0, 1, 1, 0, 1, 0] ]; var unCovered2 = [ [0, 0, 1, 1, 0, 0], [0, 1, 0, 1, 0, 0], [0, 0, 1, 0, 1, 0], [0, 1, 1, 0, 0, 0], [0, 0, 0, 1, 1, 0], [0, 1, 0, 0, 1, 0] ]; var covered4 = [ [-1, 1, 0, 1, 1, 1], [-1, 1, 1, 0, 1, 1], [-1, 1, 1, 1, 0, 1], [-1, 1, 1, 1, 1, 0], [0, 1, 1, 1, 1, -1], [1, 0, 1, 1, 1, -1], [1, 1, 0, 1, 1, -1], [1, 1, 1, 0, 1, -1] ]; var covered3 = [ [-1, 1, 1, 1, 0, 0], [-1, 1, 1, 0, 1, 0], [-1, 1, 0, 1, 1, 0], [0, 0, 1, 1, 1, -1], [0, 1, 0, 1, 1, -1], [0, 1, 1, 0, 1, -1], [-1, 1, 0, 1, 0, 1, -1], [-1, 0, 1, 1, 1, 0, -1], [-1, 1, 1, 0, 0, 1, -1], [-1, 1, 0, 0, 1, 1, -1] ]; (function() { //add same combinations for another player var allCombos = [win, unCovered4, unCovered3, unCovered2, covered4, covered3]; for (var k = 0; k < allCombos.length; k++) { var temp = []; for (var j = 0; j < allCombos[k].length; j++) { var tmp = []; for (var i = 0; i < allCombos[k][j].length; i++) tmp[i] = -allCombos[k][j][i]; temp.push(tmp); } for (var m = 0; m < temp.length; m++) { allCombos[k].push(temp[m]); } } }()); var valueCombo = function(w, u2, u3, u4, c3, c4) { if (w > 0) return 1000000000; if (u4 > 0) return 100000000; if (c4 > 1) return 10000000; if (u3 > 0 && c4 > 0) return 1000000; if (u3 > 1) return 100000; if (u3 == 1) { if (u2 == 3) return 40000; if (u2 == 2) return 38000; if (u2 == 1) return 35000; return 3450; } if (c4 == 1) { if (u2 == 3) return 4500; if (u2 == 2) return 4200; if (u2 == 1) return 4100; return 4050; } if (c3 == 1) { if (u2 == 3) return 3400; if (u2 == 2) return 3300; if (u2 == 1) return 3100; } if (c3 == 2) { if (u2 == 2) return 3000; if (u2 == 1) return 2900; } if (c3 == 3) { if (u2 == 1) return 2800; } if (u2 == 4) return 2700; if (u2 == 3) return 2500; if (u2 == 2) return 2000; if (u2 == 1) return 1000; return 0; }; var findArray = function(arr, inArr) { var fCount = arr.length; var sCount = inArr.length; var k; for (var i = 0; i <= fCount - sCount; i++) { k = 0; for (var j = 0; j < sCount; j++) { if (arr[i + j] == inArr[j]) k++; else break; } if (k == sCount) return true; } return false; }; var isAnyInArrays = function(combos, arr) { for (var i = 0; i < combos.length; i++) { if (findArray(arr, combos[i])) return true; } return false; }; var combinations = {}; combinations.winValue = 1000000000; combinations.valuePosition = function(arr1, arr2, arr3, arr4) { // 4 directions var w = 0, u2 = 0, u3 = 0, u4 = 0, c3 = 0, c4 = 0; var allArr = [arr1, arr2, arr3, arr4]; for (var i = 0; i < allArr.length; i++) { if (isAnyInArrays(win, allArr[i])) { w++; continue; } if (isAnyInArrays(covered4, allArr[i])) { c4++; continue; } if (isAnyInArrays(covered3, allArr[i])) { c3++; continue; } if (isAnyInArrays(unCovered4, allArr[i])) { u4++; continue; } if (isAnyInArrays(unCovered3, allArr[i])) { u3++; continue; } if (isAnyInArrays(unCovered2, allArr[i])) { u2++; } } return valueCombo(w, u2, u3, u4, c3, c4); }; return combinations; }; }, {}], 2: [function(require, module, exports) { Array.matrix = function(m, n, initial) { var a, i, j, mat = []; for (i = 0; i < m; i++) { a = []; for (j = 0; j < n; j++) { a[j] = initial; } mat[i] = a; } return mat; }; var initCombinations = require('./combinations'); module.exports = function(player) { var gameSize = 5; // 5 in line var ring = 1; // ring size around current cells var win = false; var cellsCount = 15; var curState = Array.matrix(15, 15, 0); var complexity = 1; var maxPlayer = player || -1; // X = 1, O = -1 var combinations = initCombinations(); if (maxPlayer === -1) curState[7][7] = 1; var checkWin = function() { for (var i = 0; i < cellsCount; i++) { for (var j = 0; j < cellsCount; j++) { if (curState[i][j] == 0) continue; var playerVal = combinations.valuePosition( getCombo(curState, curState[i][j], i, j, 1, 0), getCombo(curState, curState[i][j], i, j, 0, 1), getCombo(curState, curState[i][j], i, j, 1, 1), getCombo(curState, curState[i][j], i, j, 1, -1) ); if (playerVal === combinations.winValue) { win = true; } } } }; var miniMax = function minimax(node, depth, player, parent) { if (depth == 0) return heuristic(node, parent); var alpha = Number.MIN_VALUE; var childs = getChilds(node, player); for (var i = 0; i < childs.length; i++) { alpha = Math.max(alpha, -minimax(childs[i], depth - 1, -player, node)); } return alpha; }; var isAllSatisfy = function(candidates, pointX, pointY) { var counter = 0; for (var i = 0; i < candidates.length; i++) { if (pointX != candidates[i][0] || pointY != candidates[i][1]) counter++; } return counter == candidates.length; }; var getChilds = function(parent, player) { var children = []; var candidates = []; for (var i = 0; i < cellsCount; i++) { for (var j = 0; j < cellsCount; j++) { if (parent[i][j] != 0) { for (var k = i - ring; k <= i + ring; k++) { for (var l = j - ring; l <= j + ring; l++) { if (k >= 0 && l >= 0 && k < cellsCount && l < cellsCount) { if (parent[k][l] == 0) { var curPoint = [k, l]; var flag = isAllSatisfy(candidates, curPoint[0], curPoint[1]); if (flag) candidates.push(curPoint); } } } } } } } for (var f = 0; f < candidates.length; f++) { var tmp = Array.matrix(cellsCount, cellsCount, 0); for (var m = 0; m < cellsCount; m++) { for (var n = 0; n < cellsCount; n++) { tmp[m][n] = parent[m][n]; } } tmp[candidates[f][0]][candidates[f][1]] = -player; children.push(tmp); } return children; }; var getCombo = function(node, curPlayer, i, j, dx, dy) { var combo = [curPlayer]; for (var m = 1; m < gameSize; m++) { var nextX1 = i - dx * m; var nextY1 = j - dy * m; if (nextX1 >= cellsCount || nextY1 >= cellsCount || nextX1 < 0 || nextY1 < 0) break; var next1 = node[nextX1][nextY1]; if (node[nextX1][nextY1] == -curPlayer) { combo.unshift(next1); break; } combo.unshift(next1); } for (var k = 1; k < gameSize; k++) { var nextX = i + dx * k; var nextY = j + dy * k; if (nextX >= cellsCount || nextY >= cellsCount || nextX < 0 || nextY < 0) break; var next = node[nextX][nextY]; if (next == -curPlayer) { combo.push(next); break; } combo.push(next); } return combo; }; var heuristic = function(newNode, oldNode) { for (var i = 0; i < cellsCount; i++) { for (var j = 0; j < cellsCount; j++) { if (newNode[i][j] != oldNode[i][j]) { var curCell = newNode[i][j]; var playerVal = combinations.valuePosition( getCombo(newNode, curCell, i, j, 1, 0), getCombo(newNode, curCell, i, j, 0, 1), getCombo(newNode, curCell, i, j, 1, 1), getCombo(newNode, curCell, i, j, 1, -1) ); newNode[i][j] = -curCell; var oppositeVal = combinations.valuePosition( getCombo(newNode, -curCell, i, j, 1, 0), getCombo(newNode, -curCell, i, j, 0, 1), getCombo(newNode, -curCell, i, j, 1, 1), getCombo(newNode, -curCell, i, j, 1, -1) ); newNode[i][j] = -curCell; return 2 * playerVal + oppositeVal; } } } return 0; }; var getLogic = {}; getLogic.winState = ""; getLogic.makeAnswer = function(x, y) { var that = this; curState[x][y] = maxPlayer; checkWin(); if (win) { that.winState = "you win"; return ""; } var answ = [-1, -1]; var c = getChilds(curState, maxPlayer); var maxChild = -1; var maxValue = Number.MIN_VALUE; for (var k = 0; k < c.length; k++) { var curValue = miniMax(c[k], 0, -maxPlayer, curState); if (complexity > 1) { //var curValue2 = miniMax(c[k], complexity - 1, -maxPlayer, curState); //use it for more complex game! } if (maxValue < curValue) { maxValue = curValue; maxChild = k; } } for (var i = 0; i < cellsCount; i++) { for (var j = 0; j < cellsCount; j++) { if (c[maxChild][i][j] != curState[i][j]) { answ[0] = i; answ[1] = j; curState[answ[0]][answ[1]] = -maxPlayer; checkWin(); if (win) { that.winState = "you lost"; } return answ; } } } return answ; }; return getLogic; }; }, { "./combinations": 1 }], 3: [function(require, module, exports) { $(document).ready(function() { var initLogic = require('./gomoku/logic'); var logic = initLogic(); $("#7-7").addClass("boardCellCross"); var currValue = -1; // player - O, computer - X var gameOver = false; $('div.boardCol').mousedown(handleMouseDown); function handleMouseDown(e) { if (gameOver) return ""; var cell = $(this); if (cell.children().hasClass("boardCellCircle")) return ""; if (cell.children().hasClass("boardCellCross")) return ""; var indexes = (cell.children().attr('id')).split("-"); var answer = logic.makeAnswer(indexes[0], indexes[1]); if (answer !== "") { var getedId = '#' + answer[0] + '-' + answer[1]; $(getedId).addClass(deserve()); } else currValue *= -1; cell.children().addClass(deserve()); function deserve() { currValue *= -1; if (currValue === 1) { return "boardCellCross"; } return "boardCellCircle"; } if (logic.winState !== "") { var message = $("#message"); message.text(logic.winState); gameOver = true; message.removeClass("looseState"); if (logic.winState === "you lost") { message.addClass("looseState"); } } } $("#scale-Up").click(handleScale); $("#scale-Down").click(handleScale); function handleScale(e) { var value = 100; var minValue = 300; var delta = $(this).attr('id').split("-")[1]; var board = $(".board"); var controls = $(".controls"); if (delta === "Up") { board.width(board.width() + value); board.height(board.height() + value); controls.width(controls.width() + value); controls.height(controls.height() + value / 15); } if (delta === "Down" && board.width() > minValue) { board.width(board.width() - value); board.height(board.height() - value); controls.width(controls.width() - value); controls.height(controls.height() - value / 15); } } $("#new-O").parent().click(handleNewGame); $("#new-X").parent().click(handleNewGame); function handleNewGame(e) { var index = ($(this).children().attr('id')).split("-")[1]; $(".boardCell").removeClass("boardCellCross boardCellCircle"); gameOver = false; $("#message").text(""); if (index === "O") { logic = initLogic(); $("#7-7").addClass("boardCellCross"); currValue = -1; } if (index === "X") { logic = initLogic(1); currValue = 1; } $("#check").prop('checked', false); } }); }, { "./gomoku/logic": 2 }]
}, {}, [3])
Gomoku JS - Script Codes
Gomoku JS - Script Codes
Home Page Home
Developer Anton Mudrenok
Username mudrenok
Uploaded September 28, 2022
Rating 4.5
Size 8,326 Kb
Views 135,608
Do you need developer help for Gomoku JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Mudrenok (mudrenok) Script Codes
Name
Radial Menu Animation
Swipeable Video Cards
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!