Javascript（国际象棋游戏）中图像拖放的问题 [英] Issues with Drag and Drop of image in Javascript (chess game)

问题描述

我正在尝试使用java脚本在html中设计国际象棋游戏。我正在使用拖放在棋盘上移动棋子。我还处于起步阶段。但是在进行图像重叠时。我只是设计了电路板并放置了一些字符。我还没有写出每一件作品的功能。我只是区分了这些颜色，即白色碎片不应该杀死黑色碎片。这里的主要问题当我将一个单元格从一个单元格拖动到另一个单元格时，它会移动，但是当另一个单元格移动时，使用不移动的单元格也不会移除子项....请帮助我....代码如下...



<！DOCTYPE html>



< html>

< head>

< style>

<！ - ＃board {

background-color：#ccc;

身高：540px;

宽度：816px;



}



.black，

.white {

float：left;

身高：100px;

保证金：1px;

宽度：100px;

}



。黑色{

background-color：＃333;

}



.white {

background-color：＃ efefef;

}

img.positionedImage {

position：absolute;

} - >

.normal {

border：none;

}

.highlighted {

border：3px solid＃FF0000;

}

<！ - div

{宽度：100px;高度：100像素;保证金：0px;填充：0px;} - >

< / style>



< script>



函数allowDrop（ev）{

ev.preventDefault（）;

}



函数drag（ev）{

ev.dataTransfer.setData（img，ev.target.id）;



}



函数下降（ev，target）{

ev.preventDefault（）;



var obj = document.getElementById（ev.target.id）;



console.log（obj）;

console.log（obj.getElementsByTagName（'img'）。length）;



// var i = document.getElementById（ev.target.id ）.getElementsByTagName（'img'）。src;

// var i = document.getElementById（ev.target.id）.getElementsByTagName（'img'）。src;

// if（obj.getElementById（'img'）。src == null）{

// if（obj.getElementsByTagName（'img'）。length> 0）{

// if（i == 0）{



//alert（i.length）;

if（b） （obj == null）&& （obj ==））{



alert（有图像）;



< br $>
}

else {

var data = ev.dataTransfer.getData（img）;

// ev.dataTransfer.effectAllowed ='move';

var p = ev.target.appendChild（document.getElementById（data），ev.target）;

ev.target .parentNode.replaceChild（document.getElementById（data），ev.target）;

//ev.target.parentNode.removeChild(this),

mydiv = document.getElementById（data）;

while（mydiv。 firstChild）{

mydiv.removeChild（mydiv.firstChild）;

}

//ev.target.parentNode.remove（）;

document.getElementById（data）.className =;



}

}



