Соединить два элемента
Всем привет. Помогите соединить два однопалубных корабля в один двухпалубный корабль.
Я пытаюсь создать морской бой и у меня не получается сделать разные виды кораблей. Каждый корабль можно перетаскивать и вставлять в ячейку. Помогите или подскажите как сделать разные виды кораблей. Я думаю это можно реализовать при помощи"склеивания" однопалубных кораблей.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td, div.ship{
box-sizing: border-box;
width: 40px;
height: 40px;
border: 1px solid #000000;
text-align: center;
background-color: rgba(30, 144, 255, 1);
margin: 0;
padding: 0;
}
div.ship {
background-color: rgba(105, 105, 105, 1);
display: inline-block;
margin-right: 2px;
}
td div.ship {
display: block;
margin: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var mytable = $('<table/>').appendTo('body'), tr,
td = $.map(Array(100),function(el,i) {
i % 10 || (tr = $('<tr/>').appendTo(mytable));
return $('<td/>').appendTo(tr);
}),
ship = $.map(Array(4),function(i) {
return $('<div class="ship"/>').appendTo('body');
});
$(td).droppable({
accept: ".ship",
drop: function(event, ui) {
ui.draggable.appendTo(this)
}
});
$(ship).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "document",
helper: "clone",
cursor: "move"
});
});
</script>
</head>
<body>
</body>
</html>
|
Неееееет:cray:
|
И как сделать, в виде массива?
|
Retro_1477,
При перетаскивании кораблей возникает масса проблем: 1. Нужно иметь в исходном наборе корабли как горизонтальной, так и вертикальной ориентации либо как-то указывать ориентацию при вставке. При двойном наборе при использовании одного варианта нужно удалять двойника из второго варианта. 2. Контроль возможности вставки как по границам, так и по уже вставленным кораблям. М.б. вставлять-убирать кликами? |
да, можно так сделать
|
Мне нужно сделать игровое поле куда будут помещаться корабли (желательно по правилам морского боя)
|
Для начала
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td {
box-sizing: border-box;
width: 40px;
height: 40px;
border: 1px solid #000000;
text-align: center;
background-color: rgba(30, 144, 255, 1);
margin: 0;
padding: 0;
}
.ship {
background-color: rgba(105, 105, 105, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var count = 0, marina = [], i, j;
for (i = 0; i < 11; i++){
marina[i] = [];
for (j = 0; j < 11; j++){
marina [i][j] = false;
}
};
var mytable = $('<table/>').appendTo('body'), tr,
td = $.map(Array(100),function(el,i) {
i % 10 || (tr = $('<tr/>').appendTo(mytable));
return $('<td/>').appendTo(tr);
})
$('td').on('click', function() {
i = this.parentNode.rowIndex;
j = this.cellIndex;
if($(this).hasClass('ship')) {
count--;
marina[i][j] = false;
$(this).toggleClass('ship');
}
else {
if(count < 20) {
testSet(i,j,this);
} else {
alert('Уже расставлены все корабли');
};
};
$('#count').html(count);
});
function testSet(row,col, that) {
var k,
m,
ok = true;
loop:
for (k = (row == 0)? 1: (row - 1) ; k < row + 2; k += 2) {
for(m = (col == 0)? 1: (col - 1); m < col + 2; m += 2) {
if(marina[k][m]) {
alert("Нельзя ставить новый корабль вплотную");
ok = false;
break loop;
}
};
};
if (ok) {
marina[row][col] = true;
count++;
$(that).toggleClass('ship');
}
}
});
</script>
</head>
<body>
<div id="count"></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:36. |