试图创建一个可重复使用的函数来生成一行中的单元格.(棋盘）

您应该将pieceSize作为参数传入，如：

function Cell(orange, x, size) {
  this.width = size;
  this.height = size;
  this.color =  orange ?  "orange" : "black"
  this.x = x; // What is x used for anyway?
}

然后当你使用它时，它会看起来像（只是一个例子）：

var createdCell = new Cell(true, 0, pieceSize);

此外，以下行在多个级别上都被搞砸了：

board.append($("<div>") new cell("orange", i * pieceSize))

查看jQuery .append()文档，以更好地了解如何使用它：http://api.jquery.com/append/

你的Cell构造函数所做的就是用游戏板上一个空格的参数创建对象。它实际上并没有构建它。您需要创建一个函数来接收new Cell()生成的对象，并实际创建一个HTML字符串以附加到页面上。类似于：

function create(cell) {
  var str = '<div class="whatever" style="';
  str+= 'height: ' + cell.height + ';';
  str+= 'width: ' + cell.width + ';';
  str+= 'background: ' + cell.color + ';';
  '">';
  str += '</div>';
  return str;
}

然后你可以做一些类似的事情：

board.append(create(new Cell(true, 0, pieceSize)))

这个答案不适合你复制/粘贴到你的项目中。这些示例为您提供了解决此问题所需的工具。

好的，我得出了这个答案。你觉得怎么样？

$(function(){
	var boardHeight = parseInt($(".board").css("height")),
		boardWidth = parseInt($(".board").css("width")),
		amountOfPieces =8,
		pieceSize = boardHeight / amountOfPieces,
		board = $(".board");
	console.log(pieceSize);
	function Cell(orange, x){
		this.width = pieceSize;
		this.height = pieceSize;
		this.background =  orange ?  "orange" : "black"
		this.left = x;
		this.position = "absolute"
	}
	console.log( new Cell())
	for(var i = 0 ; i < amountOfPieces; i++){
		if(i % 2 == 0){
			var obj = new Cell("orange", i * pieceSize)
			console.log(obj)
			board.append($("<div>").css(obj))
		}else if( i % 2 == 1){
		    var obj = new Cell("",i * pieceSize )
		    board.append($("<div>").css(obj))
		}
	}
})

		.board{
			background: #ccc;
			width: 500px;
			height: 500px;
			margin: 20px auto;
			position: relative;
		}
		.cell{
			position: absolute;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="board"></div>

现在开始制作柱子。对那些家伙有什么帮助吗？

编辑：我想出了一个答案来填满整个黑板，它在下面。我仍然希望看到其他人的结果

$(function(){
	var boardHeight = parseInt($(".board").css("height")),
		boardWidth = parseInt($(".board").css("width")),
		amountOfPieces =8,
		pieceSize = boardHeight / amountOfPieces,
		board = $(".board");
	console.log(pieceSize);
	function Cell(orange, x, y){
		this.width = pieceSize;
		this.height = pieceSize;
		this.background =  orange ?  "orange" : "black"
		this.left = x;
		this.position = "absolute"
		this.top = y
	}
	console.log( new Cell())
	for(var i = 0; i < amountOfPieces ; i ++){
		for(var j = 0 ; j < amountOfPieces; j++){
			if(i % 2 == 0){
				if(j % 2 == 1){
					var obj = new Cell("orange", i * pieceSize , j * pieceSize)
					console.log(obj)
					board.append($("<div>").css(obj))
				}else{
					var obj = new Cell("", i * pieceSize , j * pieceSize)
					console.log(obj)
					board.append($("<div>").css(obj))
				}
				
			}else if( i % 2 == 1){
				if(j % 2 == 1){
					var obj = new Cell("", i * pieceSize ,  j * pieceSize)
					board.append($("<div>").css(obj))
				}else{
					var obj = new Cell("orange", i * pieceSize , j * pieceSize)
					board.append($("<div>").css(obj))
				}
				
			}
	}
	
		
		
	}
})

.board{
	background: #ccc;
	width: 500px;
	height: 500px;
	margin: 20px auto;
	position: relative;
}
.cell{
	position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="board"></div>

尝试使用.slice()、.filter()、:odd、:even、.addBack()、Array.prototype.reverse()

for (var i = n = 0, colors = ["orange", "black"]; i < 64; i++, n = i % 8 + 1) {
  $("<div class=row>").appendTo("section");
  if (n === 8) {
    $(".row").slice(i === n - 1 ? 0 : $(".row").length - n, i + 1)
    .filter(":even").css("background", colors[0])
    .addBack().filter(":odd").css("background", colors[1]);
    colors.reverse(); $("section").append("<br>");
  }
}

div {
  position: relative;
  width: 65px;
  height: 65px;
  display: inline-block;
  padding: 0;
  margin-left: 2px;
  margin-right: 2px;
  outline: 2px solid brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section>
</section>