五子棋网页版

news/2024/12/2 23:40:08/

基于js的五子棋教程

先给出问题,然后一步一步的去解决;

  • 需要的知识:html,css,js基础语法,包括创建对象和继承属性;
  • 需要的知识很少,就是js的创建对象,如果不会就去看一下书吧。
  • 整个js都是基于一个叫xuanran 的对象来操作的,所以请大家一边看教程,一遍对照源码,源码很短一共不到200行

面临的问题

  1. 第一个问题,就是这个棋盘怎么显示;
  2. 棋盘显示后,接下来的问题就是,怎么点一下,在一个特定的点显示出一个圆点。
  3. 上面两个问题解决了,五子棋的面貌就存在了,接下来是,怎么把五子棋的位置用变量描述出来,用于量化和计算。
  4. 这一步的问题是,怎么利用棋子的位置变量,计算某一时刻棋子的输赢。判断输赢
    • 以上:这就是制作五子棋按顺序要面临的四个问题,接下来我会按顺序一步一步的解决这四个问题。所有源码和素材可以找我私发

第一个问题

这个问题是怎么显示一个棋盘,是一个渲染问题,渲染这个词不是什么很高级的词,对于网页来说,我想到两种办法,一个是直接一个棋盘图片,另一个是canvas,canvas是个html标签,它在DOM中的对象有很多画图属性,他是一个块级标签,如果用这个就是直接取坐标绘画,我上学期做的MFC版的五子棋就是这个办法,我这次用的是背景图片,比较简单,直接绘图版的我有用MFC做过一个,我也写了实验报告,想参考的同学可以看一下,我把连接给出来:MFC版五子棋;

  • 现在进入正题,用一个图片来显示五子棋’

    ‘就用这个来作为一个棋盘它的css是’’’

    #qipan {/*棋盘的大小格式*/width: 500px;height: 500px;background: url(../imgs/board.jpg);background-size: cover;margin-left: 30%;padding-left: 4px;padding-top: 4px;
    }
    

这样就画出了一个棋盘;第一步OK

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIZ3JBXR-1593344020745)(csdn/board.jpg)]

第二个问题

怎么显示棋子呢;和点一下出现一个棋子

  1. 首先先根据图片棋盘的大小,15*15d大小,它的大小是500px,在css中有设置,所以每一个棋子的大小是500px/(15+1)=31;这里加1是为了让两个棋子间有空隙

  2. 下面是创造15*15=225个’

    '标签;每一个标签都代表一个棋子,通过设置css属性让每一个棋子变为一个圆形,下面先给出显示的js代码

    ‘’’

    for (var i = 1; i <= 15 * this.qipannum; i++) { //创建div,这个是1是为了计算行列值方便var a = document.createElement("div");a.setAttribute("data", i);a.className = "qizi";document.getElementById('qipan').appendChild(a); //把div放进棋盘div里
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EifpxUYO-1593344020747)(csdn/qizi.png)]

  3. 这样就显示了15*15个棋子,从左到右,从上到下,每一个棋子都有一个id数值序号,这样五子棋就做好了,但是一开始肯定是不显示的,点击一下才会显示,所以它的css属性初始为’’’

    .qizi {/*棋子的大小格式*/width: 30.5px;height: 30.5px;margin: 1.2px;display: inline-block;border-radius: 50%;/*初始状态如果不设置背景属性就是空白的,不显示*/
    }
    
    1. 现在这些棋子一开始都不显示,我们为每一个div都添加一个事件处理函数,点击一下就改变一下这个div的css属性,关键代码是:’’’

      var y = _this.location(ev).y,x = _this.location(ev).x;
      if (_this.data[y][x].qizicontion == 0) {if (_this.role == 0) //白棋{target.style.background = 'aliceblue'; //让这个棋子的颜色显示出来_this.role = 1;_this.data[y][x].qizicontion = 1; //表示白色} else {target.style.background = 'black';_this.role = 0;_this.data[y][x].qizicontion = 2; //表示黑色}
      
      1. 上面的代码中有一个location函数,这个函数是取一个div的坐标的函数,它的代码是’’’

        xuanran.prototype.location = function(ev) { //给出div的dom对象,判断出这个div的x,y坐标。行列都取决于这个var _this = this; //这个必须要设置,在别的函数调用该函数的时候,_this还是指向的对象var target = ev.target;var data = target.getAttribute('data'); //获取到第N个divvar y = Math.ceil(data / 15); //表示第y行var x = (data % 15); //表示列if (x == 0) x = 15;return { y: y - 1, x: x - 1 }; //返回一个json,包括div的x,y坐标
        }
        

        现在,棋子问题也解决了OK,会出现下面这个效果

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9pzyu9mJ-1593344020749)(csdn/qizi2.png)]

