Fatal编程技术网
  • javascript/
  • Javascript 如何创建特定的X*X大小的表？（战舰游戏）（HTML，CSS，JS）

Javascript 如何创建特定的X*X大小的表？（战舰游戏）（HTML，CSS，JS）

javascript jquery html css

Javascript 如何创建特定的X*X大小的表？（战舰游戏）（HTML，CSS，JS）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的任务是创建一个战舰游戏，使用3x3-10x10网格。 我目前的想法是点击按钮创建网格，或者至少点击按钮更改当前大小。然而，我是一个初学者，很难找到任何简单易懂的建议。所以我想在这里问一下我的个人情况 （我将以下代码片段粘贴到pastebin中，因为一些缩进和格式似乎在这里消失了。） 我正试图用JavaScript函数重新创建它 css: .cell {border-right: 1px solid #000000; border-bottom: 1px solid #000000; flo

我的任务是创建一个战舰游戏，使用3x3-10x10网格。 我目前的想法是点击按钮创建网格，或者至少点击按钮更改当前大小。然而，我是一个初学者，很难找到任何简单易懂的建议。所以我想在这里问一下我的个人情况

（我将以下代码片段粘贴到pastebin中，因为一些缩进和格式似乎在这里消失了。）

我正试图用JavaScript函数重新创建它

css:

.cell {border-right: 1px solid #000000; border-bottom: 1px solid #000000; float: left; width: 30px; height: 30px;}
.row {clear: both; overflow: hidden;}
.table {border-left: 1px solid #000000; border-top: 1px solid #000000;}

HTML:

<div class="table">
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

function genTable(gridsize) {

var e = '<div class="table"><div class="row"><div class="cell">&nbsp;</div></div></div>'

var value = $("#option").val(); //gets value from button press (between 3-10)
gridsize = value; // this isn't really necessary, oops
for (i = 0; i <= gridsize-1; i++) { //for loop to create the table
    $("#tabel_here").append(e);

}
}   

css:
.cell{边框右侧：1px实心#000000；边框底部：1px实心#000000；浮动：左侧；宽度：30px；高度：30px；}
.row{清除：两个；溢出：隐藏；}
.表{左边框：1px实心#000000；上边框：1px实心#000000；}
HTML:
下面是我尝试使用的函数。我用的是一个下拉菜单，里面有3x3-10x10的值。按下按钮执行该功能

css:

.cell {border-right: 1px solid #000000; border-bottom: 1px solid #000000; float: left; width: 30px; height: 30px;}
.row {clear: both; overflow: hidden;}
.table {border-left: 1px solid #000000; border-top: 1px solid #000000;}

HTML:

<div class="table">
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

function genTable(gridsize) {

var e = '<div class="table"><div class="row"><div class="cell">&nbsp;</div></div></div>'

var value = $("#option").val(); //gets value from button press (between 3-10)
gridsize = value; // this isn't really necessary, oops
for (i = 0; i <= gridsize-1; i++) { //for loop to create the table
    $("#tabel_here").append(e);

}
}   

函数genTable（gridsize）{
变量e=''
var value=$（“#选项”）.val（）；//从按下按钮（3-10之间）获取值
gridsize=value；//这并不是必须的，哎呀
对于（i=0；i试试这个：



var createGrid=函数（x，y）{
var arrY=新数组（），
啊,，
容器=$（“.table”）；
对于（var iy=0；iy，这里有一个


函数绘图网格（单元格）
{
$（“.grid”）.empty（）；

对于（var i=0；i，您可以创建函数来重复创建列和创建行，并更新HTML



var TableUtil={
repeatString:函数（str，times）{
return（新数组（times+1））.join（str）；
},
createTableString:函数（行、列）{
变量表字符串=“”，
行字符串=“”，
colString=' '；
//创建单行
rowString+=this.repeatString（colString，cols）；
rowString+=''；
//对行重复n次
tableString+=this.repeatString（rowString，rows）；
返回表字符串；
}
};
var el=document.getElementById（'TableBox'）；
el.innerHTML=TableUtil.createTableString（10,5）；


.cell{边框右侧：1px实心#000000；边框底部：1px实心#000000；浮动：左侧；宽度：30px；高度：30px；}
.row{清除：两个；溢出：隐藏；}
.表{左边框：1px实心#000000；上边框：1px实心#000000；}


此响应是用纯JavaScript编写的，因此没有依赖项和库。生成的表是DOM对象，而不是字符串值。这使此代码更易于扩展，以备将来修改


TableUtil
命名空间提供用于生成给定行数和列数的表的函数


ElementUtils
命名空间提供了查找选择器样式信息的函数

注意：我在单元格中添加了样式，使其看起来像战舰单元格。如果您需要原始代码，而不需要额外的样式，请查看

下面的示例生成一个11行11列的表格，并根据
.cell
的样式规则计算流程中表格的宽度



var ElementUtils={
computeElementWidth:函数（选择器）{
var styleText=this.getStyleText（'.cell'）；
var ml=this.grabStyle（styleText，'margin left'）；
var mr=this.grabStyle（styleText，“右边距”）；
var pl=this.grabStyle（styleText，“padding left”）；
var pr=this.grabStyle（styleText，“padding right”）；
如果（ml==0&&mr==0）{
var m=this.grabStyle（styleText，'margin'）；ml=m；mr=m；
}
如果（pl==0&&pr==0）{
var p=this.grabStyle（styleText，'padding'）；pl=p；pr=p；
}
var w=this.grabStyle（styleText，'width'）；
返回ml+pl+w+pr+mr；
},
FindCSRule:函数（样式文本、规则）{
var searchIndex=styleText.indexOf（规则）；
var endIndex=styleText.indexOf（“；”，searchIndex）；
var startIndex=searchIndex+rule.length+1；
如果（startIndex-1）{
返回styleText.substring（startIndex，endIndex.trim（）；
}
返回未定义；
},
grabStyle:函数（样式文本、规则）{
var cssRule=this.findCssRule（样式文本，规则）；
如果（规则）{
var值=cssRule.split（“”）；
如果（值.length>1）{
var isMargin=规则==‘保证金’；
var isPadding=规则==='填充'；
if（isMargin | | isPadding）{
if（值[0].indexOf（'px'）>-1）{
返回此.parseNumber（值[1]）；
}
}
}否则{
if（值[0].indexOf（'px'）>-1）{
返回此.parseNumber（值[0]）；
}
}
}
if（rule.match（'width | height | margin | padding | border'））{
返回0；
}
返回未定义；
},
getStyleText:函数（选择器）{
var styleSheets=document.styleSheets[0]；
var class=styleSheets.rules | | styleSheets.cssRules；
对于（var x=0；x0？parseInt（match[0]，10）：0；
}
};
var TableUtil={
createTable:函数（行、列）{
var tableEl=this.createEl（'DIV'，'table'）；
对于（变量行=0；行<行+1；行++）{
this.createRow（tableEl，row，cols+1）；
}
tableEl.style.width=此.calculateTableWidth（cols+1）；
返回表；
},
createRow：函数（表格、行、列）{
var rowEl=this.createEl（'DIV'，'row'）；
for（var col=0；col