一、前言

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

    1.发展史 面向机器 面向过程:将程序的执行分解成若干个步骤 面向对象:将程序的执行分解成若干个事物 2.面向对象两个基本概念 类:代表某类事物,是抽象的 对象:代表某个事物,是具体的 3.快速入门 ...

  2. Jquery实现自动生成二级目录

    在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...

  3. 关于li标签行内显示的问题

    在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <! ...

  4. 关于window的端口查看及tomcat的端口修改问题

    1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议    本地地址                     外部地址  ...

  5. Spark应用(app jar)发布到Hadoop集群的过程

    记录了Spark,Hadoop集群的开启,关闭,以及Spark应用提交到Hadoop集群的过程,通过web端监控运行状态. 1.绝对路径开启集群 (每次集群重启,默认配置的hadoop集群中tmp文件 ...

  6. Spring MVC开发初体验

    1.目标实现Spring MVC : Hello World! 2.工程创建步骤 new : Dynamic Web Project lib引入Spring框架libs/*.jar touch web ...

  7. C#实现Stream与byte[]之间的转换实例教程

    一.二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream(m ...

  8. 如何杀掉一个用户下的所有进程并drop掉这个用户

    如何杀掉一个用户下的所有进程并drop掉这个用户 Copy the sample code below into a file named kill_drop_user.sql.Open SQL*Pl ...

  9. vue+node+mongodb实现的功能

    用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...

  10. 2017软件测试_HW1_最近遇到的编程问题

     最近遇到的错误:我对着网页源代码编写了一段爬虫语句,运行没有提示有错误,而且 可以抓取到全部的数据,但是不能按照要求将这些数据分到制定的位置. 发现问题原因:我把抓取到的字段对着网页源码看了一下,发 ...