Function module

Come and experience it! Can you win a computer?

The main functional modules are:

1. Man-machine fighting function

2. Regret function

3. Undo the Regret function

Same old rule, source code paste

Specific code

(1) HTML code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <link rel="stylesheet" href=" CSS /1.css"> <link rel="stylesheet" href=" CSS /2.css"> <script SRC =""></script> <title> HTML5 web mobile gobang game </title> </head> <body> <div id="chessBox"> <canvas ID ="canvas" width="0" Height ="0"></canvas> </div> <div id="chess_buttom_box"> <button class="select" </button> <div class="WJ_A"> <div class="WJ_A_left" Class ="Wchess"></div> <div class="Wchess_steps"> <div class="emoji" emoji--haha"> <div class="emoji__face"> <div class="emoji__eyes"></div> <div class="emoji__mouth"> <div class="emoji__tongue"></div> </div> </div> </div> </div> </div> </div> </div> <div class="WJ_B"> <div Class ="WJ_B_right"> <div class="Bchess"></div> <div class="Bchess_steps"> </div> <div class="Bchess_expression"> <div class="emoji emoji--haha"> <div class="emoji__face"> <div class="emoji__eyes"></div> <div class="emoji__mouth"> <div class="emoji__tongue"></div> </div> </div> </div> </div> </div> </div> </body> <script src="js/1.js"></script> </html>Copy the code

(2) CSS code

html,body{
	position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: scroll;
    background: #e6e7ec
}
/*********** upper and lower box ***********/
#chessBox,#chess_buttom_box{
    position: relative;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 1px 1px 3px 1px #9e9e9e5e;
}

#chess_buttom_box{
    margin-top: 10px;
    height: 50px;
    top: 0px;
    box-shadow: 0px 0px 0px 0px #9e9e9e5e;
}

#canvas{
    display: block;
    top: 0px;
    position: absolute;
    background: #f7e6b7;
    border-radius: 4px;
}

.WJ_A,.WJ_B{
    position: relative;
    width: 100%;
    height: 70px;
    display: none;
}

.mobile_wja,.mobile_wjb{
    display: block;
}

.WJ_A_left,.WJ_B_right{
    position: absolute;
    top: 15px;
    width: 120px;
    height: 40px;
    background: #f3f3f3;
	box-shadow: 0px 0px 5px 1px #dedede;
}
.WJ_B_right{
	right: 0;
	border-radius: 30px 0px 0px 30px;
}
.WJ_A_left{
	left: 0;
	border-radius: 0px 30px 30px 0px;
}
.WJ_A > .WJ_A_left > .Wchess{
	top: 5px;
	left: 10px;
}

.WJ_B > .WJ_B_right > .Bchess{
	top: 5px;
	right: 10px;
}

.Wchess_expression{
    position: absolute;
    width: 50px;
    height: 50px;
	display: none;
}
.Wchess_expression::after{
	content: "White wins";
	position: absolute;
	width: 150%;
	height: 100%;
	left: 50px;
	top: 0px;
	font-size: 15px;
	text-align: center;
	line-height: 50px;
}
.Bchess_expression{
	position: absolute;
	width: 50px;
	height: 50px;
	top: 10px;
	display: none;
}
.Bchess_expression::after{
	content: "Black wins.";
	position: absolute;
	width: 150%;
	height: 100%;
	left: -82px;
	top: 0px;
	font-size: 15px;
	text-align: center;
	line-height: 50px;
}

/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

/*********** Reactivate the undo button ***********/
.regret,.anew,.select{
    position: absolute;
    width: 90px;
    height: 30px;
    background: #03A9F4;
    color: #fff;
    outline: none;
    border: 0px;
    user-select: none;
    border-radius: 20px;
    line-height: 30px;
    left: 239px;
}
.regret{left: 122px; } .select{display: none; } .mobile_regret,.mobile_anew,.mobile_select{width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    left: 250px;
    font-size: 12px;
	box-shadow: 0px 0px 5px 1px #c7c7c7;
}
.mobile_regret{left: 310px; } .mobile_select{display: block; left: 10px; }/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

/*********** Black and white chess pieces ***********/
.Bchess,.Wchess,.mobile_Bchess,.mobile_Bchess{
    position: absolute;
    width: 27px;
    height: 27px;
    border-radius: 30px;
    background: radial-gradient(#62697b 10%,#49535d 90%);
    box-shadow: 1px 1px 2px 0 #0000006e;
    font-size: 10px;
    line-height: 27px;
    text-align: center;
    color: #fff
}
.Wchess{
    background: radial-gradient( #fdf9f9 20%,#edf0f0 90%);
    box-shadow: 1px 1px 2px 0 #0000006e;
    color: #000
}
.mobile_Bchess,.mobile_Wchess{
	width: 19px;
	height: 19px;
	line-height: 19px;
	font-size: 10px;
	color: #fff;
}
.mobile_Wchess{color: #000000; } .Wchess_steps,.Bchess_steps{position: absolute;
	width: 82px;
	height: 30px;
	border-radius: 20px;
	top: 5px;
	font-size: 10px;
	text-align: center;
	line-height: 30px;
	color: #949494;
}
.Wchess_steps{
	right: 0px;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
Copy the code

(3) JS code

var hy_bodyWidth = document.body.clientWidth;// Get the viewable width of the page
var hy_bodyHeight = document.body.clientHeight;// Get the viewable height of the page
var hy_chessBox = document.getElementById("chessBox");
var hy_canvas = document.getElementById("canvas");
var hy_ctx = hy_canvas.getContext("2d");
var hy_buttom_box = document.getElementById("chess_buttom_box");
var hy_regret = document.getElementsByClassName("regret") [0];
var hy_anew = document.getElementsByClassName("anew") [0];
var hy_select = document.getElementsByClassName("select") [0];//Bchess_steps
var hy_BchessSteps = document.getElementsByClassName("Bchess_steps") [0]
var hy_WchessSteps = document.getElementsByClassName("Wchess_steps") [0]
var hy_over = false; // No chess after the game
var hy_me = true; // You can play chess
var anewOff = true;// The recall button can be clicked
var regretOff = true// The button can be clicked
var hy_count = 0;
var hy_wins = [];
var hy_myWin = [];
var hy_computerWin = [];
var hy_chessBoard = [];
var hy_chessMap = [];
var hy_mode = [[1.0], [0.1], [1.1], [1, -1]].var hy_lianziArr = [];
var hy_chessStep = 0;
var hy_WchessStep = 0;
var hy_BchessStep = 0;
var chessWB = [];
window.onresize = function(){ // Listen for the current window change event
    setTimeout(function(){ // Refresh the page when the current window changes
        window.location.reload()
    },hy_bodyWidth / 30)};var hy_Mobile_pc = {
	hy_num: 0.mWidth_pWidth: 0.mHeight_pHeight: hy_bodyHeight,
    devicenNme: ""};Copy the code

conclusion

The key points of a backgammon game are: 1. Know how many ways to win;

2. How to judge whether you have won;

3. Computer chess algorithm. Here cleverly use the array storage win method, judge whether to win, through weight comparison, calculate the position of the computer to play chess. In the process, I used canvas, which I had learned before. Although I had not used it for a long time, I checked some materials, reviewed how to draw lines and circles, and learned how to clear a circle. Then notice how classes are added and removed from elements using native Js.

Finally, interested partners can also download and experience it, which brings back full childhood memories. Source code address: click me to download