HTML制作五子棋

2023-09-17 14:24:07

上代码

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=0.7"> 
  <meta charset="utf-8"> 
  <title>源技五子棋</title> 
  <style type="text/css">
            canvas {
                display: block;
                margin: 50px auto;
                box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
                cursor: pointer;
            }
            .btn-wrap { 
                display: flex; 
                flex-direction: row; 
                justify-content:center;
            }
            .btn-wrap div { 
                margin: 0 10px;
            }
            div>span {
                display: inline-block;
                padding: 20px 40px;
                color: #fff;
                background-color: #FF0000;
                border-radius: 5px;
                cursor: pointer;
            }
            div.unable span { 
                background: #D6D6D4; 
                color: #adacaa;
            }
            #result-wrap {text-align: center;}
        </style> 
  <script src="js/jq.js"></script> 
 </head> 
 <body id="v1"> 
  <h3 id="result-wrap">--益智五子棋--</h3> 
  <canvas id="chess" width="450px" height="450px"> 
  </canvas> 
  <div id="v2" class="btn-wrap"> 
   <div id="restart" class="restart"> 
    <span id="v4">重新开始</span> 
   </div> 
   <div id="goback" class="goback "> 
    <span id="v6">悔棋
    
     </canvas></span> 
   </div> 
   <div id="return" class="return "> 
    <span id="v8">撤销悔棋</span> 
   </div> 
  </div> 
  <script type="text/javascript" charset="utf-8">
            var over = false;
            var me = true; //我
            var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
            var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
            var _myWin = [], _compWin = []; //记录我，计算机赢的情况
            var backAble = false, returnAble = false; 
            var resultTxt = document.getElementById('result-wrap');
            var chressBord = [];//棋盘
            for(var i = 0; i < 15; i++){
                chressBord[i] = [];
                for(var j = 0; j < 15; j++){
                    chressBord[i][j] = 0;
                }
            }
            //赢法的统计数组
            var myWin = [];
            var computerWin = [];
            //赢法数组
            var wins = [];
            for(var i = 0; i < 15; i++){
                wins[i] = [];
                for(var j = 0; j < 15; j++){
                    wins[i][j] = [];
                }
            }
            var count = 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;
                    }
                    count++;
                }
            }
            //竖线赢法
            for(var i = 0; i < 15; i++){
                for(var j = 0; j < 11; j++){
                    for(var k = 0; k < 5; k++){
                        wins[j+k][i][count] = true;
                    }
                    count++;
                }
            }
            //正斜线赢法
            for(var i = 0; i < 11; i++){
                for(var j = 0; j < 11; j++){
                    for(var k = 0; k < 5; k++){
                        wins[i+k][j+k][count] = true;
                    }
                    count++;
                }
            }
            //反斜线赢法
            for(var i = 0; i < 11; i++){ 
                for(var j = 14; j > 3; j--){
                    for(var k = 0; k < 5; k++){
                        wins[i+k][j-k][count] = true;
                    }
                    count++;
                }
            }
            // debugger;
            for(var i = 0; i < count; i++){
                myWin[i] = 0;
                _myWin[i] = 0;
                computerWin[i] = 0;
                _compWin[i] = 0;
            }
            var chess = document.getElementById("chess");
            var context = chess.getContext('2d');
            context.strokeStyle = '#bfbfbf'; //边框颜色
            var backbtn = document.getElementById("goback");
            var returnbtn = document.getElementById("return");
            window.onload = function(){
                drawChessBoard(); // 画棋盘
            }
            document.getElementById("restart").onclick = function(){
                window.location.reload();
            }
            // 我，下棋
            chess.onclick = function(e){
                if(over){
                    return;
                }
                if(!me){
                    return;
                }
                // 悔棋功能可用
                backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
                var x = e.offsetX;
                var y = e.offsetY;
                var i = Math.floor(x / 30);
                var j = Math.floor(y / 30);
                _nowi = i;
                _nowj = j;
                if(chressBord[i][j] == 0){
                    oneStep(i,j,me);
                    chressBord[i][j] = 1; //我，已占位置        
                                
                    for(var k = 0; k < count; k++){ // 将可能赢的情况都加1
                        if(wins[i][j][k]){
                            // debugger;
                            myWin[k]++;
                            _compWin[k] = computerWin[k];
                            computerWin[k] = 6;//这个位置对方不可能赢了
                            if(myWin[k] == 5){
                                // window.webtools-static-lert('你赢了');
                                resultTxt.innerHTML = '恭喜，你赢了！';
                                over = true;
                            }
                        }
                    }
                    if(!over){
                        me = !me;
                        computerAI();
                    }
                }         
            }
            // 悔棋
            backbtn.onclick = function(e){
                if(!backAble) { return;}
                over = false;
                me = true;
                // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
                // 撤销悔棋功能可用
                returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
                // 我，悔棋
                chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
                minusStep(_nowi, _nowj); //销毁棋子                                  
                for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
                    if(wins[_nowi][_nowj][k]){
                        myWin[k]--;
                        computerWin[k] = _compWin[k];//这个位置对方可能赢
                    }
                }
                // 计算机相应的悔棋
                chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
                minusStep(_compi, _compj); //销毁棋子                                  
                for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
                    if(wins[_compi][_compj][k]){
                        computerWin[k]--;
                        myWin[k] = _myWin[i];//这个位置对方可能赢
                    }
                }
                resultTxt.innerHTML = '--益智五子棋--';
                returnAble = true;
                backAble = false;
            }
            // 撤销悔棋
            returnbtn.onclick = function(e){
                if(!returnAble) { return; }
                   // 我，撤销悔棋
                chressBord[_nowi][_nowj] = 1; //我，已占位置 
                oneStep(_nowi,_nowj,me);                              
                for(var k = 0; k < count; k++){ 
                    if(wins[_nowi][_nowj][k]){
                        myWin[k]++;
                        _compWin[k] = computerWin[k];
                        computerWin[k] = 6;//这个位置对方不可能赢
                    }
                    if(myWin[k] == 5){
                        resultTxt.innerHTML = '恭喜，你赢了！';
                        over = true;
                    }
                }
                // 计算机撤销相应的悔棋
                chressBord[_compi][_compj] = 2; //计算机，已占位置   
                oneStep(_compi,_compj,false);                               
                for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
                    if(wins[_compi][_compj][k]){
                        computerWin[k]++;
                        _myWin[k] = myWin[k];
                        myWin[k] = 6;//这个位置对方不可能赢
                    }
                    if(computerWin[k] == 5){
                        resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
                        over = true;
                    }
                }
                returnbtn.className += ' '+ 'unable';
                returnAble = false;
                backAble = true;
            }
            // 计算机下棋
            var computerAI = function (){
                var myScore = [];
                var computerScore = [];
                var max = 0;
                var u = 0, v = 0;
                for(var i = 0; i < 15; i++){
                    myScore[i] = [];
                    computerScore[i] = [];
                    for(var j = 0; j < 15; j++){
                        myScore[i][j] = 0;
                        computerScore[i][j] = 0;
                    }
                }
                for(var i = 0; i < 15; i++){
                    for(var j = 0; j < 15; j++){
                        if(chressBord[i][j] == 0){
                            for(var k = 0; k < count; k++){
                                if(wins[i][j][k]){
                                    if(myWin[k] == 1){
                                        myScore[i][j] += 200;
                                    }else if(myWin[k] == 2){
                                        myScore[i][j] += 400;
                                    }else if(myWin[k] == 3){
                                        myScore[i][j] += 2000;
                                    }else if(myWin[k] == 4){
                                        myScore[i][j] += 10000;
                                    }
                                    
                                    if(computerWin[k] == 1){
                                        computerScore[i][j] += 220;
                                    }else if(computerWin[k] == 2){
                                        computerScore[i][j] += 420;
                                    }else if(computerWin[k] == 3){
                                        computerScore[i][j] += 2100;
                                    }else if(computerWin[k] == 4){
                                        computerScore[i][j] += 20000;
                                    }                        
                                }
                            }
                            
                            if(myScore[i][j] > max){
                                max  = myScore[i][j];
                                u = i;
                                v = j;
                            }else if(myScore[i][j] == max){
                                if(computerScore[i][j] > computerScore[u][v]){
                                    u = i;
                                    v = j;    
                                }
                            }
                            
                            if(computerScore[i][j] > max){
                                max  = computerScore[i][j];
                                u = i;
                                v = j;
                            }else if(computerScore[i][j] == max){
                                if(myScore[i][j] > myScore[u][v]){
                                    u = i;
                                    v = j;    
                                }
                            }
                            
                        }
                    }
                }
                _compi = u;
                _compj = v;
                oneStep(u,v,false);
                chressBord[u][v] = 2;  //计算机占据位置
                for(var k = 0; k < count; k++){
                    if(wins[u][v][k]){
                        computerWin[k]++;
                        _myWin[k] = myWin[k];
                        myWin[k] = 6;//这个位置对方不可能赢了
                        if(computerWin[k] == 5){
                            resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
                            over = true;
                        }
                    }
                }
                if(!over){
                    me = !me;
                }
                backAble = true;
                returnAble = false;
                var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
                if(!hasClass) {
                    returnbtn.className += ' ' + 'unable';
                }
            }
            //绘画棋盘
            var drawChessBoard = function() {
                for(var i = 0; i < 15; i++){
                    context.moveTo(15 + i * 30 , 15);
                    context.lineTo(15 + i * 30 , 435);
                    context.stroke();
                    context.moveTo(15 , 15 + i * 30);
                    context.lineTo(435 , 15 + i * 30);
                    context.stroke();
                }
            }
            //画棋子
            var oneStep = function(i,j,me) {
                context.beginPath();
                context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
                context.closePath();
                //渐变
                var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
                if(me){
                    gradient.addColorStop(0,'#0a0a0a');
                    gradient.addColorStop(1,'#636766');
                }else{
                    gradient.addColorStop(0,'#d1d1d1');
                    gradient.addColorStop(1,'#f9f9f9');
                }
                context.fillStyle = gradient;
                context.fill();
            }
            //销毁棋子
            var minusStep = function(i,j) {
                //擦除该圆
                context.clearRect((i) * 30, (j) * 30, 30, 30);
                // 重画该圆周围的格子
                context.beginPath();
                context.moveTo(15+i*30 , j*30);
                context.lineTo(15+i*30 , j*30 + 30);
                context.moveTo(i*30, j*30+15);
                context.lineTo((i+1)*30 , j*30+15);
    
                context.stroke();
            }
        </script> 
  <script src="js/jq.js"></script>  
 </body>
