JavaScript编写棋盘覆盖代码详解


Posted in Javascript onAugust 28, 2017

一、前言

之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaScript写法,并且把它的覆盖效果显示出来

二、关键代码

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>算法作业2</title>
<style type="text/css">
  #num{}
  #chess{
    margin-top:20px;
    }
</style>
</head>
<body>
  <div id="num">
    <p>设置棋盘大小:
      <input type="text" name="Num" size="4" />
    </p>
    <p>请输入特殊方格的位置:</p>
    <p>
    x:<input type="text" name="X" size="25"/><br />
    y:<input type="text" name="Y" size="25" />
    </p>
    <p>
      <input type="button" value="设置棋盘参数" />
      <input type="button" value="生成棋盘" />
    </p>
  </div>
  <div id="chess">
  </div>
</body>
</html>
<script type="text/javascript">
  window.onload=function()
  {//棋盘设置
    var chess=document.getElementById('chess');
    var input=document.getElementsByTagName('input')[3];
    input.onclick=function()
    {
      var N=document.getElementsByTagName('input')[0].value;
      var table=document.createElement('table');
      chess.appendChild(table);
      table.style.border='2px solid';
        table.style.borderCollapse='collapse';
      for(var i=0;i<N;i++)
      {
        var tr=document.createElement('tr');
        table.appendChild(tr);
        tr.style.height = "20px";
        tr.style.border='1px solid #ccc';
        for(var j=0;j<N;j++)
        {
          var td=document.createElement('td');
          tr.appendChild(td);
          td.style.width = "20px";
          td.style.border='1px solid #ccc';
        }
      }  
    }
    var Out=document.getElementsByTagName('input')[4];
    var Matrix = new Array();   
    for(var i=0;i<100; i++)
    { //初始化棋盘矩阵
        Matrix[i] = new Array();  
        for(var j=0;j<100;j++)
      {
         Matrix[i][j]=0;
        }
    }
    Out.onclick=function()
    { //棋盘生成
      var r,c;
      var X=document.getElementsByTagName('input')[1].value;
      var Y=document.getElementsByTagName('input')[2].value;
      var N=document.getElementsByTagName('input')[0].value;
      chessBoard(0,0,X-1,Y-1,N);
      for (r = 0; r < N; r++)
      {
        for (c = 0; c < N; c++)
        {
           var q=Matrix[r][c];
           var table=document.getElementsByTagName('table')[0];
           table.rows[r].cells[c].style.background='rgb('+13*q%256+','+43*q%256+','+73*q%256+')';
        }
      }
    }
    var nCount = 0;
    function chessBoard(tr,tc,dr,dc,size)
    {
      var s,t;
      if (size == 1) return;
      s =size/2;
      t = ++nCount ;
      if (dr < tr + s && dc < tc +s)
        chessBoard(tr,tc,dr,dc,s);
      else
      {
        Matrix[tr+s-1][tc+s-1] = t;
        chessBoard(tr,tc,tr+s-1,tc+s-1,s);
      }
      if (dr < tr + s && dc >= tc + s )
        chessBoard(tr,tc+s,dr,dc,s);
      else
      {
        Matrix[tr+s-1][tc+s] = t;
        chessBoard(tr,tc+s,tr+s-1,tc+s,s);
      }
      if (dr >= tr + s && dc < tc + s)
        chessBoard(tr+s,tc,dr,dc,s); 
      else
      {
        Matrix[tr+s][tc+s-1] = t;
        chessBoard(tr+s,tc,tr+s,tc+s-1,s);
      }
      if (dr >= tr + s && dc >= tc + s)
        chessBoard(tr+s,tc+s,dr,dc,s);
      else
      {
        Matrix[tr+s][tc+s] = t;
        chessBoard(tr+s,tc+s,tr+s,tc+s,s);
      }
    }
  }
</script>

三、效果

1.4*4棋盘覆盖

JavaScript编写棋盘覆盖代码详解JavaScript编写棋盘覆盖代码详解

2.8*8棋盘覆盖

JavaScript编写棋盘覆盖代码详解

3.16*16棋盘覆盖

JavaScript编写棋盘覆盖代码详解

4.32*32棋盘覆盖

JavaScript编写棋盘覆盖代码详解

四、总结

棋盘覆盖的C语言代码我是参考课本的,为了能够把它用进JavaScript里面,突破口就是二维数组Matrix[][],只要能够获得它计算之后整个数组的数据,那么就有思路了。要记住填写进表单里面的数据是在点击按钮之后才获取的,所以获取元素节点的代码要放在onclick里面。

以上所述是小编给大家介绍的JavaScript编写棋盘覆盖代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
简单实现jquery焦点图
Dec 12 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
VUE中使用MUI方法
Feb 12 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
Angular4开发解决跨域问题详解
Aug 28 #Javascript
JavaScript实现各种排序的代码详解
Aug 28 #Javascript
JS如何设置元素样式的方法示例
Aug 28 #Javascript
weex slider实现滑动底部导航功能
Aug 28 #Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 #Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 #Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
You might like
PHP If Else(elsefi) 语句
2013/04/07 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
一步步教你用Python实现2048小游戏
2017/01/19 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python实现名片管理系统项目
2019/04/26 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
初中同学聚会邀请函
2014/02/03 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
优秀党员个人总结
2015/02/14 职场文书
2015年度党员个人总结
2015/02/14 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL