首页 > 其他分享 >canvas版本的五子棋

canvas版本的五子棋

时间：2024-09-04 15:52:05浏览次数：13  
标签：canvas tmpqizi postmps 五子棋 push 版本 var new tmps

代码：

<!Doctype html>
<html lang="zh_cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>五子棋</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    </head>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #FF0000;bgcolor:#FF0000;">
</canvas>

<script>
var margin = 10;
var pading = 5;
var maxLineNum = 25;
var maxFieldNum = 25;
var posResult = false; //是否已经获胜
var pieceList = new Array(); //棋子列表
var poslist = new Array(); //连子列表
var numIsON = false;
var button_width = 120;
var button_height = 35;
var chongxin_x = 0;
var chongxin_y = 0;
var xianshi_x = 0;
var xianshi_y = 0;
var msg_x = 0;
var msg_y = 0;
var resultMsg = new Array("黑子开始执棋...");

function getUnixTime(){
    return Math.floor(Date.now() / 1000);
}

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

//处理鼠标事件
function doMouseDown(e){
    if(posResult == true){
        return ;
    }
    //console.log("鼠标点击了，坐标："+e.clientX+", "+e.clientY);
    
    var myCanvas = document.getElementById("myCanvas");

    var page_width = window.innerWidth;
    var page_height = window.innerHeight;
    //console.log("页面尺寸：宽："+page_width+"，高："+page_height);

    var paint_width = page_width - 2 * margin - page_width / 5;
    var paint_height = page_height - 2 * margin;
    //console.log("画布尺寸：宽："+paint_width+"，高："+paint_height);

    var left_width = paint_height - 2 * pading;
    var left_height = paint_height - 2 * pading;
    var right_width = paint_width - 2 * pading - left_width;
    var right_height = paint_height - 2 * pading;
    
    var perWidth = left_width / maxFieldNum;
    var perHeight = left_height / maxLineNum;
    
    var rect = myCanvas.getBoundingClientRect();
    //console.log("画布坐标："+rect.left+" ,"+rect.top);
    //console.log("画布尺寸："+rect.width+" ,"+rect.height);
    
    //判断是否点击重新开始按钮
    if(e.clientX > chongxin_x && e.clientX < chongxin_x+button_width && e.clientY > chongxin_y && e.clientY < chongxin_y+button_height){
        //console.log('重新开始按钮被点击了');
        posResult = false; //是否已经获胜
        pieceList = new Array(); //棋子列表
        poslist = new Array(); //连子列表
        numIsON = false;
        resultMsg = new Array("黑子开始执棋...");
        draw();
    }
    
    //判断是否点击显示编号按钮
    if(e.clientX > xianshi_x && e.clientX < xianshi_x+button_width && e.clientY > xianshi_y && e.clientY < xianshi_y+button_height){
        //console.log('显示编号按钮被点击了');
        if(numIsON == true){
            numIsON = false;
        } else if(numIsON == false){
            numIsON = true;
        } else{
            console.log('我擦，你这是什么情况');
        }
        draw();
    }
    
    //下棋区域
    if(e.clientX < left_width+pading+margin && e.clientY < left_height+pading+margin){
        var myx = 0;
        var myy = 0;
        for(var i = 0; i <= maxFieldNum+1; i++){
            var minx = pading+perWidth*i;
            var maxx = pading+perWidth*(i+1);
            if(e.clientX >= minx && e.clientX <= maxx){
                if(Math.abs(e.clientX-minx) < Math.abs(maxx-e.clientX)){
                    myx = i;
                } else{
                    myx = i+1;
                }
            }
        }
        
        for(var i = 0; i <= maxLineNum+1; i++){
            var miny = pading+perHeight*i;
            var maxy = pading+perHeight*(i+1);
            if(e.clientY >= miny && e.clientY <= maxy){
                if(Math.abs(e.clientY-miny) < Math.abs(maxy-e.clientY)){
                    myy = i;
                } else{
                    myy = i+1;
                }
            }
        }
        
        //console.log("鼠标点击的下棋区域，坐标:"+myx+","+myy);
        if(pieceList.length <= 0){
            var mytype = 1;
            var typecn = '黑子';
        } else if(pieceList[pieceList.length-1].type == 0){
            var mytype = 1;
            var typecn = '黑子';
        } else{
            var mytype = 0;
            var typecn = '白子';
        }
        
        var exists = false;
        for(var i = 0; i < pieceList.length; i++){
            if(pieceList[i].x == myx && pieceList[i].y == myy){
                exists = true;
            }
        }
        
        if(exists == false){
            var number = pieceList.length + 1;
            var tmpqizi = new Object();
            tmpqizi.x = myx;
            tmpqizi.y = myy;
            tmpqizi.type = mytype;
            tmpqizi.number = number;
            pieceList.push(tmpqizi);
        }

        var bailist = new Array(); //白子列表
        var heilist = new Array(); //黑子列表
        for(var i = 0; i < pieceList.length; i++){
            if(pieceList[i].type == 0){
                bailist.push(pieceList[i]);
            } else if(pieceList[i].type == 1){
                heilist.push(pieceList[i]);
            } else{
                console.log('居然出现了既不是白子又不是黑子的棋，我擦');
                console.log(pieceList[i]);
            }
        }
        
        //白棋升序排序
        bailist.sort(function (a, b) {
              let nameA = a.y+'_'+a.x;
              let nameB = b.y+'_'+b.x;
              if (nameA < nameB) {
                return -1;
              }
              if (nameA > nameB) {
                return 1;
              }
              return 0;
        });
        
        //黑棋升序排序
        heilist.sort(function (a, b) {
              let nameA = a.y+'_'+a.x;
              let nameB = b.y+'_'+b.x;
              if (nameA < nameB) {
                return -1;
              }
              if (nameA > nameB) {
                return 1;
              }
              return 0;
        });
        
        //console.log(bailist);
        //console.log(heilist);
        
        var res = checkWhoWin(bailist, heilist);
        //console.log(res);
        
        var winner = -1;
        if(res != false){
            posResult = true;
            winner = res[0]
            poslist = res[1]
        }
        
        resultMsg.push(typecn+' 落在'+(myy+1)+'行'+(myx+1)+'列');
        if(posResult == true){
            winnercn = '未知子';
            if(winner == 0){
                winnercn = '白子';
            } else if(winner == 1){
                winnercn = '黑子';
            } 
            resultMsg.push(winnercn+'获胜');
            //console.log(resultMsg);
            numIsON = true;
        }
        
        draw();
    }
}

