一、前言

之前做了一个算法作业，叫做棋盘覆盖，本来需要用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棋盘覆盖

2.8*8棋盘覆盖

3.16*16棋盘覆盖

4.32*32棋盘覆盖

四、总结

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

JavaScript编写棋盘覆盖的更多相关文章

用python代码编写象棋界面，棋盘覆盖问题
编写象棋界面 import turtle t=turtle.Pen() t.speed(100) def angle(x,y): t.penup() t.goto(x+3,y+3) t.pendown ...
artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
棋盘覆盖（一） ACM
棋盘覆盖描述在一个2k×2k(1<=k<=100)的棋盘中恰有一方格被覆盖,如图1(k=2时),现用一缺角的2×2方格(图2为其中缺右下角的一个),去覆盖2k×2k未被覆盖过的方格,求 ...
原生 Javascript 编写五子棋
原文地址:原生 Javascript 编写五子棋博客地址:http://www.extlight.com 一.背景近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...
js算法：分治法-棋盘覆盖
在一个 2^k * 2^k 个方格组成的棋盘中,若恰有一个方格与其他方格不同.则称该方格为一特殊方格,称该棋盘为一特殊棋盘.显然特殊方格在棋盘上出现的位置有 4^k 种情形.因而对不论什么 k> ...
用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bzoj 2706: [SDOI2012]棋盘覆盖 Dancing Link
2706: [SDOI2012]棋盘覆盖 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 255 Solved: 77[Submit][Status] ...
NYOJ 45 棋盘覆盖
棋盘覆盖水题,题不难,找公式难 import java.math.BigInteger; import java.util.Scanner; public class Main { public s ...

随机推荐

js 常用事件句柄总结
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HT ...
【Iftop】实时监控流量工具
linux基本查询流量的命令有: 1.ifconfig 只能看到当前接收和发送出去的总共的字节大小,但是不能看到网卡流量的实时发送情况 2.watch more /proc/net/dev 只有接受 ...
Path类操作文件类
// Path类 IO命名空间静态类不能创建对象类名. string str =@"E:\C#程序设计基础入门教程\(第十一天)\122\22\nee.txt"; ////in ...
js控制5秒返回指定界面，或上一个界面
js控制5秒返回指定界面,代码如下 <head> <meta http-equiv="Content-Type" content="text/html; ...
.Net下Redis使用注意事项
.Net下Redis使用注意事项注:Redis的安装方法和桌面端工具很多,不在本文讨论范围内. 一:不结合适用场景的技术都是耍流氓,Redis主要适用场景: 简单字符串缓存简单队列简单发布订阅 ...
深入Java字符串
深入Java字符串 Java字符串类(java.lang.String)是Java中使用最多的类,也是最为特殊的一个类,很多时候,我们对它既熟悉又陌生. 一.从根本上认识java.lang ...
常见的media断点
landscape mode是指宽度比高度宽的模式,也就是俗称的宽屏模式: portrait mode是指高度比宽度高的模式,也就是俗称的竖屏模式: /*#region SmartPhones */ ...
JS图片赖加载例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JavaWeb_01_html基本学习
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...
dhtml
网页换肤:<div> <button>red</button> <button>blue</button> <button>bl ...

JavaScript编写棋盘覆盖