使用canvas制作五子棋游戏

最新推荐文章于 2024-04-14 11:46:37 发布
VIP文章 最新推荐文章于 2024-04-14 11:46:37 发布
阅读量526 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/JobsOfferings/p/JonsOfferings_five.html
版权

要制作JS五子棋的话我们可以一开始来理清一下思路，这样对我们后来的编程是有好处的

1、棋盘使用canvas制作。canvas用来做这种不用太过复杂的图形的时候是很有用处的，下图是我制作的一个五子棋棋盘

2、确定你是想做PC端的还是做移动端的

3、点击的棋子是放在棋盘上，还是另建一个canvas画布

对于这个问题，我选择了新建一个canvas画布，如果不新建的话，如果想有撤回按钮(我这边没放上去)，不太好操作，因为使用API删除会不干净，所以我使用的是存下棋子数组，每一次下棋子，存入数组后，清空棋盘，重新绘制，那每次还要重新绘制一个棋盘，所以我把棋盘作为了一个固定的canvas。还有一点，棋盘的绘制，如果棋盘和canvas画布一样大小的话，下在最旁边的棋子是会有一部分看不见的，所以要么这个canvas大一部分，要么另起一个只放置棋子的画布。

HTML：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7     <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
 8     <link rel="stylesheet" href="./CSS/reset.css">
 9     <link rel="stylesheet" href="./CSS/index.css">
