m-bo-one/battle ship v2

## battle ship v2
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            border: 1px solid black;
        }
        tr, td {
            padding: 3px;
            border: 1px solid black;
        }
        .draggable {
            width: 90px;
            height: 30px;
        }
        .battle-map {
            width: 300px;
            height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <table class="battle-map"></table>
    <div class="draggable ship-3-hor">3hor</div>
    <div class="draggable ship-3-vert">3vert</div>
    <div class="draggable ship-1-singl">1</div>
    <script type="text/javascript">
        $(function () {
            var cSize = 10,
                _inner_cells,
                pos_place = ['hor', 'vert', 'singl'],
                ship_max_count = 4,
                spaceless_color = 'yellow';

            (function() {
                for (var i = 0; i < cSize; i++) {
                    _inner_cells = "<tr>";
                    for (var j = 0; j < cSize; j++) {
                        _inner_cells += "<td>" + 0 + "</td>";
                    }
                    _inner_cells += "</tr>";
                    $('table.battle-map').append(_inner_cells);
                }
            })();

            var elem_on_cell = function(elem) {
                var cell_coords = elem.offset();
                var start_X = cell_coords.left;
                var start_Y = cell_coords.top;
                var end_X = cell_coords.left + elem.width();
                var end_Y = cell_coords.top + elem.height();
                if (start_X <= event.pageX && event.pageX <= end_X && start_Y <= event.pageY && event.pageY <= end_Y) {
                    var col = elem.index();
                    var row = elem.parent().index();
                    return {
                        finded: true,
                        col: col,
                        row: row
                    }
                }
                return {
                    finded: false
                }
            };

            var Ship = {
                one: function(col, row, current_pos) {
                    if (current_pos != 'singl') return;
                    var current_cell = $('table.battle-map tr:eq('+row+') td:eq('+col+')');
                    if (current_cell.html() == 1) {
                        return;
                    }
                    current_cell.html(1);
                },
                two: function() {},
                three: function(col, row, current_pos) {
                    if (current_pos == 'hor') {
                        var prev_col = col - 1;
                        var next_col = col + 1;
                        if (prev_col < 0 || next_col > cSize - 1) {
                            return;
                        }
                        prev_row = next_row = row
                    }
                    else if (current_pos == 'vert') {
                        var prev_row = row - 1;
                        var next_row = row + 1;
                        if (prev_row < 0 || next_row > cSize - 1) {
                            return;
                        }
                        prev_col = next_col = col;
                    }
                    var prev_cell = $('table.battle-map tr:eq('+prev_row+') td:eq('+prev_col+')');
                    var current_cell = $('table.battle-map tr:eq('+row+') td:eq('+col+')');
                    var next_cell = $('table.battle-map tr:eq('+next_row+') td:eq('+next_col+')');
                    if (prev_cell.html() == 1 ||
                        current_cell.html() == 1 ||
                        next_cell.html() == 1) {
                        return;
                    }
                    prev_cell.html(1);
                    current_cell.html(1);
                    next_cell.html(1);
                },
                four: function() {},
                get_ship_count: function(elem) {
                    var re = new RegExp('\\d+');
                    var count = elem.className.match(re);
                    if (count[0] != null) {
                        return count[0];
                    }
                },
                get_elem_pos: function(elem) {
                    for (var i = 0; i < pos_place.length; i++) {
                        if (elem.className.match('-' + pos_place[i]) != null) {
                            return pos_place[i];
                        }
                    }
                },
                create_void_space: function() {
                    $.each($('table.battle-map td'), function(index, value) {
                        if ($(this).html() == 1) {
                            var result_status = true;
                            var col = $(this).index();
                            var row = $(this).parent().index();

                            var top_row = row - 1;
                            var left_col = col - 1;
                            var bottom_row = row + 1;
                            var right_col = col + 1;

                            var top_cell = $('table.battle-map tr:eq('+top_row+') td:eq('+col+')');
                            var left_cell = $('table.battle-map tr:eq('+row+') td:eq('+left_col+')');
                            var bottom_cell = $('table.battle-map tr:eq('+bottom_row+') td:eq('+col+')');
                            var right_cell = $('table.battle-map tr:eq('+row+') td:eq('+right_col+')');

                            var check_cell = [top_cell, left_cell, bottom_cell, right_cell];

                            for (var i = 0; i < check_cell.length; i++) {
                                var checked_col = check_cell[i].index();
                                var checked_row = check_cell[i].parent().index();
                                if (checked_col < 0 || checked_row < 0 || checked_col > cSize - 1 || checked_row > cSize - 1) {
                                    continue;
                                }
                                if (check_cell[i].html() == 1 || check_cell[i].css('background-color') == spaceless_color) {
                                    continue;
                                } else {
                                    check_cell[i].css('background-color', spaceless_color);
                                }
                            }
                        }
                    });
                }
            };

            $('.draggable').draggable({
                cursor: "crosshair",
                stop: function(event, ui) {
                    $draggable = this;
                    console.log('stop');
                    $.each($('table.battle-map td'), function(index, value) {
                        var get_elem_on_cell = elem_on_cell($(this));
                        if (get_elem_on_cell.finded) {
                            var current_pos = Ship.get_elem_pos($draggable);
                            var ship_count = Ship.get_ship_count($draggable);
                            if (current_pos != undefined && ship_count != undefined) {
                                var col = get_elem_on_cell.col;
                                var row = get_elem_on_cell.row;
                                if (ship_count == 1) {
                                    Ship.one(col, row, current_pos);
                                } else if (ship_count == 3) {
                                    Ship.three(col, row, current_pos);
                                }
                            }
                        }
                    });
                }
            });
            setInterval(Ship.create_void_space, 1000);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	table {
	border-collapse: collapse;
	border: 1px solid black;
	}
	tr, td {
	padding: 3px;
	border: 1px solid black;
	}
	.draggable {
	width: 90px;
	height: 30px;
	}
	.battle-map {
	width: 300px;
	height: 300px;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
	</head>
	<body>
	<table class="battle-map"></table>
	<div class="draggable ship-3-hor">3hor</div>
	<div class="draggable ship-3-vert">3vert</div>
	<div class="draggable ship-1-singl">1</div>
	<script type="text/javascript">
	$(function () {
	var cSize = 10,
	_inner_cells,
	pos_place = ['hor', 'vert', 'singl'],
	ship_max_count = 4,
	spaceless_color = 'yellow';

	(function() {
	for (var i = 0; i < cSize; i++) {
	_inner_cells = "<tr>";
	for (var j = 0; j < cSize; j++) {
	_inner_cells += "<td>" + 0 + "</td>";
	}
	_inner_cells += "</tr>";
	$('table.battle-map').append(_inner_cells);
	}
	})();

	var elem_on_cell = function(elem) {
	var cell_coords = elem.offset();
	var start_X = cell_coords.left;
	var start_Y = cell_coords.top;
	var end_X = cell_coords.left + elem.width();
	var end_Y = cell_coords.top + elem.height();
	if (start_X <= event.pageX && event.pageX <= end_X && start_Y <= event.pageY && event.pageY <= end_Y) {
	var col = elem.index();
	var row = elem.parent().index();
	return {
	finded: true,
	col: col,
	row: row
	}
	}
	return {
	finded: false
	}
	};

	var Ship = {
	one: function(col, row, current_pos) {
	if (current_pos != 'singl') return;
	var current_cell = $('table.battle-map tr:eq('+row+') td:eq('+col+')');
	if (current_cell.html() == 1) {
	return;
	}
	current_cell.html(1);
	},
	two: function() {},
	three: function(col, row, current_pos) {
	if (current_pos == 'hor') {
	var prev_col = col - 1;
	var next_col = col + 1;
	if (prev_col < 0 \|\| next_col > cSize - 1) {
	return;
	}
	prev_row = next_row = row
	}
	else if (current_pos == 'vert') {
	var prev_row = row - 1;
	var next_row = row + 1;
	if (prev_row < 0 \|\| next_row > cSize - 1) {
	return;
	}
	prev_col = next_col = col;
	}
	var prev_cell = $('table.battle-map tr:eq('+prev_row+') td:eq('+prev_col+')');
	var current_cell = $('table.battle-map tr:eq('+row+') td:eq('+col+')');
	var next_cell = $('table.battle-map tr:eq('+next_row+') td:eq('+next_col+')');
	if (prev_cell.html() == 1 \|\|
	current_cell.html() == 1 \|\|
	next_cell.html() == 1) {
	return;
	}
	prev_cell.html(1);
	current_cell.html(1);
	next_cell.html(1);
	},
	four: function() {},
	get_ship_count: function(elem) {
	var re = new RegExp('\\d+');
	var count = elem.className.match(re);
	if (count[0] != null) {
	return count[0];
	}
	},
	get_elem_pos: function(elem) {
	for (var i = 0; i < pos_place.length; i++) {
	if (elem.className.match('-' + pos_place[i]) != null) {
	return pos_place[i];
	}
	}
	},
	create_void_space: function() {
	$.each($('table.battle-map td'), function(index, value) {
	if ($(this).html() == 1) {
	var result_status = true;
	var col = $(this).index();
	var row = $(this).parent().index();

	var top_row = row - 1;
	var left_col = col - 1;
	var bottom_row = row + 1;
	var right_col = col + 1;

	var top_cell = $('table.battle-map tr:eq('+top_row+') td:eq('+col+')');
	var left_cell = $('table.battle-map tr:eq('+row+') td:eq('+left_col+')');
	var bottom_cell = $('table.battle-map tr:eq('+bottom_row+') td:eq('+col+')');
	var right_cell = $('table.battle-map tr:eq('+row+') td:eq('+right_col+')');

	var check_cell = [top_cell, left_cell, bottom_cell, right_cell];

	for (var i = 0; i < check_cell.length; i++) {
	var checked_col = check_cell[i].index();
	var checked_row = check_cell[i].parent().index();
	if (checked_col < 0 \|\| checked_row < 0 \|\| checked_col > cSize - 1 \|\| checked_row > cSize - 1) {
	continue;
	}
	if (check_cell[i].html() == 1 \|\| check_cell[i].css('background-color') == spaceless_color) {
	continue;
	} else {
	check_cell[i].css('background-color', spaceless_color);
	}
	}
	}
	});
	}
	};

	$('.draggable').draggable({
	cursor: "crosshair",
	stop: function(event, ui) {
	$draggable = this;
	console.log('stop');
	$.each($('table.battle-map td'), function(index, value) {
	var get_elem_on_cell = elem_on_cell($(this));
	if (get_elem_on_cell.finded) {
	var current_pos = Ship.get_elem_pos($draggable);
	var ship_count = Ship.get_ship_count($draggable);
	if (current_pos != undefined && ship_count != undefined) {
	var col = get_elem_on_cell.col;
	var row = get_elem_on_cell.row;
	if (ship_count == 1) {
	Ship.one(col, row, current_pos);
	} else if (ship_count == 3) {
	Ship.three(col, row, current_pos);
	}
	}
	}
	});
	}
	});
	setInterval(Ship.create_void_space, 1000);
	});
	</script>
	</body>
	</html>