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

功能模块

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

主要功能模块为：
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。

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

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

图片五子棋PHP接口,原生JS+Canvas实现五子棋游戏实例
一.功能模块先看下现在做完的效果: 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15, ...
前端绘制k线图 -- 原生js canvas图表绘制
样式如下图源码地址: https://github.com/sutianbinde/charts 演示地址:kchart.html 编写这个需要具备canvas基础,如果没有canvas基础可以学习 ...
石头剪刀布php源码,php实现的网页版剪刀石头布游戏示例
本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { ...
HTML5高度还原复古24层魔塔网页版小游戏源码
简介: HTML5高度还原复古24层魔塔网页版小游戏源码网盘下载地址: http://kekewl.cc/OFfi6keX7OS0 图片:
《游戏学习》| 水果忍者HTML5网页版在线游戏 | 源码分析
游戏介绍这是一款由百度JS小组提供的HTML5版切水果游戏,这款基于HTML5实现的网页版切水果游戏虽然和原版的切水果游戏相比仍有美中不足之处,但也算有声有色,画面效果也十分炫目华丽. 游戏截图主 ...
收藏网页版小游戏：蜘蛛纸牌、扫雷、水果忍者、打地鼠、吃豆人
学习之余当然是摸鱼了,这里分享几个不用下载直接在线玩耍的游戏.有蜘蛛纸牌网页版在线玩.在线扫雷小游戏.在线玩的水果忍者.吃豆人.打地鼠.3D模仿. 下面我将一个个列出来.欢迎体验收藏! 蜘蛛纸牌:这是 ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
web前端之五子棋网页版小游戏
五子棋小游戏这个五子棋小游戏,没有写成人机模式. 但大家可以尝试下自己饰演两个角色的五子棋,嘻嘻嘻效果图片效果代码 index.html <!doctype html> <h ...