canvas 五子棋游戏

2019-02-12 admin

效果

--_055

代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    (function () {    // 画布绘制
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");
        context.beginPath();
        for (let i = 0; i < 19; i++) {
            // 竖线绘制
            context.moveTo(10 + i * 20, 10);
            context.lineTo(10 + i * 20, 370);
            // 横线绘制
            context.moveTo(10, 10 + i * 20);
            context.lineTo(370, 10 + i * 20);
        }
        context.stroke();
    })();
    // 鼠标单击
    let blorwh = 0;
    // 定义用于判断落子的二维数组
    let matrix = new Array(19);
    // 进行赋值
    for(let i = 0; i < 19; i++){
        matrix[i] = new Array(19);
        for(let j = 0; j < 19; j++){
            matrix[i][j] = 0;
        }
    }
    $("#canvas").click((event) => {
        // 每次落子的时候取反
        blorwh = !blorwh;
        console.log(event.offsetX);
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");
        // 保存要落子的坐标
        let arcPosX, arcPosY;
        // 保存棋子在数组中的位置
        let mtxPosX, mtxPosY;
        // 和每一条线进行比较,如果相差10个像素以内,即,靠近
        for(let x = 0; x < 19; x++){
            if(Math.abs(event.offsetX - (10 + x * 20)) < 10){
                // 获得需要骡子的x
                arcPosX = 10 + x * 20;
                mtxPosX = x;
            }
            if(Math.abs(event.offsetY - (10 + x * 20)) < 10){
                // 获得需要的y
                arcPosY = 10 + x * 20;
                mtxPosY = x;
            }
        }
        // 画出棋子
        // 落子为空,进行绘制,反之不绘制
        if(matrix[mtxPosX][mtxPosY] == 0) {
            context.beginPath();
            if (blorwh) {
                context.fillStyle = "white";
                context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
                context.stroke();
                // 白子为1
                matrix[mtxPosX][mtxPosY] = 1;
            } else {
                context.fillStyle = "black";
                context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
                // 黑子为2
                matrix[mtxPosX][mtxPosY] = 2;
            }
            context.fill();
        }
        // 获胜检测
        if(matrix[mtxPosX - 1][mtxPosY] == matrix[mtxPosX][mtxPosY] &&
            matrix[mtxPosX - 2][mtxPosY] == matrix[mtxPosX][mtxPosY]  &&
                matrix[mtxPosX -3][mtxPosY] == matrix[mtxPosX][mtxPosY]  &&
                    matrix[mtxPosY - 4][mtxPosY] == matrix[mtxPosX][mtxPosY]){
            if(matrix[mtxPosX][mtxPosY] == 1){
                alert("白方获胜");
            }else{
                alert("黑方获胜");
            }
        }
    })
</script>
</body>
</html>

思路

创建数组用于保存五子棋的位置即可。 输赢判断使用遍历即可 重复落棋用判断保存的数组的位置是否已经有棋子即可 落在交叉线和附近的点判断,如果相差小于一定数值进行落棋。

图片描述

原文链接:https://segmentfault.com/a/1190000018120965

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53541.html

文章标题:canvas 五子棋游戏

相关文章
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下: 手机版的拼图。pc上用Chrome 或者 Firefox var R=(function(){ &#x2F;*右边菜单*&#x2F; functi...
2017-03-27
使用canvas及js简单生成验证码方法
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是: 1.生成一张画布canvas 2.生成随机数验证码  3.在画布中生成干扰线  4.把验证码文本填充到画布中  5.点击画布更换验证码 结构...
2017-04-05
javascript实现仿腾讯游戏选择
到我们玩腾讯游戏的时候,会有很多选择,比如选择什么区,什么人物等。下面简单制作腾讯游戏选择。 &lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-23
js+html5绘制图片到canvas的方法
本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;canvas id=&quot;m...
2017-03-24
纯HTML5制作围住神经猫游戏-附源码下载
HTML5围住神经猫游戏网页版是一款基于HTML5、jquery、Typescript等技术制作的围住神经猫游戏。 去年风靡微信朋友圈的小游戏“围住神经猫”,我也试着做了一下。游戏是用Egret引擎开发的,因为Egret是用Typescri...
2017-03-30
Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可 1:图片是通过image对象形式绘制在画布上的,然后使用...
2017-03-20
使用纯javascript实现经典扫雷游戏
很久以前写的 当时都没写注释的 刚加上了 (尼玛,好多自己都不认识了 … ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说 然后就等好久好久…) 还有就是没有实现:点击第一个格子不能是雷的功能 &lt;styl...
2017-03-22
javascript制作2048游戏
2048.html &lt;!DOCTYPE&gt; &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&gt; &lt;head&gt; ...
2017-03-22
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考。具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,...
2017-03-29
JS数字抽奖游戏实现方法
本文实例讲述了JS数字抽奖游戏实现方法。分享给大家供大家参考。具体实现方法如下: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&qu...
2017-03-23
回到顶部