0
Я пытаюсь написать простую крестики-нолики игра, но у меня возникают проблемы с двумя вещами:Простой Javascript Tic-Tac-Toe игры
Моя 3x3 плата не расщепляется на разные строки - когда я пытаюсь сделать больше игровых плит, он просто кладет их по одной и той же строке
Я могу создать новые изображения X и O, скопировав мой код внизу, но я не знаю, как их заблокировать когда они были сыграны.
Вот мой текущий HTML:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
<title>JavaScript Drag & Drop Tic-Tac-Toe</title>
</head>
<body>
<p>Drag the X and O images into the tic-tac-toe board:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />
<img id="drag2" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />
</body>
</html>
Чтобы поместить элементы в одну строку, примените css 'display; рядный block'. Чтобы поместить элементы в разные строки, примените css 'display: block' (или просто используйте таблицу, это намного проще и имеет смысл для сетки tic-tac-toe). –