10     <script type="text/javascript">
11         window.onresize = function () {
12             resetPage();
13         }
14         function resetPage() {
15             var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
16             var deviceHeight = document.documentElement.clientHeight || document.body.clientHeight;
17             var scale = deviceWidth / 480;
18             deviceHeight = deviceHeight / scale;
19             document.body.style.zoom = scale;
20             document.body.style.height = deviceHeight + 'px';
21         }
22 
23     </script>
24     <title>Document</title>
25 </head>
26 
27 <body>
28     <canvas id="canvas_0" width="560px" height="560px"></canvas>
29     <canvas id="canvas_1" width="600px" height="600px"></canvas>
30     <div id="shadowBox"></div>
31     <div id="back1">后退</div>
32     <div id="back2">后退</div>
33
最低0.47元/天 解锁文章
weixin_30449453
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Gobang:js五子棋 canvas
05-03
Gobang AI js五子棋 canvas 五子棋人机对战 实际上，有禁手的五子棋才是五子棋，没有禁手的叫五字连珠，哈哈哈哈，叫错这么多年.   赢法数组 棋盘初始化 var chessB = []; //用作存棋盘 // init for (var i = 0; i < 15; i++) { chessB[i] = []; for (var j = 0; j < 15; j++) { chessB[i][j] = 0; } } 横线赢统计 for(var i = 0;i<15;i++){ for(var j = 0;j<11;j++){ for(var k = 0;k<5;k++){ wins[i][j+k][count] = true; }
利用js canvas实现五子棋游戏
10-14
主要为大家详细介绍了利用js canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一步一步撸一个canvas五子棋小游戏
cheyuyan4765的博客
03-09 237
canvas五子棋小游戏 第一篇文章，我们一起开发一个五子棋游戏。 在开始教程之前如果你想预览一下这个游戏会是什么样子的话可以点击试玩 。 如果里面的代码你现在一点也看不懂，很多语法都不熟悉也不需要着急，接下来教程会一步一步教你编写出这个小游戏所有的代码。 先新建一个index.html，在b...
JavaScript-canvas绘制五子棋
air_shark
04-16 390
使用JavaScript的canvas绘制五子棋。
canvas实现简易五子棋
hyumi9982的博客
11-05 56
【代码】canvas实现简易五子棋。
canvas画图实现一个简单的五子棋小游戏
beiTiao_lys的博客
03-10 533
canvas画图的使用, 绘制简单五子棋效果
canvas绘制五子棋案例js实现
wangzhneg123的博客
03-22 683
效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { margin: 0; ...
基于canvas的五子棋
bash_winner的博客
02-19 899
前言：说在前面的画 可能，一进来最关心的就是，实现的到底是个啥样，那就来一张动图呗，先声明一下，关于电脑的落子算法，本文只是简单的实现了一下（在玩家周围一格随机获取位置），如果懂机器学习可以引入机器学习的相关算法，来获取电脑应该下载哪（位置） 看过我前几篇关于canvas的相关介绍和用法，你会发现，其实绘制棋盘。在指定的位置绘制棋子都是一件容易的事情（在指定位置绘制棋子，关键是：像素位置和坐标之...
canvas绘制五子棋
qq_21277357的博客
01-02 75
【代码】canvas绘制五子棋。
原生JavaScript+canvas实现五子棋游戏_值得一看
见贤思齐焉，见不贤内自省
05-15 1303
五子棋 最下面是详细代码加注释 首先需要一个画布 我们需要一个一个棋盘 <canvas id="canvas"></canvas> let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') let redP = document.getElementsByClassName('redP')[0] let blackP = document.getElemen
canvas制作的简易五子棋
07-01
使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5 canvas简单的五子棋小游戏代码
11-03
html5 canvas简单的五子棋小游戏代码 html5 canvas简单的五子棋小游戏代码
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了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 so
HTML5 canvas 回合制战棋游戏代码实现
03-01
使用 html5 canvas 绘制游戏图像，利用 javascript 实现游戏。 游戏实现了类似英雄无敌3 中战斗场景的回合制玩法： - 对战双方每个生物每一轮有一次行动机会，可以行走或攻击对方。 - 每个生物属性有：行走范围，速度，生命，伤害，防御，攻击 和 是否是远程兵种。 - 当把对方生物都消灭时，即胜利。 - 实现了简单的AI。
使用canvas和js制作五子棋
01-14
使用canvas以及原生js写的一个五子棋游戏
js禁用所有的input
Rockandrollman的博客
04-11 328
要在JavaScript中禁用所有的input元素，您可以使用document.querySelectorAll方法来选择所有的input元素，然后使用一个循环来为它们设置disabled属性。这段代码将会禁用页面上所有的input元素。
js的filter函数
最新发布
xiaohua0708day的博客
04-14 195
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
【300套】基于Springboot+Vue的Java实战开发项目(附源码+演示视频+LW)
2301_77929200的博客
04-12 1353
🧡今天给大家分享300+的Java毕业设计，基于Springboot+vue框架，这些项目都经过精心挑选，涵盖了不同的实战主题和用例，可做毕业设计和课程设计参考。✍️除了源码，对于大部分项目实现的功能都有相应的介绍，并且配有演示视频，方便大家根据自己的需要择优下载学习。💂另外如有定制需求或者想要相对应的论文参考，文末可以十我VX联系。🤝后续还会持续更新，欢迎关注！
uni-app中使用canvas五子棋
05-02
在uni-app中使用canvas实现五子棋可以按照以下步骤进行： 1. 创建canvas组件 在需要使用canvas的页面中，添加一个canvas组件： ```html <canvas class="chessboard" canvas-id="canvas"></canvas> ``` 2. 获取canvas上下文 在页面的`onLoad`生命周期函数中，获取canvas的上下文： ```js onLoad() { // 获取canvas上下文 this.ctx = uni.createCanvasContext('canvas', this); } ``` 3. 绘制棋盘 绘制棋盘可以使用`ctx`的绘图API，例如`ctx.beginPath()`、`ctx.moveTo()`、`ctx.lineTo()`等。具体的绘制方法可以参考以下代码： ```js drawChessboard() { const cellWidth = this.data.cellWidth; const boardWidth = this.data.boardWidth; const rows = this.data.rows; const cols = this.data.cols; const margin = this.data.margin; // 绘制棋盘背景 this.ctx.fillStyle = '#D1B18F'; this.ctx.fillRect(0, 0, boardWidth, boardWidth); // 绘制棋盘格线 this.ctx.beginPath(); for (let i = 0; i < rows; i++) { this.ctx.moveTo(margin + cellWidth / 2, margin + i * cellWidth + cellWidth / 2); this.ctx.lineTo(boardWidth - margin - cellWidth / 2, margin + i * cellWidth + cellWidth / 2); } for (let i = 0; i < cols; i++) { this.ctx.moveTo(margin + i * cellWidth + cellWidth / 2, margin + cellWidth / 2); this.ctx.lineTo(margin + i * cellWidth + cellWidth / 2, boardWidth - margin - cellWidth / 2); } this.ctx.stroke(); } ``` 4. 绘制棋子 绘制棋子可以使用`ctx.arc()`和`ctx.fill()`方法实现。具体的绘制方法可以参考以下代码： ```js drawChess(x, y, color) { const cellWidth = this.data.cellWidth; const margin = this.data.margin; const radius = cellWidth / 2 - margin; // 计算棋子的坐标 const cx = margin + x * cellWidth; const cy = margin + y * cellWidth; // 绘制棋子 this.ctx.beginPath(); this.ctx.arc(cx, cy, radius, 0, 2 * Math.PI); this.ctx.fillStyle = color; this.ctx.fill(); } ``` 5. 绑定事件 在canvas上绑定事件可以使用`canvas`组件的`@touchstart`、`@touchmove`、`@touchend`等事件。具体的绑定方法可以参考以下代码： ```html <canvas class="chessboard" canvas-id="canvas" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" ></canvas> ``` 6. 实现游戏逻辑 实现五子棋的游戏逻辑可以在页面的`methods`中进行。例如，判断胜负可以使用一个二维数组来记录棋盘上的棋子，然后通过遍历该数组来判断是否存在连成五个的棋子。具体的实现方法可以参考以下代码： ```js data() { return { // 棋盘格子的宽度 cellWidth: 30, // 棋盘的行数和列数 rows: 15, cols: 15, // 棋盘的宽度 boardWidth: 450, // 棋盘的边缘空白区域 margin: 15, // 棋子的颜色 chessColor: ['white', 'black'], // 当前下棋的玩家 currentPlayer: 0, // 棋盘上的棋子 chessboard: [], // 是否游戏结束 gameOver: false, }; }, onLoad() { this.ctx = uni.createCanvasContext('canvas', this); this.initChessboard(); this.drawChessboard(); }, initChessboard() { // 初始化棋盘 for (let i = 0; i < this.rows; i++) { this.chessboard[i] = []; for (let j = 0; j < this.cols; j++) { this.chessboard[i][j] = -1; } } }, onTouchStart(e) { // 获取触摸点的坐标 const x = e.touches[0].x; const y = e.touches[0].y; // 计算在棋盘中的位置 const i = Math.floor((y - this.data.margin) / this.data.cellWidth); const j = Math.floor((x - this.data.margin) / this.data.cellWidth); // 判断该位置是否为空 if (this.chessboard[i][j] === -1 && !this.gameOver) { // 绘制棋子 this.drawChess(j, i, this.chessColor[this.currentPlayer]); // 记录棋子 this.chessboard[i][j] = this.currentPlayer; // 判断是否胜利 if (this.checkWin(i, j, this.currentPlayer)) { this.gameOver = true; uni.showToast({ title: `玩家${this.currentPlayer + 1}胜利`, icon: 'none' }); return; } // 切换玩家 this.currentPlayer = 1 - this.currentPlayer; } }, checkWin(row, col, player) { const dirs = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [1, 1], [-1, 1], [1, -1]]; for (let i = 0; i < dirs.length; i++) { let count = 1; const dx = dirs[i][0]; const dy = dirs[i][1]; for (let j = 1; j < 5; j++) { const x = row + j * dx; const y = col + j * dy; if (x < 0 || x >= this.rows || y < 0 || y >= this.cols || this.chessboard[x][y] !== player) { break; } count++; } if (count === 5) { return true; } } return false; }, ``` 以上就是在uni-app中使用canvas实现五子棋的步骤，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值