我需要的效果是当四个图片围成一个圈的时候,alert“true”!~~但我目前只能对单个进行判断!~无法在外部获取局部变量four_url等的值做出判断!~

爽常在 发布于 2015/11/10 09:41
阅读 403
收藏 0

求大神答疑解惑!~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns=" http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.pipeline{
 width:131px;
 height:131px; 
}
</style>
</head><body>
<table>
<tr>
<td><div id="one" class="pipeline"  style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one3.png) no-repeat;" onclick="test1();"></div></td>
<td><div id="two" class="pipeline" style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one4.png) no-repeat;" onclick="test2();"></div></td>
</tr>
<tr>
<td><div id="three" class="pipeline"  style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one2.png) no-repeat;" onclick="test3();"></div></td>
<td><div id="four" class="pipeline" style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one1.png) no-repeat;" onclick="test4();"></div></td>
</tr>




</table>

<script type="text/javascript">




 count=0;


 one_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one1.png"


 two_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one2.png"
 three_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one4.png"
 four_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one3.png"


 one_arr=new Array(one_img,two_img,three_img,four_img);
 
 


 function test1(){
 var one=document.getElementById("one");
 one.style.background="url("+one_arr[count+1]+") no-repeat";
 count++;
 if(count>=4)
 {
  count=0;
  one.style.background="url("+one_arr[count]+") no-repeat";
 }
 
 
 var one_bg = one.style.background;
 var one_url =one_bg.split("(")[1].split(")")[0];
 
  if(one_url==one_img){
  alert("true")
 
 }


}
 
 
 
 


function test2(){
 var two=document.getElementById("two");
 two.style.background="url("+one_arr[count+1]+") no-repeat";
 count++;
 if(count>=4)
 {
  count=0;
  two.style.background="url("+one_arr[count]+") no-repeat";
 }
 
 
 var two_bg = two.style.background;
 var two_url =two_bg.split("(")[1].split(")")[0];
 
if(two_url==two_img){
  alert("true")
 
 }




}




function test3(){
 var three =document.getElementById("three");
 three.style.background="url("+one_arr[count+1]+") no-repeat";
 count++;
 if(count>=4)
 {
  count=0;
  three.style.background="url("+one_arr[count]+") no-repeat";
 }
 
 var three_bg = three.style.background;
 var three_url =three_bg.split("(")[1].split(")")[0];
 
 
 if(three_url==three_img){
  alert("true")
 
 }


}








function test4(){
 var four =document.getElementById("four");
 four.style.background="url("+one_arr[count+1]+") no-repeat";
 count++;
 if(count>=4)
 {
  count=0;
  four.style.background="url("+one_arr[count]+") no-repeat";
 }
 
 
 var four_bg = four.style.background;
 var four_url =four_bg.split("(")[1].split(")")[0];
console.log( four_url, four_img);
if(four_url==four_img){
  alert("true")
 
 }




}


if(four_url==four_img&&three_url==three_img&&two_url==two_img&&one_url==one_img){
alert("游戏结束")
}


</script>
</body>
</html>



加载中
0
wuyiw
wuyiw

既然想要全局访问, 最直接的修改就是将xxx_url改为全局变量啊. 但除了这个, 代码还是有挺多问题的, 你试试就知道.

让我来写的话, 我会写成这样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#container {
		width: 262px;
		height: 262px
	}
	.pipeline{
		display: inline-block;
		width: 50%;
		height: 50%; 
	}
	.fl {
		float: left;
	}
	.fr {
		float: right;
	}
</style>
</head>
<body>
	<div id="container">
		<img class="pipeline fl" /><img class="pipeline fl" />
		<br />
		<img class="pipeline fr" /><img class="pipeline fr" />
	</div>

	<script type="text/javascript">
		const imgs = Array.prototype.slice.call(document.querySelectorAll('#container img')), 
			imgSrcs = imgs.map(function(v, i) {
				return 'http://mall.wh.houselight.cn/njx/water_pipe/images/one' + (i+1) + '.png';
			});
		var count = 0;
		function init() {
			imgs.forEach(function(img, i) {
				img.addEventListener('click', function() {
					this.src = imgSrcs[(++count)%imgs.length];
					check();
				});
			});
			shuffle();
			check();
		}
		function shuffle() {
			var imgIndexes = imgs.map(function(v, i) {return i;});
			imgs.forEach(function(img, i) {
				var randIndex = Math.floor((Math.random()*imgIndexes.length));
				img.src = imgSrcs[imgIndexes[randIndex]];
				imgIndexes.splice(randIndex, 1);
			});
		}
		function check() {
			if (imgs.every(function(img, i) { // "every" requires IE >= 9
				return img.src == imgSrcs[i];
			})) {
				alert('游戏结束');
				shuffle();
				count = 0;
			}
		}
		init();
	</script>