var ImageSelector = function（）{

var imgs = null;

var selImg = null;



返回{

addImages：function（container）{



imgs = container.getElementsByTagName（' img'）;

alert（imgs.length）;

for（var i = 0，len = imgs.length; i< len; i ++）{

var img = imgs [i];

img.className =normal;

img。> < img src ='image / WRook.png'straggable ='true'/>;

}否则如果（i == 0&& j == 1）{

div.innerHTML =

< img src ='image / WHorse.png'straggable ='true'/>

;

}否则if（i == 0&& j == 2）{

div.innerHTML =

< img src ='image / WBishop.png'draggable ='true'/>

;

}否则if（i == 0&& j == 3）{

div.innerHTML =

< img src ='image / WQueen.png'rapggable ='true'/>

;

}否则if（i == 0&& j == 4）{

div.innerHTML =

< img src ='image / WKing.png'如果（i == 0&& j == 5）{

div。 innerHTML =

< img src ='image / WBishop.png'draggable ='true'/>

;

}否则if（i == 0&& j == 6）{

div.innerHTML =

< img src ='image / WHorse.png'ragggable ='true'/>

;

}否则if（i == 0& ;&安培; j == 7）{

div.innerHTML =

< img src ='image / WRook.png'rapggable ='true'/>

;

}



if if（i == 1&& j == 0）{

div.innerHTML =

< img src ='image / g.png'raraggable ='true'/>

;

} else if（i == 1&& j == 1）{

div.innerHTML =

< img src ='image / g.png 'draggable ='true'/>

;

}否则if（i == 1&& j == 2）{

div .innerHTML =

< img src ='image / g.png'ragggable ='true'/>

;

}否则如果（ i == 1&& j == 3）{

div.innerHTML =

< img src ='image / g.png'raraggable =' true'/>

;

}否则if（i == 1&& j == 4）{

div.innerHTML =

< img src ='image / g.png'rampggable ='true'/>

;

}否则if（i == 1&& j == 5）{

div.innerHTML =

< img src ='image / g。 png'draggable ='true'/>

;

}否则if（i == 1&& j == 6）{

div.innerHTML =

< img src ='image / g.png'rapggable ='true'/>

;

}否则if（i == 1&& j == 7）{

div.innerHTML =

< img src ='image / g.png'raraggable ='true'/>

;

}

if（i == 2& ;& j == 0）{

div.innerHTML =

;

}否则如果（i == 2&& j == 1）

{div.innerHTML =

;}

if（i == 2&& j == 2）{

div.innerHTML =

;

}否则if（i == 2&& j == 3）

{div.innerHTML =

;}

if（i == 2&& j == 4）{

div.innerHTML =

;

}否则if（i == 2&& j == 5）

{div.innerHTML =

;}

if（i == 2&& j == 6）{

div.innerHTML =

;

}否则如果（ i == 2&& j == 7）

{div.innerHTML =

;}

if（i == 3&& j == 0）{

div.innerHTML =

;

}否则if（i == 3&& j == 1）

{div.innerHTML =

;}

if（i == 3&& j == 2）{

div.innerHTML =

;

}否则if（i == 3&& j == 3）

{div.innerHTML =

;}

if（i == 3&& j == 4） {

div.innerHTML =

;

}否则if（i == 3& ;& j == 5）

{div.innerHTML =

;}

if（i == 3&& j == 6）{

div.innerHTML =

;

}否则if（i == 3&& j == 7）

{div.innerHTML =

;}

if（i == 4&& j == 0）{

div.innerHTML =

;

}否则if（i == 4&& j == 1）

{div.innerHTML =

;}

if（i == 4&& j == 2）{

div.innerHTML =

;

}否则if（i == 4&& j == 3）

{div.innerHTML =

;}

if（i == 4&& j == 4）{

div.innerHTML =

;

}否则if（i == 4&& j == 5）

{div.innerHTML =

;}

if（i == 4& & j == 6）{

div.innerHTML =

;

} else if（i == 4&& j == 7）

{div.innerHTML =

;}

if（i == 5&& j == 0）{

div.innerHTML =

;

}否则如果（ i == 5&& j == 1）

{div.innerHTML =

;}

if（i == 5&& j == 2）{

div.innerHTML =

;

}否则if（i == 5&& j == 3）

{div.innerHTML =

;}

if（i == 5&& j == 4）{

div.innerHTML =

;

}否则if（i == 5&& j == 5）

{div.innerHTML =

;}

if（i == 5&& j == 6） {

div.innerHTML =

;

}否则if（i == 5& ;& j == 7）

{div.innerHTML =

;}



else if（i == 6&& j == 0）{

div.innerHTML =

< img src ='image / Bg.png'ragggable ='true'/>

;

}否则if（i == 6&& ; j == 1）{

div.innerHTML =

< img src ='image / Bg.png'rapggable ='true'/>

;

}否则if（i == 6&& j == 2）{

div.innerHTML =

< img src ='image / Bg.png'raraggable ='true'/>

;

}否则if（i == 6&& j == 3 ）{

div.innerHTML =

< img src ='image / Bg.png'raraggable ='true'/>

;

}否则if（i == 6&& j == 4）{

div.innerHTML =

< img src ='image / Bg.png'draggable ='true'/>

;

}否则if（i == 6&& j == 5）{

div.innerHTML =

< img src ='image / Bg.png'straggable ='true'/>

;

}否则if（i == 6&& j == 6）{

div.innerHTML =

< img src ='image / Bg.png'draggable ='true'/>

;

}否则if（i == 6&&am） p; j == 7）{

div.innerHTML =

< img src ='image / Bg.png'rapggable ='true'/>

;

}

else if（i == 7&& j == 0）{

div.innerHTML =

< img src ='image / BRook.png'rapggable ='true'/>

;

}否则if（i == 7&& j == 1）{

div.innerHTML =

< img src ='image / BHorse.png'draggable ='true'/>

;

}否则if（i == 7&& j == 2 ）{

div.innerHTML =

< img src ='image / BBishop.png'rapggable ='true'/>

;

}否则if（i == 7&& j == 3）{

div.innerHTML =

< img src ='image / BQueen.png'draggable ='true'/>

;

}否则如果（i == 7&& j == 4）{

div.innerHTML =

< img src ='image / BKing.png'straggable ='true'/>

;

}否则if（i == 7&& j == 5）{

div.innerHTML =

< img src ='image / BBishop.png'draggable ='true'/>

;

} else if（i == 7&& j == 6）{

div.innerHTML =

< img src ='image / BHorse.png 'draggable ='true'/>

;

}否则if（i == 7&& j == 7）{

div.innerHTML =

< img src ='image / BRook.png'rapggable ='true'/>

;

//div.innerHTML =< img src ='image / BRook.png'width ='100'height ='100'/>;



}

}

}

board.appendChild（片段）;

var div = board;

ImageSelector.addImages（div）;

};

< / script>

< / head>





< body>

< / body>

< / html>

解决方案

在体内我会用

I'm trying to design chess game in html using java script. I'm moving pieces on chess board using drag and drop. I'm still in starting stage.but when moving on image overlap. I just designed the board and placed pieces characters. I didn't write the functionality of each and every piece yet. I just differentiated the piece colors i.e. white pieces should not kill black pieces. The Main problem here When I drag a piece from one cell to another cell it moves but when another piece move on using cell thats not move and also not remove the child ....help me ....code is below...

<!DOCTYPE html>

<html>
<head>
<style>
<!--#board {
background-color: #ccc;
height: 540px;
width: 816px;

}