function checkWhoWin(bailist, heilist){
    for(var i =0; i < bailist.length; i++){
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x+j;
            tmpqizi.y = bailist[i].y;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x-j;
            tmpqizi.y = bailist[i].y;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x;
            tmpqizi.y = bailist[i].y+j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x;
            tmpqizi.y = bailist[i].y-j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x+j;
            tmpqizi.y = bailist[i].y+j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x-j;
            tmpqizi.y = bailist[i].y-j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x+j;
            tmpqizi.y = bailist[i].y-j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = bailist[i].x-j;
            tmpqizi.y = bailist[i].y+j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(bailist, postmps)){
            var tmps = new Array();
            tmps.push(0);
            tmps.push(postmps);
            return tmps;
        }
    }
        
    for(var i =0; i < heilist.length; i++){
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x+j;
            tmpqizi.y = heilist[i].y;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x-j;
            tmpqizi.y = heilist[i].y;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x;
            tmpqizi.y = heilist[i].y+j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x;
            tmpqizi.y = heilist[i].y-j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x+j;
            tmpqizi.y = heilist[i].y+j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x-j;
            tmpqizi.y = heilist[i].y-j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x+j;
            tmpqizi.y = heilist[i].y-j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
        
        var postmps = new Array();
        for(var j =0; j < 5; j++){
            var tmpqizi = new Object();
            tmpqizi.x = heilist[i].x-j;
            tmpqizi.y = heilist[i].y+j;
            postmps.push(tmpqizi);
        }
        if(checkWinPositionList(heilist, postmps)){
            var tmps = new Array();
            tmps.push(1);
            tmps.push(postmps);
            return tmps;
        }
    }
    
    return false;
}

function checkWinPositionList(bailist, poslisttmp){
    for(var i =0; i < poslisttmp.length; i++){
        if(checkWinPositioninfo(bailist, poslisttmp[i]) == false){
            return false;
        }
    }
    return true;
}

function checkWinPositioninfo(poslisttmp, posinfo){
    for(var i =0; i < poslisttmp.length; i++){
        if(poslisttmp[i].x == posinfo.x && poslisttmp[i].y == posinfo.y){
            return true;
        }
    }
    return false;
}

