JavaScript编写棋盘覆盖代码详解
作者:fyk曩昔 发布时间:2024-04-17 10:30:05
标签:js,棋盘
一、前言
之前做了一个算法作业,叫做棋盘覆盖,本来需要用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编写棋盘覆盖代码详解网站的支持!
来源:http://www.cnblogs.com/nangxi/archive/2017/08/28/7444603.html
0
投稿
猜你喜欢
- 一、文件形式的邮件#!/usr/bin/env python3#coding: utf-8import smtplibfrom email.
- 当初次在机器上安装完Mysql时,你可以匿名进行访问数据库或者以不带口令的root身份进入数据库.另外如果你是一个管理员,你还要进行一些用户
- 最近用pymysql把一些质量不是很高的数据源导入mysql数据库的时候遇到一点问题,主要是遇到像 \ 这样的具有特殊意义的字符时比较难处理
- magpierss中就用到了snoopy,这让我有点兴趣去研究下这个咚咚。再SF上,找到了这个源代码。居然就是一个类,但不要笑看哦,功能可是
- 方法一、尽量使用复杂的SQL来代替简单的一堆 SQL.同样的事务,一个复杂的SQL完成的效率高于一堆简单SQL完成的效率。有多个查询时,要善
- jupyter notebookjupyter不被识别为内部或外部命令,可操作程序或批处理文件'上次 jupyter noteboo
- 一、前期准备1、安装好python3,可以在anaconda中安装python3。2、一个合适的双目摄像头。3、一台可以运行Matlab的电
- REPLACE的运行与INSERT很相似。只有一点例外,假如表中的一个旧记录与一个用于PRIMARY KEY或一个UNIQUE索引的新记录具
- 本文实例讲述了mysql、mssql及oracle分页查询方法。分享给大家供大家参考。具体分析如下:分页查询在web开发中是最常见的一种技术
- 最近看到很多关于MySql相关的语法,小白也想学习一些MySQL的存储过程的写法,因此就想安装MySQL,过程中遇到过一些问题,这里记录下来
- tags faker 随机 虚拟faker文档链接代码程序:# -*- coding=utf-8 -*-import sysfrom fak
- reshape(shape) : 不改变数组元素,返回一个shape形状的数组,原数组不变。是对每行元素进行处理resize(shape)
- 1. 实例的背景说明假定一个个人信息系统,需要记录系统中各个人的故乡、居住地、以及到过的城市。数据库设计如下:Models.py 内容如下:
- 使用Python获取电脑的磁盘信息需要借助于第三方的模块psutil,这个模块需要自己安装,纯粹的CPython下面不具备这个功能。在iPy
- 在Python中os模块里,os.renames() 方法用于递归重命名目录或文件。类似rename()。rename()方法语法格式如下:
- 在Windows系统下,如何在cmd中输入命令来运行.py文件呢?一. 设置环境变量想要在cmd中运行python文件,必须要设置pytho
- 分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该显示在页面上的数据在数据库表中的起始位置。确定分页需求:1. 每
- Django###request如果说 urls.py 是 Django 中前端页面和后台程序桥梁,那么 request 就是桥上负责运输的
- 看例子:运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
- Turtle库是Python内置的图形化模块,属于标准库之一,位于Python安装目录的lib文件夹下,常用函数有以下几种:画笔控制函数pe