.black,
.white {
float: left;
height: 100px;
margin: 1px;
width: 100px;
}

.black {
background-color: #333;
}

.white {
background-color: #efefef;
}
img.positionedImage{
position:absolute;
}-->
.normal {
border:none;
}
.highlighted {
border:3px solid #FF0000;
}
<!--div
{ width:100px; height:100px; margin:0px;padding:0px;}-->
</style>

<script>

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("img", ev.target.id);

}

function drop(ev, target) {
ev.preventDefault();

var obj = document.getElementById(ev.target.id);

console.log(obj);
console.log(obj.getElementsByTagName('img').length);

// var i = document.getElementById(ev.target.id).getElementsByTagName('img').src;
//var i = document.getElementById(ev.target.id).getElementsByTagName('img').src;
// if(obj.getElementById('img').src == null){
//if( obj.getElementsByTagName('img').length > 0 ) {
//if( i== 0 ) {

//alert(i.length);
if ((obj == null) && (obj == "")){

alert("Has Image");


}
else{
var data = ev.dataTransfer.getData("img");
//ev.dataTransfer.effectAllowed = 'move';
var p =ev.target.appendChild(document.getElementById(data),ev.target);
ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
//ev.target.parentNode.removeChild(this);
mydiv = document.getElementById(data);
while (mydiv.firstChild) {
mydiv.removeChild(mydiv.firstChild);
}
//ev.target.parentNode.remove();
document.getElementById(data).className = "";

}
}