</body>
</html>



http://runjs.cn/code/k1xhtwqx
爽常在
爽常在
谢谢哈!~~我自己也重新编写了代码!~~
0
爽常在
爽常在

引用来自“wuyiw”的评论

既然想要全局访问, 最直接的修改就是将xxx_url改为全局变量啊. 但除了这个, 代码还是有挺多问题的, 你试试就知道.

让我来写的话, 我会写成这样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#container {
		width: 262px;
		height: 262px
	}
	.pipeline{
		display: inline-block;
		width: 50%;
		height: 50%; 
	}
	.fl {
		float: left;
	}
	.fr {
		float: right;
	}
</style>
</head>
<body>
	<div id="container">
		<img class="pipeline fl" /><img class="pipeline fl" />
		<br />
		<img class="pipeline fr" /><img class="pipeline fr" />
	</div>

	<script type="text/javascript">
		const imgs = Array.prototype.slice.call(document.querySelectorAll('#container img')), 
			imgSrcs = imgs.map(function(v, i) {
				return 'http://mall.wh.houselight.cn/njx/water_pipe/images/one' + (i+1) + '.png';
			});
		var count = 0;
		function init() {
			imgs.forEach(function(img, i) {
				img.addEventListener('click', function() {
					this.src = imgSrcs[(++count)%imgs.length];
					check();
				});
			});
			shuffle();
			check();
		}
		function shuffle() {
			var imgIndexes = imgs.map(function(v, i) {return i;});
			imgs.forEach(function(img, i) {
				var randIndex = Math.floor((Math.random()*imgIndexes.length));
				img.src = imgSrcs[imgIndexes[randIndex]];
				imgIndexes.splice(randIndex, 1);
			});
		}
		function check() {
			if (imgs.every(function(img, i) { // "every" requires IE >= 9
				return img.src == imgSrcs[i];
			})) {
				alert('游戏结束');
				shuffle();
				count = 0;
			}
		}
		init();
	</script>
</body>
</html>



http://runjs.cn/code/k1xhtwqx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns=" http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.pipeline{
 width:131px;
 height:131px; 
}
</style>
</head><body>
<table>
<tr>
<td><div id="one" class="pipeline"  style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one3.png) no-repeat;" onclick="test1();"></div></td>
<td><div id="two" class="pipeline" style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one4.png) no-repeat;" onclick="test2();"></div></td>
</tr>
<tr>
<td><div id="three" class="pipeline"  style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one2.png) no-repeat;" onclick="test3();"></div></td>
<td><div id="four" class="pipeline" style="background:url(http://mall.wh.houselight.cn/njx/water_pipe/images/one1.png) no-repeat;" onclick="test4();"></div></td>

</tr>




</table>
<div style="display: ;">
<p id="p1">0</p>
<p id="p2">0</p>
<p id="p3">0</p>
<p id="p4">0</p>


</div>
<script type="text/javascript">


 p_one =document.getElementById("p1");
 p_two =document.getElementById("p2");
 p_three =document.getElementById("p3");
 p_four =document.getElementById("p4");
 p_five = document.getElementById("p5")
   
 one_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one1.png"
 two_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one2.png"
 three_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one3.png"
 four_img = "http://mall.wh.houselight.cn/njx/water_pipe/images/one4.png"




 one_arr=new Array(one_img,two_img,three_img,four_img);
 
 var one=document.getElementById("one");
 var two=document.getElementById("two");
 var three =document.getElementById("three");
 var four =document.getElementById("four");
 


 count=0;




  function test(obj,pobj,img){
 
  var one_bg=obj.style.background="url("+one_arr[count+1]+") no-repeat";
  count++;
  if(count>=4){
  count=0;
  var one_bg =obj.style.background="url("+one_arr[count]+") no-repeat";
 }


  if(one_bg.indexOf(img)!=-1){
pobj.innerHTML=1;
}else{
pobj.innerHTML=0;
}
  }


  function check(){
  //判断游戏结束
  if(p_one.innerHTML==1&&p_two.innerHTML==1&&p_three.innerHTML==1&&p_four.innerHTML ==1){
alert("游戏结束");
}
  }


one.onclick=function(){
  test(this,p_one,'one1.png');
  check();
}
two.onclick=function(){
  test(this,p_two,'one2.png');
  check();
}
three.onclick=function(){
  test(this,p_three,'one4.png');
  check();
}
four.onclick=function(){
  test(this,p_four,'one3.png');
  check();
}


</script>
</body>
</html>

返回顶部
顶部