The examples in this article share with you the specific code of JS to implement Gozi Chess game for your reference. The specific content is as follows
html:
<body> <h2>Gozi Chess Game</h2> <div > <div ></div> <div >haha</div> </div> </body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*overflow: hidden;*/
margin-top: 10px;
text-align: center;
background-color: #C7C7C7;
}
#box{
position: relative;
border: 1px solid;
margin: 20px auto;
width: 546px;
height: 546px;
background-color: #C7C7C7;
}
#box .squre{
width: 40px;
height: 40px;
border: 1px solid;
float: left;
}
#box01 .squre:hover{
background-color: pink;
}
#box01{
position: absolute;
/*border: 1px solid;*/
margin: 0 auto;
width: 588px;
height: 588px;
/*background-color: pink;*/
/*opacity: 0.5;*/
top: -20px;
left: -20px;
}
#box01 .qz{
width: 30px;
height: 30px;
border: 1px solid #C7C7C7;
float: left;
border-radius: 50%;
margin: 5px;
}
#box01 .qz:hover{
background-color: pink;
}
#box02{
position: absolute;
line-height: 546px;
font-size: 50px;
color: black;
width: 100%;
background-color: pink;
display: none;
opacity: 0.6;
}
</style>
script:
<script type="text/javascript">
= function () {
let box = ("box");
let box01 = ("box01");
//Draw the chessboard let arr = new Array();
for (let i=0;i<13;i++){
arr[i] = new Array();
for (let j=0;j<13;j++){
arr[i][j] = ("div");
arr[i][j].className = "squre";
(arr[i][j]);
}
}
//Draw chess pieces let arr01 = new Array();
for (let i=0;i<14;i++){
arr01[i] = new Array();
for (let j=0;j<14;j++){
arr01[i][j] = ("div");
arr01[i][j].className = "qz";
(arr01[i][j]);
}
}
for (let m=0;m<14;m++){
for (let n=0;n<14;n++){
arr01[m][n].onclick = function () {
//Before playing chess, count the number of black and white chess, so that black and white can exchange chess let count = 0;
for (let l = 0; l < 14; l++) {
for (let k = 0; k < 14; k++){
if (arr01[l][k]. != "") {
count++;
}
}
}
// (count);
if ( == "qz" && count % 2 == 0 && == "") {
//Play chess = "black";
//Introduce a judgment function // (m,n);
checkGame(m, n);
} else if ( == "qz" && count % 2 != 0 && == "") {
//Play chess = "white";
//Introduce a judgment function checkGame(m, n);
}
}
}
}
//Judge which side wins and loses, in four directions (horizontal, vertical, left oblique, right oblique) //m is the y-axis, n is the x-axis let a,b;
let flag = 0;
let box02 = ("box02");
function checkGame(a,b) {
//Judge horizontal direction let qzColor = arr01[a][b].;
// (qzColor);
for (let k=(b-4);k<=(b+4);k++){
if (k>=0 && k < 14){
if (qzColor == arr01[a][k]. && arr01[a][k]. != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
= qzColor+" win!!";
= "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
}
//Judge vertical for (let k=(a-4);k<=(a+4);k++){
if (k>=0 && k < 14){
if (qzColor == arr01[k][b]. && arr01[k][b]. != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
= qzColor+" win!!";
= "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
}
//Judge left oblique let ax = (a-4);//ax is used to record the changes in the horizontal coordinates for (let k=(b-4);k<=(b+4);k++){
if (k>=0 && k < 14 && ax>=0 && ax<14){
if (qzColor == arr01[ax][k]. && arr01[ax][k]. != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
= qzColor+" win!!";
= "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
ax++;
}
//Judge right oblique bx = a-4;
for (let k=(b+4);k>=(b-4);k--){
if (k>=0 && k < 14 && bx>=0 && bx<14){
if (qzColor == arr01[bx][k]. && arr01[bx][k]. != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
= qzColor+" win!!";
= "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
bx++;
}
}
}
</script>
More interesting classic game implementation topics, share with you:
Summary of C++ classic games
Summary of classic python games
python Tetris game collection
JavaScript classic game
Summary of classic javascript games
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.