function draw(){
    var myCanvas = document.getElementById("myCanvas");

    var page_width = window.innerWidth;
    var page_height = window.innerHeight;
    //console.log("页面尺寸：宽："+page_width+"，高："+page_height);

    var paint_width = page_width - 2 * margin - page_width / 5;
    var paint_height = page_height - 2 * margin;
    myCanvas.width = paint_width;
    myCanvas.height = paint_height;
    //console.log("画布尺寸：宽："+paint_width+"，高："+paint_height);

    //清理画布
    var ctx = myCanvas.getContext("2d");
    ctx.beginPath();
    ctx.clearRect(0, 0, paint_width, paint_height);

    var left_width = paint_height - 2 * pading;
    var left_height = paint_height - 2 * pading;
    var right_width = paint_width - 2 * pading - left_width;
    var right_height = paint_height - 2 * pading;

    //画布背景
    var ctx = myCanvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "rgb(147,112,219)";
    ctx.fillRect(0,0,paint_width,paint_height);
    //console.log("画布背景尺寸：宽："+paint_width+"，高："+paint_height);

    //左侧背景
    var ctx = myCanvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "rgb(255,250,240)";
    ctx.fillRect(pading,pading,left_width,left_height);
    //console.log("左侧背景尺寸：宽："+left_width+"，高："+left_height);

    //右侧背景
    var ctx = myCanvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "rgb(250,250,210)";
    ctx.fillRect(left_width+pading,pading,right_width,right_height);
    //console.log("右侧背景尺寸：宽："+right_width+"，高："+right_height);

    var perWidth = left_width / maxFieldNum;
    var perHeight = left_height / maxLineNum;

    //横线
    for(var i = 0; i <= maxLineNum; i++){
        var ctx = myCanvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(pading, pading+perHeight*i);
        ctx.lineTo(pading+left_width, pading+perHeight*i);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    //竖线
    for(var i = 0; i <= maxFieldNum; i++){
        var ctx = myCanvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(pading+perWidth*i, pading);
        ctx.lineTo(pading+perWidth*i, pading+left_height);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.stroke();
    }
    
    //画上已经下了的棋子
    for(var i = 0; i < pieceList.length; i++){
        var x = pieceList[i].x;
        var y = pieceList[i].y;
        var type = pieceList[i].type;
        var number = pieceList[i].number;
        if(type == 0){
            var color = 'white';
            var border_color = 'black';
        } else{
            var color = 'black';
            var border_color = 'LawnGreen';
        }
        
        for(var j =0; j < poslist.length; j++){
            if(poslist[j].x == x && poslist[j].y == y){
                var border_color = 'red';
            }
        }
        
        var ctx = myCanvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(perWidth*x+pading,pading+y*perHeight,perWidth/2.5,0,2*Math.PI);
        ctx.fillStyle = color;
        ctx.lineWidth='1';
        ctx.strokeStyle = border_color;
        ctx.fill();
        ctx.stroke();
        
        if(numIsON == true){
            ctx.fillStyle=border_color;
            ctx.font="12px Arial";
            ctx.fillText(number, perWidth*x+pading-perWidth/6.5, pading+y*perHeight+perHeight/5.5);
        }
    }
    
    //重新开始按钮
    chongxin_x = left_width+pading+right_width/10;
    chongxin_y = pading+right_height/30;
    var ctx = myCanvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "rgb(205,155,29)";
    ctx.fillRect(chongxin_x,chongxin_y,button_width,button_height);
    
    ctx.fillStyle='white';
    ctx.font="14px Arial";
    ctx.fillText('重新开始', chongxin_x+button_width/3.5,chongxin_y+button_height/1.6);
    
    //显示编号按钮
    xianshi_x = left_width+pading+right_width/9+button_width;
    xianshi_y = pading+right_height/30;
    var ctx = myCanvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "rgb(205,155,29)";
    ctx.fillRect(xianshi_x,xianshi_y,button_width,button_height);
    
    var showNumText = '显示编号';
    if(numIsON == true){
        showNumText = '隐藏编号';
    }
    ctx.fillStyle='white';
    ctx.font="14px Arial";
    ctx.fillText(showNumText, xianshi_x+button_width/3.5,xianshi_y+button_height/1.6);
    
    //显示获胜信息
    if(resultMsg.length > 0){
        var maxmsgnum = 40;
        var startIndex = resultMsg.length-maxmsgnum>0 ? resultMsg.length-maxmsgnum : 0;
        var endIndex = resultMsg.length;
        //console.log(startIndex);
        //console.log(endIndex);
        var resultMsg1 = resultMsg.slice(startIndex, endIndex);
        for(var i = 0; i < resultMsg1.length; i++){
            msg_x = left_width+pading+button_width/2;
            msg_y = pading+right_height/8+18*i;
            var ctx = myCanvas.getContext("2d");
            ctx.beginPath();
            ctx.fillStyle='IndianRed';
            ctx.font="14px Arial";
            ctx.fillText("["+(startIndex+1+i)+"]"+resultMsg1[i], msg_x,msg_y);
        }
    }
    
    myCanvas.addEventListener('mousedown', doMouseDown,true);
    myCanvas.focus();
    //window.addEventListener('mousedown', doMouseDown, true);
}

draw();

</script>

</body>
</html>

 

图：

 

标签：canvas,tmpqizi,postmps,五子棋,push,版本,var,new,tmps
From： https://www.cnblogs.com/xuxiaobo/p/18396703

相关文章

  • 纯前端Canvas绘制海报
    封装类：/***Canvas绘制海报*/classPoster{canvas:HTMLCanvasElement;context:CanvasRenderingContext2D;constructor(el:string,width:number,height:number){constcanvas=document.querySelector<HTMLCanvasElement>(el);if(canvas......
  • 数字人直播阿凡达模式2.0版本揭秘：灰豚运用了哪些黑技术？
    随着数字人直播的应用频率不断提升，其在帮助企业降本增效方面的潜力也随之显现，刺激市场需求的同时，也让用户对它的期待值持续增长。在此背景下数字人源码厂商开始不断加大研发力度，以推动数字人直播技术的持续升级，数字人直播阿凡达模式2.0版本的上线便是典型案例之一。本期，小编......
  • Sqldbx连接OracleX64位，前一个版本放少东西了
    在IT行业中，数据库管理和连接工具是至关重要的。本问题涉及的是使用Sqldbx这款软件连接64位Oracle数据库时遇到的问题及其解决方案。我们来详细解析这个问题的背景和解决方案。标题“Sqldbx连接OracleX64位，前一个版本放少东西了”指出，用户在尝试使用Sqldbx连接到Oracle64位数据库......
  • Win11最强版本专业工作站版密钥升级
    微软最新的Windows11专业工作站版（Windows11ProforWorkstations）凭借其强大的性能、丰富的功能和优越的稳定性，成为了追求极致性能的用户首选。本文将为您详细介绍为什么Windows11专业工作站版是最强版本，以及它能够如何帮助您提升工作效率和计算能力。Windows11专业工作站版......
  • DNF完美仿官90版本单机安装教程 + 虚拟机一键端
    前言今天给大家带来一款单机游戏的架设：地下城与勇士90版单机安装。另外：本人承接各种游戏架设（单机+联网）本人为了学习和研究软件内含的设计思想和原理，带了架设教程仅供娱乐。教程是本人亲自搭建成功的，绝对是完整可运行的，踩过的坑都给你们填上了。如果你是小白也没问题，跟着教......
  • 【在 Apipost 8.1.2 版本上定义全局变量】
    场景：`在Apipost8.1.1版本上定义全局变量问题描述1.在Apipost7.2.6版本上正常运行的脚本，同步到Apipost8.1.1版本上执行报错。提示变量未定义：以下是报错的变量。apt.variables.set("token",response.json.access_token);console.log(response.json.access_......
  • pom.xml里配置私服发布地址并总是取最新快照版本
    在工程pom.xml下配置：<distributionManagement><snapshotRepository><id>maven-snapshots</id><url>http://your_host:port/repository/maven-snapshots/</url><snapshots>......
  • Nginx中的 限流和屏敝版本号
    server{location/{#应用请求频率限制配置limit_req模块用于限制客户端请求的频率，以防止单一客户端占用过多服务器资源，提升稳定性。#zone=one引用名为"one"的共享内存区域#burst=10允许短时间内突发最多10个请求#nodela......
  • AWC 批量查询使用关系的最新版本并导出Excel
    1.查询使用关系的方法：*调用查询返回数据 *@param{Object}data *@returns{Promise} **/exportletqueryItemRevisionById=function(data){  if(!data.item_id){    messagingService.showInfo("请输入查询条件");    return;  ......
  • MongoDB 从4.4到7.0各个版本特性概览
    速览本文将从以下方面介绍数据库MongoDB4.4、5.0、6.0、7.0版本：MongoDB4.4新特性隐藏索引（HiddenIndexes）重定义分片键（RefinableShardKeys）复合哈希分片键（CompoundHashedShardKeys）对冲读（HedgedReads）同步建索引（SimultaneousIndexing）复制读请求（MirroredReads）基于时间保留Opl......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99