</html>

 

更多推荐

Leetcode.2826 将三个组排序

题目链接Leetcode.2826将三个组排序rating:1721题目描述给你一个下标从000开始长度为nnn的整数数组numsnumsnums。从000到n−1n-1n−1的数字被分为编号从111到333的三个组，数字iii属于组nums[i]nums[i]nums[i]。注意，有的组可能是空的。你可以执行以下操作

[C语言]栈与队列——喵喵队，冲冲冲

宝子，你不点个赞吗？不评个论吗？不收个藏吗？最后的最后，关注我，关注我，关注我，你会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要。目录前言栈栈的实现队列队列的实现总结前言实践，实践，实践，多练几遍力扣，牛客的题。落实到脚下。栈栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作

Ubuntu安装RabbitMQ server - 在外远程访问

文章目录前言1.安装erlang语言2.安装rabbitMQ3.内网穿透3.1安装cpolar内网穿透(支持一键自动安装脚本)3.2创建HTTP隧道4.公网远程连接5.固定公网TCP地址5.1保留一个固定的公网TCP端口地址5.2配置固定公网TCP端口地址前言RabbitMQ是一个在AMQP(高级消息队列协议)基础上完

单例模式的安全写法

要想知道怎么写单例模式，那么必须得知道什么是单例模式。单例模式是一种设计模式，它确保某个类只有一个实例，并且提供一个全局访问该实例的方法。单例模式不会创建实例副本，而是返回对已创建实例的引用。单例模式的创建可以分为两类。第一类是饿汉式单例模式，它在类加载时就创建了唯一的实例对象，并在全局范围内提供访问点。第二类是懒汉式

