使用canvans画布画五子棋

最新推荐文章于 2024-08-27 13:38:21 发布
最新推荐文章于 2024-08-27 13:38:21 发布
阅读量271 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50852523/article/details/121387418
版权

参考别的博主写的，自己发只是为了方便以后自己找资源

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style>
        canvas {
            box-shadow: -2px -2px 5px #3f5ab1, 2px 2px 5px #3fb15b;

        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="580px" height="580px"></canvas>
</body>

<script>
    let canvas = document.getElementById("mycanvas");
    let context = canvas.getContext('2d');
    context.strokeStyle = '#000';
    context.lineWidth = '2';
    function drawChessBoard() {
        for (let i = 0; i < 19; i++) {
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 555);
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(555, 15 + i * 30);
            context.stroke();
        }
    }
    drawChessBoard();

    canvas.onclick = function (e) {
        let x = e.clientX - 5;
        let y = e.clientY - 5;
        console.log(x + ',' + y)
        let i = Math.floor(x / 30);
        let j = Math.floor(y / 30);
        console.log(i + ',' + j)

        context.beginPath();
        context.fillStyle = '#000';
        context.arc(i * 30 + 15, j * 30 + 15, 10, 0, 2 * Math.PI, true);
        context.closePath();
        context.stroke();
        context.fill();
    }
</script>

</html>
人仌众�
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js和canvas实现五子棋
m0_50712156的博客
06-27 196
使用canvas画布画出基础的页面 <h3 class="title">--五子棋--</h3> <canvas class="chess" width="450px" height="450px"></canvas> <div> <a onclick="res()">重新开始</a> </div> css把它们垂直居中 .title{
使用canvas实现一个简单的画布
weixin_42527887的博客
05-07 903
HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一个像素。 canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法。要创建canvas的语法为： body中： <canvas id = "clock" width = "500" height="500"></canvas> *注意：这里的c...
canvas 五子棋游戏
weixin_33978044的博客
02-11 145
效果 代码 &lt;!DOCTYPE html&gt; &lt;html lang="zh_CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;五子棋&lt;/title&gt; &lt;script src="https://code.j...
canvas五子棋制作
qq_49721447的博客
01-28 394
canvas制作五子棋 全部代码下载地址： 运行截图 说明 使用canvas制作五子棋，主要使用到鼠标点击事件，获取鼠标点击在canvas中的坐标，然后在将该坐标进行变化，将其变为距离点击位置最近的的一个角的坐标（一个矩形有四个角，鼠标点击在棋盘的某个矩形上），之后开始绘制棋子，再使用一个东西判断是否切换棋子颜色，每次下棋都进行胜负判定，当满足条件时，显示结果。 主要代码展示 该代码作用是将鼠标点击位置的坐标转化为相对画布原点的坐标。 c.addEventListener("click",
canvas 绘制五子棋
weixin_47996469的博客
11-12 831
//html <canvas id="chess" width="450px" height="450px"></canvas> //js <script> var chess = document.getElementById("chess"); var context = chess.getContext('2d'); var me = true; var chessBoard = []; var over = false; // AI .
html+js实现围棋棋盘
09-13
在html页面中使用javascript脚本，动态添加div元素，实现一个19*19的围棋棋盘，资源包含各坐标点的背景图片以及js完整代码。
用canvans绘制地图的运动轨迹
07-08
在IT行业中，Canvas是HTML5的一个重要特性，它提供了一个基于矢量图形的画布，开发者可以使用JavaScript来绘制各种动态图像和动画。本话题主要关注如何利用Canvas绘制地图上的运动轨迹，这是一个涉及到地理信息系统...
【Excalidraw揭秘】canvas无限画布及矩形绘制
郊眠寺
03-06 1118
本节我们通过简单的矩形绘制学习如何实现无限画布在绘制前，我们需要矫正 canvas 的分辨率，使用 appState 保存 canvas 相关的信息。新建一个 index.jsx 文件，初始化代码如下： 绘制坐标轴 为方便观察，首先在 canvas 上绘制一个坐标轴。新建一个 renderScene.js 文件，实现 drawAxis 方法： 然后在 index.jsx 中引入 renderScene 效果如下：在开始绘制矩形之前，我们先来看下屏幕坐标系如何转换成 canvas 坐标系。如下图所示，对于 c
清除canvas画布内容(点擦除+线擦除)
11-20
当需要清除Canvas画布内容时，有两种主要方法：重置宽或高以及使用`clearRect`方法。 1. 重置宽或高 这种方法简单直接，通过重新设置Canvas的宽度或高度，其内容将被清空。例如： ```javascript var c = ...
canvans全屏云层交互动画
04-07
它就像一个画布，我们可以用编程的方式来画出各种形状、图像和动画。在Canvas上绘制图形时，主要涉及两个核心方法：`fillRect()`、`strokeRect()`等用于绘制矩形，`beginPath()`、`moveTo()`、`lineTo()`等用于绘制...
原生JS+Canvas实现五子棋游戏
weixin_34149796的博客
06-18 128
一、功能模块 先看下现在做完的效果： 线上体验：https://wj704.github.io/five_...主要功能模块为：1.人机对战功能2.悔棋功能3.撤销悔棋功能 二、代码详解 2.1 人机对战功能实现 从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘： //绘画棋盘 ...
js+canvas实现AI五子棋小游戏_☆往事随風☆的博客
☆往事随風☆的博客
09-09 2613
js实现AI五子棋小游戏一、前言二、开发流程（1）绘制棋盘（2）绘制棋子（3）玩家下棋（4）电脑下棋（5）悔棋功能（6）撤销悔棋功能三、完整游戏效果图四、运行结果展示五、项目源码 一、前言 使用 js+canvas+less 制作一个简易的AI五子棋小游戏。游戏中的AI玩家的实力十分强大,并且带有悔棋功能。这里就简单介绍一下js部分，游戏UI部分请看源码。 二、开发流程 （1）绘制棋盘 这里使用canvas绘制一个 15 x 15大小的棋盘。 // 绘制棋盘 function chessBoard
前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘
学前端的第五个月
05-13 2315
纯js文本编写的五子棋，可以悔棋，实现AI，该文本纯属分享，代码有什么不规范的地方请指点，大神多多指教
canvans的简单介绍
younger_boy的博客
11-17 2941
canvans可以实现很多的动画效果，它使用性能很强大。
web前端之五子棋网页版小游戏
FemaleHacker的博客
07-05 8705
五子棋小游戏 这个五子棋小游戏，没有写成人机模式。 但大家可以尝试下自己饰演两个角色的五子棋，嘻嘻嘻 效果图片 效果 代码 index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>简易五子棋游戏</title> <link rel="stylesheet" href="css/main.css">
canvas绘制简单五子棋棋盘
qq_40072782的博客
08-06 4854
什么是 canvas  &lt;canvas&gt; 是HTML5中用于图形的绘制的元素。&lt;canvas&gt; 标签只是图形容器，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。 Canvas（画布）简介 一个画布在网页中是一个矩形框，通过 &lt;canvas&gt; 元素来绘制. 注意: 默认情况下 &lt;canvas&gt; 元...
vue ref和reactive区别
灰海
08-25 6564
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
最新发布
m0_54066656的博客
08-27 2156
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
js使用canvans贝塞尔曲线绘制花
04-22
很好，对于您的问题，我们可以通过...在主程序中，我们使用 `Math.random` 方法来随机生成花的位置和大小，并在画布上绘制多个花朵。 希望这个例子能够帮助您更好地理解如何使用Canvas和贝塞尔曲线绘制花朵。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值