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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
如何通过JS实现转码与解码
Feb 21 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实现框架(一)
2006/10/09 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP的几个常用加密函数
2016/02/03 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
js获取ip和地区
2017/03/10 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
angular2实现统一的http请求头方法
2018/08/13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python 实现一个简单的web服务器
2021/01/03 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
餐厅筹备计划书
2014/04/25 职场文书
大学生应聘求职信
2014/05/26 职场文书
运动会广播稿50字
2015/08/19 职场文书
各国货币符号大全
2022/02/17 杂记