一、前言

之前做了一个算法作业，叫做棋盘覆盖，本来需要用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编写棋盘覆盖的更多相关文章

  1. 用python代码编写象棋界面，棋盘覆盖问题

    编写象棋界面 import turtle t=turtle.Pen() t.speed(100) def angle(x,y): t.penup() t.goto(x+3,y+3) t.pendown ...

  2. artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  3. 棋盘覆盖（一） ACM

    棋盘覆盖 描述 在一个2k×2k(1<=k<=100)的棋盘中恰有一方格被覆盖,如图1(k=2时),现用一缺角的2×2方格(图2为其中缺右下角的一个),去覆盖2k×2k未被覆盖过的方格,求 ...

  4. 原生 Javascript 编写五子棋

    原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...

  5. js算法：分治法-棋盘覆盖

    在一个 2^k * 2^k 个方格组成的棋盘中,若恰有一个方格与其他方格不同.则称该方格为一特殊方格,称该棋盘为一特殊棋盘.显然特殊方格在棋盘上出现的位置有 4^k 种情形.因而对不论什么 k> ...

  6. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  7. javascript 编写的贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. bzoj 2706: [SDOI2012]棋盘覆盖 Dancing Link

    2706: [SDOI2012]棋盘覆盖 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 255  Solved: 77[Submit][Status] ...

  9. NYOJ 45 棋盘覆盖

    棋盘覆盖 水题,题不难,找公式难 import java.math.BigInteger; import java.util.Scanner; public class Main { public s ...

随机推荐

  1. 吴恩达《Machine Learning Yearning》总结（31-40章）

    31.解读学习曲线:其他情况 下图反映了高方差,通过增加数据集可以改善. 下图反映了高偏差和高方差,需要找到一种方法来同时减少方差和偏差. 32.绘制学习曲线 情况:当数据集非常小时,比如只有100个 ...

  2. ThenJS

    安装ThenJs:  npm i thenjs 史上最快,与 node callback 完美结合的异步流程控制库 <!doctype html> <html lang=" ...

  3. C# Attribute应用：类签名

    在应用别人接口的时候,总是要用签名,很是不理解签名这是怎么知道做的.通过对Attribute的学习了解.大体可以用Attribute来做签名应用. 具体过程如下: 首先我们要先定义一个类,该类继承At ...

  4. spring+hibernate 配置多个数据源过程 以及 spring中数据源的配置方式

    spring+hibernate 配置多个数据源过程 以及 spring中数据源的配置方式[部分内容转载] 2018年03月27日 18:58:41 守望dfdfdf 阅读数:62更多 个人分类: 工 ...

  5. 安装redis服务端

    1. redis服务端和客户端的安装 [root@xxx ~]# cd /usr/local/src [root@xxx src]# wget http://download.redis.io/rel ...

  6. lxml模块(应用xpath技术)

    一.lxml介绍 第三方库lxml是第一款表现出高性能特征的python xml库,天生支持Xpath1.0.XSLT1.0.定制元素类,甚至python风格的数据绑定接口.lxml是通过Cpytho ...

  7. stark——分页、search、actions

    一.分页 1.引入自定义分页组件 在/stark目录下创建utils工具包目录,复制page.py到该目录下,文件中有之前自定义的分页组件. class Pagination(object): def ...

  8. Python爬虫《爬取get请求的页面数据》

    一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urllib. ...

  9. Ubuntu真机安装

    Ubuntu真机安装 1.Ubuntu安装: (1)启动盘制作: a.下载启动盘制作工具Universal USB Installe,下载地址: b.下载Ubuntu系统镜像,到本地磁盘,官方下载地址 ...

  10. linux注册服务教程

    该说明是项目完成很久之后,整理资料时的偶然发现,当时所操作的linux为中标麒麟,需要对项目进行开机自启,对llinux还不熟悉,找不到linux中的服务自启设置.辗转多次才找到了解决方案.记录以供参 ...