第三个问题

  1. 上面的location函数,可以获取到每一个div棋子的x,y行竖直坐标,那为何我们不设置一个二维数组来储存它的属性呢?

    ‘’’

    xuanran.prototype.initshuzu = function() { //初始化数组var _this = this;for (var i = 0; i < 15; i++) { //每一行y_this.data[i] = new Array();for (var ii = 0; ii < 15; ii++) { //每一列x_this.data[i][ii] = { qizicontion: 0 }} //每个元素代表一个棋子,0是没有下棋,1是白棋,2是黑棋}}
    

    这个函数,就是初始化数组函数,它会令这个数组,初始化,每一个数组元素保存的都是一个json状态变量。表示棋子的状态

最后一个问题

  • 判断输赢,就是遍历每一行

怎么在某个方向上判断输赢,上下,左右,正斜,反斜;

  1. 先设置两个变量作为棋子在某一行的连在一起的数量。

  2. 设置两个嵌套的for循环,一个代表列,一个代表行,用于遍历数组

  3. 对一行的遍历,直接用逻辑表达式判断是否有五个状态变量qizicontion是否五个连在一起都一样,如果一样就令响应的白或者黑变量,设置为5

  4. 遍历的算法有很多,我这个和之前的MFC版的也不同,怎么样都行,如果你想不到什么好的办法,就用我这个,细节我在源码的注释中写的很清楚了,不做太多解释了,请看源码

    ‘’’

    xuanran.prototype.panduanshuying = function() { //判断输赢var _this = this;var bai = 1,hei = 1; //初始临时变量//先竖直判断for (var i = 0; i < _this.qipannum; i++) { //列for (var q = 0; q < _this.qipannum - 4; q++) { //行遍历量,放第二级,减4最后留出五个做判断if (_this.data[q][i].qizicontion == 1 && _this.data[q + 1][i].qizicontion == 1 &&_this.data[q + 2][i].qizicontion == 1 && _this.data[q + 3][i].qizicontion == 1 && _this.data[q + 4][i].qizicontion == 1) { //直接判断有没有连续的五个在一起bai = 5;}if (_this.data[q][i].qizicontion == 2 && _this.data[q + 1][i].qizicontion == 2 && _this.data[q + 2][i].qizicontion == 2 &&_this.data[q + 3][i].qizicontion == 2 && _this.data[q + 4][i].qizicontion == 2) {hei = 5;}}}//判断竖直for (var i = 0; i < _this.qipannum; i++) { //行遍历量for (var q = 0; q < _this.qipannum - 4; q++) { //列if (_this.data[i][q].qizicontion == 1 && _this.data[i][q + 1].qizicontion == 1 &&_this.data[i][q + 2].qizicontion == 1 && _this.data[i][q + 3].qizicontion == 1 && _this.data[i][q + 4].qizicontion == 1) { //直接判断有没有连续的五个在一起bai = 5;}if (_this.data[i][q].qizicontion == 2 && _this.data[i][q + 1].qizicontion == 2 && _this.data[i][q + 2].qizicontion == 2 &&_this.data[i][q + 3].qizicontion == 2 && _this.data[i][q + 4].qizicontion == 2) {hei = 5;}}}//右上斜for (var i = 4; i < _this.qipannum; i++) { //起始的行,从上往下,从第4行开始这个斜行才有五个棋子,//行是先最大,后小。列是先最小,再最大for (var hang = i, lie = 0; hang >= 0 + 4, lie < i - 3; hang--, lie++) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang - 1][lie + 1].qizicontion == 1 && _this.data[hang - 2][lie + 2].qizicontion == 1 &&_this.data[hang - 3][lie + 3].qizicontion == 1 && _this.data[hang - 4][lie + 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang - 1][lie + 1].qizicontion == 2 && _this.data[hang - 2][lie + 2].qizicontion == 2 &&_this.data[hang - 3][lie + 3].qizicontion == 2 && _this.data[hang - 4][lie + 4].qizicontion == 2)hei = 5;};//上面是上部分,下面是下部分for (var hang = i - 4, lie = _this.qipannum - 1; hang < _this.qipannum - 4; hang++, lie--) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang + 1][lie - 1].qizicontion == 1 && _this.data[hang + 2][lie - 2].qizicontion == 1 &&_this.data[hang + 3][lie - 3].qizicontion == 1 && _this.data[hang + 4][lie - 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang + 1][lie - 1].qizicontion == 2 && _this.data[hang + 2][lie - 2].qizicontion == 2 &&_this.data[hang + 3][lie - 3].qizicontion == 2 && _this.data[hang + 4][lie - 4].qizicontion == 2)hei = 5;}}//右下斜for (var i = 0; i < _this.qipannum - 4; i++) //起始的行{for (var hang = i, lie = 0; hang < _this.qipannum - 4, lie < 14 - i - 3; hang++, lie++) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang + 1][lie + 1].qizicontion == 1 && _this.data[hang + 2][lie + 2].qizicontion == 1 &&_this.data[hang + 3][lie + 3].qizicontion == 1 && _this.data[hang + 4][lie + 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang + 1][lie + 1].qizicontion == 2 && _this.data[hang + 2][lie + 2].qizicontion == 2 &&_this.data[hang + 3][lie + 3].qizicontion == 2 && _this.data[hang + 4][lie + 4].qizicontion == 2)bai = 5;}for (var hang = i + 4, lie = _this.qipannum - 1; hang > 3; hang--, lie--) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang - 1][lie - 1].qizicontion == 1 && _this.data[hang - 2][lie - 2].qizicontion == 1 &&_this.data[hang - 3][lie - 3].qizicontion == 1 && _this.data[hang - 4][lie - 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang - 1][lie - 1].qizicontion == 2 && _this.data[hang - 2][lie - 2].qizicontion == 2 &&_this.data[hang - 3][lie - 3].qizicontion == 2 && _this.data[hang - 4][lie - 4].qizicontion == 2)hei = 5;}}// if (_this.data[0][0].qizicontion != 0 && _this.data[1][0].qizicontion != 0) bai = 5;//后判断if (bai == 5) {_this.stutus = 1;_this.showend();}if (hei == 5) {_this.stutus = 2;_this.showend();}}
    

到这里,一个五子棋就算做完了

bai = 5;

   //后判断if (bai == 5) {_this.stutus = 1;_this.showend();}if (hei == 5) {_this.stutus = 2;_this.showend();}

}


### 到这里,一个五子棋就算做完了

http://www.ppmy.cn/news/563054.html

相关文章

C++畅玩五子棋项目

畅玩五子棋项目说明 ​ 项目创建环境&#xff1a;Windows 10 Visual Studio 2019 ​ 棋子类型&#xff1a;实心●和空心◎。其中&#xff0c;棋子彩色棋子为当前落子 ​ 实现功能&#xff1a;对战模式&#xff08;人人对战&#xff09;、人机模式&#xff08;人机模式&…

基于C++的五子棋项目

一、五子棋项目介绍 1.游戏规则 五子棋是我国古代传统的黑白棋种之一&#xff0c;黑白双方依次落子&#xff0c;任意一方在棋盘上形成横向、纵向、斜向的连续相同颜色的五颗棋子的一方为胜。 2.完成界面显示 此次项目将不使用任何图形库进行开发&#xff0c;所有显示的内容都…

五子棋的设计与实现

术&#xff1a;Java等 摘要&#xff1a; 五子棋是一种两人对弈的纯策略型棋类游戏&#xff0c;非常容易上手&#xff0c;老少皆宜。为了更好的推广五子棋&#xff0c;研究简单的人工智能方式&#xff0c;运用Java开发五子棋游戏。主要包含了人机对战&#xff0c;棋盘初始化&…

五子棋-完美解决闪屏问题版-新增悔棋功能(C++实现)

在学C的时候&#xff0c;在做课设的时候做了一个五子棋课设&#xff0c;当时选这个就是觉得挺好玩的&#xff0c;想理解一下游戏是如何实现的&#xff0c;然后就入了这个坑。。。这个我没有用图形化界面来实现&#xff0c;完全是使用字符来实现。然后没有用图形化界面的最大的问…

C++、easyx组合的界面版五子棋(适合新手)

C、easyx组合的五子棋界面版&#xff08;适合新手&#xff09; 点击进入五子棋控制台版本 文章目录 C、easyx组合的五子棋界面版&#xff08;适合新手&#xff09;前言效果图一、游戏规则二、实现逻辑1.绘制棋盘2.落子2.1 鼠标坐标的获取2.2 绘制棋子 三、输赢判定算法四、其…

Windows编程 简易五子棋

简易五子棋&#xff0c;望指正 #include <windows.h> #include<commctrl.h> #define SIZE 20 UINT IDC_BUTTON1200; HWND hwnd; HPEN penbackCreatePen(PS_SOLID,1,RGB(0,0,0)); HPEN penback2CreatePen(PS_SOLID,1,RGB(255,255,255)); HBRUSH brushbackCreateSo…

课程设计-单机版五子棋游戏-Java

一. 项目简介&#xff1a; 五子棋是全国智力运动会竞技项目之一&#xff0c;是一种两人对弈的纯策略型棋类游戏。五子棋的玩法是&#xff1a;双方分别使用黑白两色的棋子&#xff0c;下在棋盘直线与横线的交叉点上&#xff0c;先形成五子连线者获胜。五子棋的棋具与围棋通用…

五子棋人机对弈代码——java版

算法是穷举递归法&#xff0c;只不过用java重新写了一遍 import java.awt.Color;import java.awt.Container;import java.awt.Graphics;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.MouseEvent;import java.awt.event.Mou…