一、前言

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

    this this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上 this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得 ...

  2. 创建Python数据分析的Docker镜像+Docker自定义镜像commit,Dockerfile方式解析+pull,push,rmi操作

    实例解析Docker如何通过commit,Dockerfile两种方式自定义Dcoker镜像,对自定义镜像的pull,push,rmi等常用操作,通过实例创建一个Python数据分析开发环境的Dock ...

  3. Eclipse Configuration

    *** Date: 2013年9月12日星期四中国标准时间上午8时41分50秒 *** Platform Details: *** System properties:applicationXMI=o ...

  4. SharePoint 2013 - Client Side Rendering

    1. Client side rendering 代码结构为: (function () { // Create object that have the context information ab ...

  5. SpringCloud的学习记录(8)

    这一章节讲zipkin-server. 在我们生成的Demo项目上右键点击New->Module->spring Initializr, 然后next, 填写Group和Artifact等 ...

  6. CSS中的各类选择器

    属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器

  7. CodeMirror教程，CodeMirrorAPI中文信息

    <html> <head>     <link rel="stylesheet" href="codemirror.css"> ...

  8. 【Spring实战】—— 2 构造注入

    本文讲解了构造注入以及spring的基本使用方式,通过一个杂技演员的例子,讲述了依赖注入属性或者对象的使用方法. 如果想要使用spring来实现依赖注入,需要几个重要的步骤: 1 定义主要的类和需要分 ...

  9. Sendip 命令行发包工具，支持IP、TCP、UDP等

    Sendip是一个linux平台的命令行发数据包工具,目前(2018年2月)支持的协议有ipv4.ipv6.icmp.tcp.udp.bgp.rip.ntp,作者表示其他协议将会后面支持,当他有空写的 ...

  10. 西门子 1500 1200 PLC，位访问, 字节访问

    访问byte,word中的位 mybyte.%X1 myword.%X1 访问word/dword中的byte myword.%B0 myword.%B1 myDword.%B0 文中mybyte, ...