Trying to make a reusable function to make cells in a row. (chess board)

I'm trying to make the first row of a chess board. I had it but Im trying to make what I think what's called a constructor function to learn more advanced programming. I'm trying to get all the data in the function and append the div to the board the x should be updated by multiplying i * the piece size.I think I'm having problems using the new key word and appending together. If you could show me how you would fill up the whole chess board that would be great. I'm assuming you would use nested for loops. That's my next goal.

I have something like this.

$(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.color =  orange ?  "orange" : "black"
        this.x = x;
    }
    console.log( new Cell())
    for(var i = 0 ; i < amountOfPieces; i++){
        if(i % 2 == 0){
            board.append($("<div>") new cell("orange", i * pieceSize))
        }else if( i % 2 == 1){
            board.append($("<div>").css({
                position: "absolute",
                width : pieceSize,
                height: pieceSize,
                "background-color" : "black", 
                left: i * pieceSize
            }))
        }
    }
});

EDIT: ok guys I got the first row shown in my answer. now I need to fill in the whole board. Remember the colors need to alternate and I would prefer to use a nested for loop. Thanks.

Answers:

Answer

You should be passing pieceSize in as an argument like:

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?
}

Then when you use it, it would look something like (just an example):

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

Also the following line is all messed up on multiple levels:

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

Take a look at the jQuery .append() documentation to get a better understanding of how to use it: http://api.jquery.com/append/

All your Cell constructor function does is create objects with the parameters of one space on the game board. It doesn't actually build it. You'll need to create a function that takes in the object produced by new Cell() an actually creates a string of HTML for you to append to the page. Something like:

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;
}

Then you could do something like:

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

This answer is not something for you to copy/paste into your project. These are examples to give you the tools you'll need to solve this problem.

Answer

Ok I came up with this answer. what do you think?

$(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>

Now on to making the columns. any help with that guys?

EDIT: I came up with an answer to fill the whole board and it is below. I still would like to see other people's results

$(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>

Answer

Try using .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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.