var ImageSelector = function() {
var imgs = null;
var selImg = null;

return {
addImages: function(container) {

imgs = container.getElementsByTagName('img');
alert(imgs.length);
for(var i = 0, len = imgs.length; i < len; i++){
var img = imgs[i];
img.className = "normal";
img.> <img src='image/WRook.png' draggable='true' />" ;
}else if(i==0 && j==1) {
div.innerHTML = "

<img src='image/WHorse.png' draggable='true' />

";
}else if(i==0 && j==2) {
div.innerHTML = "

<img src='image/WBishop.png' draggable='true' />

";
}else if(i==0 && j==3) {
div.innerHTML = "

<img src='image/WQueen.png' draggable='true' />

";
}else if(i==0 && j==4) {
div.innerHTML = "

<img src='image/WKing.png' draggable='true' />

";
}else if(i==0 && j==5) {
div.innerHTML = "

<img src='image/WBishop.png' draggable='true' />

";
}else if(i==0 && j==6) {
div.innerHTML = "

<img src='image/WHorse.png' draggable='true' />

";
}else if(i==0 && j==7) {
div.innerHTML = "

<img src='image/WRook.png' draggable='true' />

";
}

else if(i==1 && j==0) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==1) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==2) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==3) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==4) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==5) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==6) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}else if(i==1 && j==7) {
div.innerHTML = "

<img src='image/g.png' draggable='true' />

";
}
if(i==2 && j==0){
div.innerHTML = "

";
}else if(i==2 && j==1)
{ div.innerHTML = "

";}
if(i==2 && j==2){
div.innerHTML = "

";
}else if(i==2 && j==3)
{div.innerHTML = "

";}
if(i==2 && j==4){
div.innerHTML = "

";
}else if(i==2 && j==5)
{div.innerHTML = "

";}
if(i==2 && j==6){
div.innerHTML = "

";
}else if(i==2 && j==7)
{div.innerHTML = "

";}
if(i==3 && j==0){
div.innerHTML = "

";
}else if(i==3 && j==1)
{div.innerHTML = "

";}
if(i==3 && j==2){
div.innerHTML = "

";
}else if(i==3 && j==3)
{div.innerHTML = "

";}
if(i==3 && j==4){
div.innerHTML = "

";
}else if(i==3 && j==5)
{div.innerHTML = "

";}
if(i==3 && j==6){
div.innerHTML = "

";
}else if(i==3 && j==7)
{div.innerHTML = "

";}
if(i==4 && j==0){
div.innerHTML = "

";
}else if(i==4 && j==1)
{div.innerHTML = "

";}
if(i==4 && j==2){
div.innerHTML = "

";
}else if(i==4 && j==3)
{div.innerHTML = "

";}
if(i==4 && j==4){
div.innerHTML = "

";
}else if(i==4 && j==5)
{div.innerHTML = "

";}
if(i==4 && j==6){
div.innerHTML = "

";
}else if(i==4 && j==7)
{div.innerHTML = "

";}
if(i==5 && j==0){
div.innerHTML = "

";
}else if(i==5 && j==1)
{div.innerHTML = "

";}
if(i==5 && j==2){
div.innerHTML = "

";
}else if(i==5 && j==3)
{div.innerHTML = "

";}
if(i==5 && j==4){
div.innerHTML = "

";
}else if(i==5 && j==5)
{div.innerHTML = "

";}
if(i==5 && j==6){
div.innerHTML = "

";
}else if(i==5 && j==7)
{div.innerHTML = "

";}

else if(i==6 && j==0) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}else if(i==6 && j==1) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}else if(i==6 && j==2) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}else if(i==6 && j==3) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}else if(i==6 && j==4) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}else if(i==6 && j==5) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}else if(i==6 && j==6) {
div.innerHTML = "

<img src=' image/Bg.png' draggable='true' />

";
}else if(i==6 && j==7) {
div.innerHTML = "

<img src='image/Bg.png' draggable='true' />

";
}
else if(i==7 && j==0) {
div.innerHTML = "

<img src='image/BRook.png' draggable='true' />

";
}else if(i==7 && j==1) {
div.innerHTML = "

<img src='image/BHorse.png' draggable='true' />

";
}else if(i==7 && j==2) {
div.innerHTML = "

<img src='image/BBishop.png' draggable='true' />

";
}else if(i==7 && j==3) {
div.innerHTML = "

<img src='image/BQueen.png' draggable='true' />

";
}else if(i==7 && j==4) {
div.innerHTML = "

<img src='image/BKing.png' draggable='true' />

";
}else if(i==7 && j==5) {
div.innerHTML = "

<img src='image/BBishop.png' draggable='true' />

";
}else if(i==7 && j==6) {
div.innerHTML = "

<img src='image/BHorse.png' draggable='true' />

";
}else if(i==7 && j==7) {
div.innerHTML = "

<img src='image/BRook.png' draggable='true' />

";
//div.innerHTML = "<img src='image/BRook.png' width='100' height='100' />";

}
}
}
board.appendChild(fragment);
var div = board;
ImageSelector.addImages(div);
};
</script>
</head>


<body>

</body>
</html>

解决方案

in body i will used

这篇关于Javascript（国际象棋游戏）中图像拖放的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！