Html canvas 五子棋

最新推荐文章于 2024-04-28 15:25:50 发布
最新推荐文章于 2024-04-28 15:25:50 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： 前端 文章标签： 五子棋 html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LvShuiLanTian/article/details/50523015
版权 
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
</head>

<body>
    <div style="width:600px;height:600px;background-image:url(images/bg.jpg);">
        <canvas width="600" height="600" onmousedown="play(event)" id="canvas">
        </canvas>
    <div>
</body>
<script type="text/javascript">
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

bi = new Image();
bi.src = "images/black.png";
wi = new Image();
wi.src = "images/white.png";

var prex = 36, prey = 36, cprex = prex, cprey = prey;
var chess = new Array();
var cnt = 0;
var isFinish = false;

init();

function init() {
    context.clearRect(0, 0, 600, 600);
    for (var i = 0; i < 15; ++i) {
        chess[i] = new Array();
        for (var j = 0; j < 15; ++j) {
            chess[i][j] = 0;
        }
    }
    for (var i = 0; i < 15; ++i) {
        line(prex, prey + i * 38, prex + 14 * 38, prey + i * 38, i == 0 || i == 14);
        line(prex + i * 38, prey, prex + i * 38, prey + 14 * 38, i == 0 || i == 14);
    }
    point(prex + 38 * 3, prey + 38 * 3, 4);    
    point(prex + 38 * 3, prey + 38 * 11, 4);    
    point(prex + 38 * 11, prey + 38 * 3, 4);    
    point(prex + 38 * 11, prey + 38 * 11, 4);    
    point(prex + 38 * 7, prey + 38 * 7, 4);    
    cnt = 0;
    isFinish = false;
}

function windowToCanvas(canvas, x, y) {
    var b = canvas.getBoundingClientRect();
    return {
        x: x - b.left * (canvas.width / b.width),
        y: y - b.top * (canvas.height / b.height)
    };
}

function line(sx, sy, ex, ey, bold) {
    context.beginPath();
    context.moveTo(sx, sy);
    context.lineTo(ex, ey);
    context.strokeStyle = "#000000";
    context.lineWidth = bold ? 4 : 2;
    context.closePath();
    context.stroke();
}

function point(rx, ry, r) {
    context.beginPath();
    context.arc(rx, ry, r, 0, Math.PI * 2, true);
    context.fillStyle = "#000000";
    context.fill();
    context.closePath();
    context.stroke();
}

function play(e) {
    if (isFinish) {
        return;
    }

    var p = windowToCanvas(canvas, e.clientX, e.clientY);
    x = Math.round((p.x - cprex) / 38);
    y = Math.round((p.y - cprey) / 38);
    if (chess[x][y] != 0 || !checkPosition(x, y)) {
        return;
    }
    px = x * 38 + prex - 18;
    py = y * 38 + prey - 18;
    chess[x][y] = cnt % 2 == 0 ? 1 : 2;
    context.drawImage(cnt % 2 == 0 ? wi : bi, px, py);

    if (isEnd(x, y)) {
        isFinished = true;
        show(cnt % 2 != 0 ? "黑方胜" : "白方胜", cnt % 2 != 0 ? "#000000" : "#ffffff");        
        setTimeout("init()", 2000);
    }
    cnt++;
}

function show(ctx, color) {
    context.font = 'bold 72px consolas';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = color;
    context.fillText(ctx, 300, 300);
}

function checkPosition(px, py) {
    return px >= 0 && px < 15 && py >= 0 && py < 15;
}

function isEnd(px, py) {
    return checkDirection(px, py, 0, 1) || checkDirection(px, py, 1, 0) 
        || checkDirection(px, py, -1, -1) || checkDirection(px, py, 1, -1);
}

function checkDirection(px, py, mx, my) {
   var res = 1;
   for (var i = 1; i < 5; ++i) {
      tx = px + i * mx;
      ty = py + i * my;
      if (!checkPosition(tx, ty) || chess[px][py] != chess[tx][ty]) {
          break;
      }
      res++;
   }
   for (var i = 1; i < 5; ++i) {
      tx = px - i * mx;
      ty = py - i * my;
      if (!checkPosition(tx, ty) || chess[px][py] != chess[tx][ty]) {
          break;
      }
      res++;
   }
   return res >= 5;
}