如何制作一个成功的超市购物小程序

随着互联网的普及和移动支付的便捷性，越来越多的消费者选择在网上购物，这也促使越来越多的商家开始搭建自己的小程序商城。对于超市便利店来说，拥有一个便捷、易用的小程序商城能够吸引更多的消费者，提高销售效率。那么如何快速搭建一个超市便利店小程序呢？下面我们将通过乔拓云平台来介绍这个过程。步骤1：登录乔拓云网后台，进入商城管理

rabbitmq 面试题

1.交换机类型RabbitMQ是一个开源的消息队列系统，它支持多种交换机类型，用于在消息的生产者和消费者之间路由和分发消息DirectExchange（直接交换机）：Direct交换机是最简单的交换机类型之一。它将消息按照消息的RoutingKey（路由键）与绑定的队列的RoutingKey进行精确匹配，并将消息发送到

一键自助建站系统源码带安装教程 傻瓜式部署搭建,让您的建站更高效

在这个数字时代，网站已成为企业或个人展示形象、推广业务的重要工具。为了满足这一需求，许多自助建站系统应运而生，大大降低了用户建站的门槛。给大家分享一款傻瓜式部署搭建的一键自助建站系统源码，让您轻松拥有高效建站能力。一、一键自助建站系统源码介绍这款一键自助建站系统源码具有以下特点：简单易用：用户只需通过简单的鼠标点击和输

Golang Gorm 一对多 关联模式 Association + Find 查询关联

查找关联//User拥有并属于多种language，`user_languages`是连接表typeUserstruct{gorm.ModelLanguages[]Language`gorm:"many2many:user_languages;"`}typeLanguagestruct{gorm.ModelNamest

I Pa?sWorD

2023icpc网络赛第一场I题意：题目给出只包含大小写字母，数字以及'?'的字符串，对于每一个小写字母，这一位字符既有可能是该小写字母，也有可能是该小写字母的对应大写字母，也就是该位的字符有两种可能，对于问号，可能是所有大写字母或者所有小写字母，或者所有单数字，则共有62种情况，而对于大写字母和数字位则都是确定的只有

