js+canvas实现五子棋小游戏


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下

效果展示:

js+canvas实现五子棋小游戏

源码展示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>五子棋</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 body {
 margin-top: 20px;
 margin-left: 20px;
 }
 
 canvas {
 background-image: url("img/bak.jpg");
 border: 1px solid #000;
 }
 
 </style>
</head>
<body>
<canvas width="600" height="600" onclick="play(event)"></canvas>
<script>
 /*准备工作: 1获取画布,获取画笔对象 */
 var mcanvas = document.querySelector("canvas");
 var ctx = mcanvas.getContext("2d");
 
 /*准备工作:2创建一个二维数组 用来定义绘制棋盘线*/
 var count = 15;//用来定义棋盘的行数和列数
 var map = new Array(count);
 for (var i = 0; i < map.length; i++) {
 map[i] = new Array(count);
 for (var j = 0; j < map[i].length; j++) {
 map[i][j] = 0;
 }
 }
 /*准备工作:3初始化棋子*/
 var black = new Image();
 var white = new Image();
 black.src = "img/black.png";
 white.src = "img/white.png";
 
 
 //开始绘制 1绘制棋盘线
 ctx.strokeStyle = "#fff";
 var rectWH = 40; //设置绘制矩形的大小
 for (var i = 0; i < map.length; i++) {
 for (var j = 0; j < map[i].length; j++) {
 ctx.strokeRect(j * rectWH, i * rectWH, rectWH, rectWH);
 }
 }
 
 // 用来进行黑白子的切换
 var isBlack = true;
 
 //开始绘制 2下子
 function play(e) {
 //获取点击canvas的位置值默认,canvas的左上角为(0,0) 点
 var leftOffset = 20;//body 的margin
 var x = e.clientX - leftOffset;
 var y = e.clientY - leftOffset;
 // console.log(x+" "+y);
 // 设置点击点后棋子下在哪里,获取点击的位置进行判断如果超过格子的一半则绘制到下一个点如果小于 则绘制在上一个点上
 var xv = (x - rectWH / 2) / rectWH;
 var yv = (y - rectWH / 2) / rectWH;
 
 var col = parseInt(xv) + 1;
 var row = parseInt(yv) + 1;
 console.log(xv + " " + yv + " , " + col + " " + row);
 
 //严格点需要验证 ,验证所输入的点是否在数组中已经存在 ,如果存在 则返回
 if (map[row][col] != 0) {
 alert("咋的,还想往我身上下啊!瞎啊!没看见已经有棋子了!!!");
 return;
 }
 
 // 切换绘制黑白子
 if (isBlack) {
 ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
 isBlack = false;
 map[row][col] = 1;
 Yes(1, row, col);
 } else {
 ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
 isBlack = true;
 map[row][col] = 2;
 Yes(2, row, col);
 }
 }
 
 //算法验证,查看谁赢 tag :1 :黑子 2 :白子
 function Yes(t, row, col) {
 console.log(1);
 var orgrow = row;
 var orgcol = col;
 var total = 1;
 // 判断依据,以当前下的棋子为圆心,水平方向左右寻找和自己想通的值 ,最后判断如果大于5个则表示胜利
 // 1水平方向判断
 while (col - 1 > 0 && map[row][col - 1] == t) { //判断下一个值 注意一定是:col-1
 total++;
 col--;
 }
 row = orgrow;
 col = orgcol;
 while (col + 1 < 15 && map[row][col + 1] == t) {
 col++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 
 // 2垂直方向判断
 row = orgrow;
 col = orgcol;
 total = 1;
 while (row - 1 > 0 && map[row - 1][col] == t) {
 row--;
 total++;
 }
 row = orgrow;
 col = orgcol;
 while (row + 1 < 15 && map[row + 1][col] == t) {
 row++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 
 //左下 右上
 row = orgrow;
 col = orgcol;
 total = 1;
 while (row + 1 < 15 && col - 1 > 0 && map[row + 1][col - 1] == t) {
 row++;
 col--;
 total++;
 }
 row = orgrow;
 col = orgcol;
 while (row - 1 > 0 && col + 1 < 15 && map[row - 1][col + 1] == t) {
 row--;
 col++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 //左上右下
 row = orgrow;
 col = orgcol;
 total = 1;
 while (row - 1 > 0 && col - 1 > 0 && map[row - 1][col - 1] == t) {
 row--;
 col--;
 total++;
 }
 row = orgrow;
 col = orgcol;
 while (row + 1 < 15 && col + 1 < 15 && map[row + 1][col + 1] == t) {
 row++;
 col++;
 total++;
 }
 if (total >= 5) {
 if (t == 1){
 alert("黑子赢");
 } else{
 alert("白子赢");
 }
 return;//判断出输赢结束后续判断
 }
 }
 
 
 /*功能扩充:
 1当胜利后 弹框:a是否在来一局 b 精彩回复
 a 如果点击在来一句 清空数据重新开始
 b 精彩回放将棋盘黑白子按照下棋的顺序进行棋子编号2悔棋功能
 3对算法的扩充
 a如果是双三 则直接弹出胜利
 b若是桶四 则直接弹出胜利
 */
</script>
</body>
</html>

图片资源:

js+canvas实现五子棋小游戏

背景图片:

js+canvas实现五子棋小游戏js+canvas实现五子棋小游戏

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
You might like
可以在线执行PHP代码包装修正版
2008/03/15 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python中的xlrd模块使用原理解析
2020/05/21 Python
python-地图可视化组件folium的操作
2020/12/14 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
幼儿园运动会入场词
2014/02/10 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
真诚的求职信
2014/07/04 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
初中毕业生感言
2015/07/31 职场文书
总经理聘用协议书
2015/09/21 职场文书
小组口号霸气押韵
2015/12/24 职场文书