一、前言

之前做了一个算法作业，叫做棋盘覆盖，本来需要用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. VB.Net遍历已安装的程序卸载信息

    Private Shared Function ProgramExists(ByVal pgName As String) As Boolean Dim temp As String = Nothin ...

  2. HDU 1003 最大连续和

    http://www.acmerblog.com/hdu-1003-Max-Sum-1258.html 这里难点只有求起始位置,把握状态变化就行.一般这种子序列问题,都可以用dp简化 #include ...

  3. mysql 字符串转换呈毫秒值

    SELECT CEIL((UNIX_TIMESTAMP('2011-05-31 23:59:59') - UNIX_TIMESTAMP('2011-05-31 00:59:59'))/1000/60/ ...

  4. 【Android】7.0 Intent向下一个活动传递数据、返回数据给上一个活动

    1.0 可以利用Intent吧数据传递给上一个活动,新建一个叫“hellotest01”的项目. 新建活动FirstActivity,勾选“Generate Layout File”和“Launche ...

  5. 【数据库】2.0 MySQL入门学习（二）——如何获得MySQL以及MySQL安装

    1.0 如何获得MySQL: www.oracle.com https://dev.mysql.com/downloads/ 2.0 例如进入Oracle官网,找到MySQL: 进入页面后,切换到“资 ...

  6. 转：HTML中让图片滚动的<marquee>标签的使用方法

    实例: <marquee id="affiche" align="left" behavior="scroll" bgcolor=&q ...

  7. Highcharts error #14: www.highcharts.com/errors/14

    错误原因:数据类型错误,需要的是Number类型,传入的却是String 以为为官网说明: Highcharts Error #14 String value sent to series.data, ...

  8. unity导出apk错误出错解决方法

    CommandInvokationFailure: Failed to re-package resources. See the Console for details. F:\adt-bundle ...

  9. 【起航计划ObjC 002】印第安老斑鸠ObjC的幻想 ---- Ubuntu下安装并使用MAC虚拟机

    本文介绍如何在Ubuntu下安装Mac OS X Mavericks系统.具体如下: 1)安装前准备工作 下载Mac OS X Mavericks系统,地址:http://pan.baidu.com/ ...

  10. wxpython grid

    构建Grid方法,效果如下: 其它构建grid方法和grid的使用见:还可以见下载资源中的wxpython教程第5章的 gridGeneric.py gridModel.py gridNoModel. ...