Hive【非交互式使用、三种参数配置方式】

前言今天开始学习Hive，因为毕竟但凡做个项目基本就避不开用Hive，争取这学期结束前做个小点的项目。第一篇博客内容还是比较少的，环境的搭建配置太琐碎没有写。Hive常用使用技巧交互式使用就是我们正常的进入hive命令行下的使用模式。非交互式使用所谓非交互式，也就是不需要进入hive命令行，直接在我们linuxShel

STViT-R 代码阅读记录

目录一、SwinTransformer1、原理2、代码二、STViT-R1、中心思想2、代码与原文本次不做具体的训练。只是看代码。所以只需搭建它的网络，执行一次前向传播即可。一、SwinTransformer1、原理主要思想，将token按区域划分成窗口，只需每个窗口内的token单独进行self-attention。

热文推荐
  1. JavaEE——网络编程(TCP流编程)

    文章目录一、解释什么是TCP流套接字编程二、代码实现TCP流套接字创建客户端服务器1.实现回显服务器(1)服务器对客户端响应的问题分析解决(2)回显服务器代码整体罗列2.实现回显客户端(1)回显客户端整体代码罗列(2)对代码中整体存在的小问题分析三、总结与运行结果展示一、解释什么是TCP流套接字编程在上一篇文章中，我向

  2. 51单片机4【玩转开发板】

    1.开发板完全介绍1.配件2.开发板主板及板载原件1.单片机（1）注意不要装反了，凹槽的一面向上是正的（2）不要再开电的时候取下或者装上。2.单片机工作必备的外围电路1.晶振2.复位电路3.电源供电电路4.USB下载电路3.其他的外围设备（1）数码管(2)插口（3）电池（4）独立按键矩阵按键3.上电前的准备工作1.检查

  3. 服务器为什么要一直开机？

    很多人在选择服务器的时候会想要省钱，然后就想要自己搭建一个服务器，其实服务器呢是需要24小时一直开机的，一般服务器的工作时间是3-5年，它们第一次开机后就会一直到机器故障淘汰才会关机哦，这是为什么呢？今天就让小编来讲一讲吧。首先我们来讲一讲服务器本身，服务器是在网络中为PC端、智能手机登提供计算应用服务的，就像服务器如

  4. Android的View绑定实现----编译时注解实现findViewById和setOnClickListener方式

    标题有点长，相信用过xUtils和ButterKnife框架的都知道啥意思，他们都可以通过注解的方式省去繁琐的findViewById和setOnClickListener代码的编写。他们2者的实现原理不一样，前者用的是运行时注解，后者用的是编译时注解，对于不同的注解,会有不同的注解处理器,针对运行时注解会采用反射机制

  5. Java高级-反射

    目录认识反射、获取类反射（Reflection）反射可进行的操作加载类，获取类的字节码：Class对象获取对象的三种方法获取构造器对象并使用获取构造器的方法获取构造器的作用获取成员变量和方法对象并使用获取类的成员变量的方法获取类的成员变量的作用获取成员方法的方法获取成员方法的作用认识反射、获取类反射（Reflectio

  6. JVM--Java类加载器笔记

    Java类加载器代码经过编译变成了字节码打包成Jar文件。让JVM去加载需要的字节码，变成持久代/元数据区上的Class对象，接着执行程序逻辑。类声明周期和加载过程步骤：加载->链接（校验->准备->解析）->初始化->使用->卸载加载：根据明确知道的class完全限定名,来获取二进制classfile格式的字节流（找

  7. 算法讨论题 —— Java实现两数之和

    给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。即:每个index上的数字只能用一次。示例给定nums=[2,7,11,15],target=9因为nums[0]+nums[1]=2+7=9所以返回[0,1]解答这个题目的原题是在：力扣（Leet

  8. Zookeeper分布式锁的概念及原理

    文章目录1.Zookeeper分布式锁的概念2.分布式锁的实现方式3.Zookeeper分布式锁的原理1.Zookeeper分布式锁的概念分布式锁的概念图如下：一种演变过程。在我们进行单机应用程序开发时，往往会涉及到并发同步的问题，一般都会采用synchronized或者Lock锁的方式来解决多线程间的代码同步问题，这

  9. EM3DANI包详解：使用Julia语言进行3D频域电磁数据建模的终极指南

    第一部分：EM3DANI包的简介与安装1.EM3DANI包简介EM3DANI是一个强大的工具包，专门为那些希望使用Julia语言进行频域电磁（CSEM和MT）数据的3D建模的研究者和开发者设计。它支持各向同性和各向异性建模，使得用户可以更加灵活地进行电磁数据的模拟和分析。频域电磁（CSEM和MT）技术在地球物理勘探、矿