</script>
</html>
绿水兰田
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html五子棋游戏（附源码），9次前端面试经验总结
2301_77053710的博客
04-01 847
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML5 canvas简单五子棋小游戏特效代码
03-20
在这个"HTML5 canvas简单五子棋小游戏特效代码"项目中，开发者利用canvas结合JavaScript来实现了一个互动的五子棋游戏。下面我们将深入探讨这个项目所涉及的主要知识点。 首先，HTML5 canvas是一个基于矢量图形的...
HTML写一个五子棋小游戏
weixin_48274491的博客
01-12 932
五子棋
HTML5 游戏开发实战 ｜ 五子棋
不断学习，不断进步，提高自己
07-04 2435
五子棋是一种家喻户晓的棋类游戏，它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下)，而后改进为人机对战版。整个游戏棋盘格数为 15×15，单击鼠标落子，黑子先落。在每次下棋子前，程序先判断该处有无棋子，有则不能落子，超出边界不能落子。任何一方有横向、竖向、斜向、反斜向连到 5 个棋子则胜利。
html制作好看的五子棋（源码）
xcLeigh
10-31 8454
html制作好看的五子棋,html制作五子棋对战源码,酷炫的界面效果,带AI,可本地双人一起玩,也可以单独跟AI单挑。代码内相关描述有备注,下面咋们一起来看看源码设计思路。
html五子棋游戏（附源码）
最新发布
2401_84433535的博客
04-28 960
/赢法的统计数组//赢法数组i < 15;j++){//赢法总数//横线赢法i < 15;j++){k < 5;//竖线赢法i < 15;j++){k < 5;//正斜线赢法i < 11;j++){k < 5;//反斜线赢法i < 11;i++){j > 3;j–){
html5 canvas简单的五子棋小游戏代码
11-03
五子棋是一种深受人们喜爱的双人对弈策略游戏，利用HTML5 Canvas技术，我们可以构建一个简单的五子棋小游戏，提供用户交互体验。 在HTML5 Canvas上实现五子棋游戏，主要涉及以下几个核心知识点： 1. **Canvas API*...
利用js canvas实现五子棋游戏
10-14
本教程将详细介绍如何使用js canvas实现一个五子棋游戏。 首先，HTML部分设置了基本的页面结构，包含一个canvas元素和两个标题元素，用于显示游戏状态。canvas元素是画布，用于绘制五子棋盘，而标题元素则用来展示...
canvas node 五子棋
02-18
【标题】"canvas node 五子棋"是一个基于HTML5 Canvas技术和Node.js服务器的网络五子棋游戏。这个游戏设计的核心是实现玩家之间的实时交互，通过WebSocket协议，利用Socket.IO库来处理通信。 【HTML5 Canvas】...
canvas制作的简易五子棋
07-01
使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋
网页五子棋（这个是用纯html写的）
09-03
纯html写的五子棋，里面嗨有一个算法，电脑可以和你下。
JS canvas绘制五子棋的棋盘
10-17
主要为大家详细介绍了JS canvas绘制五子棋棋盘的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html实现五子棋
02-10
使用html和css实现五子棋 /**五子棋 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑白棋子，黑子棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束 * 20150930 */ /**全局参数初始化
html五子棋游戏制作原理,原生JS+Canvas实现五子棋游戏
weixin_28932441的博客
06-01 332
功能模块先看下现在做完的效果：代码详解人机对战功能实现从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘：//绘画棋盘var drawChessBoard = function(){for(var i = 0; i < 15; i++){context.moveTo(15 + i * 30 , 15);context.lineTo(15 + i * 30 , 435...
原生JavaScript+canvas实现五子棋游戏_值得一看
见贤思齐焉，见不贤内自省
05-15 1339
五子棋 最下面是详细代码加注释 首先需要一个画布 我们需要一个一个棋盘 <canvas id="canvas"></canvas> let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') let redP = document.getElementsByClassName('redP')[0] let blackP = document.getElemen
【Web】HTML+ JS+ CSS 的五子棋（简单AI）
新青年1号
09-30 1737
声明 本文是在观看 慕课网channingbreeze 大神的教学视屏时编写的。文中代码非本人原创，只是在学习过程中跟随教学视频略作修改并加上了详细的注释，以便于理解。 原教学视频地址：https://www.imooc.com/video/11639 HTML代码 CSS代码 JS代码 ...
canvas简易人机五子棋
长空孤月
08-31 1023
中学时看过一本关于围棋的漫画《棋魂》，奈何天赋有限，围棋至今也不会……好吧，退而求其次，五子棋相对简单一点。对着网上的教程实现了一个简单的五子棋： 其实ui的实现并不难，主要记录下ai的思路吧。
java 五子棋之人机对战思路详解
skltz
07-06 6088
最近做了五子棋，记录下自己完成五子棋的人机对战的思路。     首先，思路是这样的：每当人手动下一颗棋子（黑子）的时候，应当遍历它周围棋子的情况，并赋予周围棋子一定的权值，当在机器要下棋子（白子）守护之前，会遍历整个棋盘的权值情况（棋盘的权值存在一个二维数组中），从中找出权值最大的点坐标，并下子（白子）。     这样的话，问题就集中在两个方面了，一个是：如何遍历黑子周围的棋子
html5 canvas 五子棋游戏
weixin_30470857的博客
01-18 110
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } canvas{ ...
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实现五子棋的步骤，希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值