实现拼图小游戏

最新推荐文章于 2024-02-29 15:52:19 发布

xiaoTstudent

最新推荐文章于 2024-02-29 15:52:19 发布

阅读量232

点赞数 1

分类专栏：前端文章标签：拼图

本文链接：https://blog.csdn.net/qq_41804434/article/details/100568738

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html文件

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js\pt.js"></script>
	<link rel="stylesheet" type="text/css" href="css\pt.css">
</head>
<body>
	<h1>拼图游戏</h1>
	<div id="picture">
		<div class="img" index="0">
			<img src="images/0.jpg" num = "0">
		</div>
		<div class="img" index="1">
			<img src="images/1.jpg" num = "1">
		</div>
		<div class="img" index="2">
			<img src="images/2.jpg" num = "2">
		</div>
		<div class="img" index="3">
			<img src="images/3.jpg" num = "3">
		</div>
		<div class="img" index="4">
			<img src="images/4.jpg" num = "4">
		</div>
		<div class="img" index="5">
			<img src="images/5.jpg" num = "5">
		</div>
		<div class="img" index="6">
			<img src="images/6.jpg" num = "6">
		</div>
		<div class="img" index="7">
			<img src="images/7.jpg" num = "7">
		</div>
		<div class="img" index="8">
			<img   num = "8">
		</div>
	</div>
	<div id="restart">
		<button onclick="randomimg()">开始\重新开始</button>
	</div>
</body>
</html>

css文件

h1{
	text-align: center;
}
#picture,#restart,#change-picture{
	margin-top: 50px;
	/*background-color: pink;*/
	margin-left: auto;
	margin-right: auto;
}
#picture{
	width: 420px;
	height: 420px;
	position: relative;
}
#picture div{
	width: 138px;
	height: 138px;
	border: 1px solid black;
	float: left;

}
#picture div img{
	width: 138px;
	height: 138px;
	cursor: pointer;
	position: absolute;
}
#restart button{
	margin-left: 600px;
	width: 150px;
    height: 40px;
    font-size: 15px;
}

js文件

window.onload = function(){
    var picture = document.getElementById('picture');
    var div = picture.getElementsByTagName('div');
    var imgArr = picture.getElementsByTagName('img');
    var restart = document.getElementById('restart');
    var changepicture = document.getElementById('change-picture');
    var j;
    //实现随机打乱，并可还原
    randomimg = function(){
        for (var K = 0; K < 20; K++) {
            for (var k = 0; k < 9; k++) {
            //随机打乱，空白图片与周围图片进行交换
                var Arr = [1,-1,-3,3];
                var arr = Arr[Math.floor(Math.random()*Arr.length)];//随机取1,-1,-3,3
                if (div[k].children[0].src=="") {
                    if (arr == 1) {
                        if (k+arr != 3 && k+arr != 6 && k+arr< 9) {
                            var aj = k+1;
                            var myNumone = parseInt(div[k].children[0].getAttribute('num'));
                            var myNumtwo = parseInt(div[aj].children[0].getAttribute('num'));
                            // alert(myNumone)
                            div[k].innerHTML = '<img src="images/' + myNumtwo + '.jpg">';
                            div[k].children[0].setAttribute('num',myNumtwo)
                            div[aj].innerHTML = '<img' + '>';
                            div[aj].children[0].setAttribute('num',myNumone);
                        }
                    }
                    if (arr==-1) {
                        if (k+arr != 5 && k+arr != 2 && k > 0) {
                            var aj = k-1;
                            var myNumone = parseInt(div[k].children[0].getAttribute('num'));
                            var myNumtwo = parseInt(div[aj].children[0].getAttribute('num'));
                            // alert(myNumone)
                            div[k].innerHTML = '<img src="images/' + myNumtwo + '.jpg">';
                            div[k].children[0].setAttribute('num',myNumtwo)
                            div[aj].innerHTML = '<img' + '>';
                            div[aj].children[0].setAttribute('num',myNumone);
                        }
                    }
                    if (arr==-3) {
                        if (k+arr >= 0) {
                            var aj = k-3;
                            var myNumone = parseInt(div[k].children[0].getAttribute('num'));
                            var myNumtwo = parseInt(div[aj].children[0].getAttribute('num'));
                            // alert(myNumone)
                            div[k].innerHTML = '<img src="images/' + myNumtwo + '.jpg">';
                            div[k].children[0].setAttribute('num',myNumtwo)
                            div[aj].innerHTML = '<img' + '>';
                            div[aj].children[0].setAttribute('num',myNumone);
                        }
                    }
                    if (arr==3) {
                        if (k+arr < 9) {
                            var aj = k+3;
                            var myNumone = parseInt(div[k].children[0].getAttribute('num'));
                            var myNumtwo = parseInt(div[aj].children[0].getAttribute('num'));
                            div[k].innerHTML = '<img src="images/' + myNumtwo + '.jpg">';
                            div[k].children[0].setAttribute('num',myNumtwo)
                            div[aj].innerHTML = '<img' + '>';
                            div[aj].children[0].setAttribute('num',myNumone);
                        }
                    }
                }
            }
        }
    }
    var onep;
    for (var i = 0; i < imgArr.length; i++) {
        div[i].id = i;//点击空白图片周围一张图片，该图片与空白区进行交换
        div[i].onclick = function(){
            var p = div[this.id].getAttribute('index');
            var myNum = parseInt(imgArr[this.id].getAttribute('num'));
            var myNumOne = myNum;
            var hvalue;
            for (var h = 0; h < div.length; h++) {
                if (div[h].children[0].src=="") 
                    hvalue = h;
            }
            onep = div[hvalue].getAttribute('index');
            var sum = parseInt(onep) + parseInt(p);//取出onep和p中的值相加
            //实现只能点击空白图片周围图片才能交换
            if ((Math.abs(onep-p) == 1 && sum != 5 && sum != 11) || Math.abs(onep-p) == 3) {
                var myNumNull = parseInt(div[hvalue].children[0].getAttribute('num'));
                div[this.id].innerHTML = '<img' + '>';
                div[this.id].children[0].setAttribute('num',myNumNull);
                div[hvalue].innerHTML = '<img src="images/' + myNumOne + '.jpg">';
                div[hvalue].children[0].setAttribute('num',myNumOne);
            }
            //判断是否成功
            var c = 0;
            for (var i = 0; i < div.length; i++) {
                 var divnum = parseInt(div[i].getAttribute('index'));
                 var imgnum = parseInt(div[i].children[0].getAttribute('num'));
                 //判断所有div中的'index'值是否与对应img中的'num'的值相等
                if (divnum == imgnum) {
                    c++;
                    if (c == 9) {
                        alert('游戏成功');
                    }
                }
            }
        }
    }
}