前端小白写了个网页版五子棋游戏,使用原生 JS + Canvas 实现绘制棋子、棋盘

·  阅读 482

功能模块

在这里插入图片描述

快来体验下吧!看下你能赢得了计算机么?

主要功能模块为:

1.人机对战功能

2.悔棋功能

3.撤销悔棋功能

老规矩,源码贴上

在这里插入图片描述

具体代码

(1)HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/1.css">
    <link rel="stylesheet" href="css/2.css">
    <script src=""></script>
    <title>html5网页手机五子棋游戏</title>
</head>
<body>
    <div id="chessBox">
        <canvas id="canvas" width="0" height="0"></canvas>
    </div>
    <div id="chess_buttom_box">
        <button class="select">选项</button>
		<button class="anew">撤回</button>
        <button class="regret">重开</button>
    </div>
    <div class="WJ_A">
		<div class="WJ_A_left">
			<div class="Wchess"></div>
			<div class="Wchess_steps">白子第0步</div>
			<div class="Wchess_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>
    </div>
    <div class="WJ_B">
		<div class="WJ_B_right">
			<div class="Bchess"></div>
			<div class="Bchess_steps">黑子第0步</div>
		</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>
复制代码

(2)css代码

html,body{
	position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: scroll;
    background: #e6e7ec
}
/***********上下盒子***********/
#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: "白棋获胜";
	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: "黑棋获胜";
	position: absolute;
	width: 150%;
	height: 100%;
	left: -82px;
	top: 0px;
	font-size: 15px;
	text-align: center;
	line-height: 50px;
}

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

/***********重开撤回按钮***********/
.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;}
/*******************************/

/***********黑白棋子***********/
.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;
}
/*******************************/
复制代码

(3)js代码

var hy_bodyWidth = document.body.clientWidth;//获取网页可视区宽度
var hy_bodyHeight = document.body.clientHeight;//获取网页可视区高度
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; // 游戏结束 不可下棋
var hy_me = true; //可以下棋
var anewOff = true;//撤回按钮 可以点击
var regretOff = true// 按钮 可以点击
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(){ // 监听当前窗口改变事件
    setTimeout(function(){ //当前窗口发生改变时 刷新页面
        window.location.reload()
    },hy_bodyWidth / 30)
};

var hy_Mobile_pc = {
	hy_num: 0,
    mWidth_pWidth: 0,
    mHeight_pHeight: hy_bodyHeight,
    devicenNme: "",
};
复制代码

总结

五子棋游戏的核心关键点是: 1、弄清楚有多少种赢法;

2、怎么判断是否已经赢了;

3、计算机下棋算法。这里巧妙地运用数组存储赢法,判断是否赢了,通过权重比较,计算出计算机该下棋的位置。过程中用到canvas,之前有学习过,虽然很久没用,查了些资料,复习了怎么画线,画圆,学会了怎么如何清除一个圆等。 然后要注意的是,用原生Js怎么为元素添加、删除class。

最后感兴趣的小伙伴也可以下载体验一下,勾起了满满的童年回忆。源码地址:点我下载

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改