您好,登錄后才能下訂單哦!
這篇文章主要介紹“js如何實(shí)現(xiàn)數(shù)字拼圖”,在日常操作中,相信很多人在js如何實(shí)現(xiàn)數(shù)字拼圖問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”js如何實(shí)現(xiàn)數(shù)字拼圖”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
重點(diǎn):
游戲區(qū)分為8個(gè)div,進(jìn)行游戲時(shí)需要判斷點(diǎn)擊的div是否可移動(dòng),移動(dòng)后判斷游戲是否結(jié)束。
解決思路:將游戲界面看作一個(gè)div大盒子,將大盒子分為9個(gè)區(qū)域進(jìn)行編號(hào),這9個(gè)區(qū)域的位置始終不變;8個(gè)div以定位top和left控制其位置,設(shè)置9個(gè)區(qū)域的div分別可以往哪個(gè)區(qū)域移動(dòng),點(diǎn)擊時(shí)判斷可移動(dòng)的編號(hào)區(qū)域內(nèi)是否有div,若有,則無(wú)法向該方向移動(dòng)。每次移動(dòng)后檢查8個(gè)div的編號(hào)是否與區(qū)域的編號(hào)完全重合,若重合,則通關(guān)。
運(yùn)行情況
HTML
<div id="container"> <!--最外面的DIV,用來(lái)包含里面的結(jié)構(gòu)--> <div id="game"> <!--游戲區(qū),也就是大DIV方塊--> <div id="d1">1</div> <div id="d2">2</div> <div id="d3">3</div> <div id="d4">4</div> <div id="d5">5</div> <div id="d6">6</div> <div id="d7">7</div> <div id="d8">8</div> </div> <div id="control"> <!--游戲控制區(qū)--> <p> 總用時(shí): <span id="timer"></span> </p> <!--顯示游戲時(shí)間區(qū)域--> <p> <button id="start">開(kāi)始</button> <button id="reset">重來(lái)</button> </p> <!--顯示控制按鈕區(qū)域--> </div> </div>
CSS
* { padding: 0; margin: 0; border: 0; } body { width: 100%; height: 100%; } #container { position: relative; width: 620px; height: 450px; margin: 0 auto; margin-top: 100px; border-radius: 1px; } #game { position: absolute; width: 450px; height: 450px; border-radius: 5px; display: inline-block; background-color: #ffe171; box-shadow: 0 0 10px #ffe171; } #game div { position: absolute; width: 149px; height: 149px; box-shadow: 1px 1px 2px #777; background-color: #20a6fa; color: white; text-align: center; font-size: 150px; line-height: 150px; cursor: pointer; transition: 0.3s; } #game div:hover { color: #ffe171; } #control { width: 150px; height: 450px; display: inline-block; position: absolute; top: 0; right: 0; } #control button { height: 25px; font-size: 20px; color: #222; margin-top: 10px; } #start { display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; /* cursor:pointer 讓鼠標(biāo)移到元素上面顯示不同的鼠標(biāo)形狀,pointer是手型 */ cursor: pointer; } #reset { display: inline-block; font-size: 28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer; } #d1 { left: 0px; } #d2 { left: 150px; } #d3 { left: 300px; } #d4 { top: 150px; } #d5 { top: 150px; left: 150px; } #d6 { top: 150px; left: 300px; } #d7 { top: 300px; } #d8 { left: 150px; top: 300px; }
JS
var time = 0; //添加暫停判斷 var pause = true; var set_timer; //創(chuàng)建編號(hào),不使用第一個(gè)元素 var d = new Array(10); for (var i = 1; i < 9; i++) { d[i] = i; } d[9] = 0; //大div編號(hào)可移動(dòng)的位置 var d_direct = new Array( [0], [2, 4], [1, 3, 5], [2, 6], [1, 5, 7], [2, 4, 6, 8], [3, 5, 9], [4, 8], [5, 7, 9], [6, 8] ); //大div編號(hào)的位置[left,top] var d_posXY = new Array( [0], [0, 0], [150, 0], [300, 0], [0, 150], [150, 150], [300, 150], [0, 300], [150, 300], [300, 300] ); var game = document.querySelectorAll('#game>div'); for (var i = 0; i < game.length; i++) { var j = i + 1; game[i].setAttribute('index', j); game[i].addEventListener('click', function(e) { move(e, e.target.getAttribute('index')); }); } //移動(dòng) function move(e, id) { //查找小div在大div中的位置 var i = 1; for (i = 1; i < 10; i++) { if (d[i] == id) { break; } } //查找小div可移動(dòng)的位置,0則無(wú)法移動(dòng) var target_d = 0; target_d = whereCanTo(i); //判斷當(dāng)前被點(diǎn)擊的小div是否可移動(dòng) if (target_d != 0) { //設(shè)置當(dāng)前大div編號(hào)為0 d[i] = 0; //將目標(biāo)大div編號(hào)設(shè)置為被點(diǎn)擊的小div編號(hào) d[target_d] = id; //設(shè)置被點(diǎn)擊小div的位置 document.getElementById('d' + id).style.left = d_posXY[target_d][0] + 'px'; document.getElementById('d' + id).style.top = d_posXY[target_d][1] + 'px'; } //判斷游戲是否完成 var finish_flag = true; for (var k = 1; k < 9; k++) { if (d[k] != k) { finish_flag = false; break; } } if (finish_flag == true) { if (!pause) { start(); alert('bingo congratulation!'); } } } //查找并返回小div可以移動(dòng)的編號(hào) function whereCanTo(cur_div) { var j = 0; var move_flag = false; for (j = 0; j < d_direct[cur_div].length; j++) { if (d[d_direct[cur_div][j]] == 0) { move_flag = true; break; } } if (move_flag == true) { return d_direct[cur_div][j]; } else { return 0; } } //設(shè)置計(jì)時(shí) function timer() { time += 1; var min = parseInt(time / 60); var s = time % 60; document.getElementById('timer').innerHTML = min + '分' + s + '秒'; } //開(kāi)始暫停 var start = document.querySelector('#start'); start.addEventListener('click', sta); function sta() { if (pause) { start.innerHTML = '暫停'; pause = false; set_timer = setInterval(timer, 1000); } else { start.innerHTML = '開(kāi)始'; pause = true; clearInterval(set_timer); } } //重置游戲 var reset = document.querySelector('#reset'); reset.addEventListener('click', res); function res() { time = 0; random_d(); if (pause) { sta(); } } //隨機(jī)打亂 function random_d() { for (var i = 9; i > 1; i--) { var to = parseInt(Math.random() * (i - 1) + 1); //設(shè)置當(dāng)前div為隨機(jī)產(chǎn)生的div位置 if (d[i] != 0) { document.getElementById('d' + d[i]).style.left = d_posXY[to][0] + 'px'; document.getElementById('d' + d[i]).style.top = d_posXY[to][1] + 'px'; } //設(shè)置隨機(jī)產(chǎn)生的div位置為當(dāng)前div位置 if (d[to] != 0) { document.getElementById('d' + d[to]).style.left = d_posXY[i][0] + 'px'; document.getElementById('d' + d[to]).style.top = d_posXY[i][1] + 'px'; } //隨機(jī)產(chǎn)生的div與當(dāng)前的div編號(hào)互換 var temp = d[to]; d[to] = d[i]; d[i] = temp; } } //初始化 window.addEventListener('load', res);
到此,關(guān)于“js如何實(shí)現(xiàn)數(shù)字拼圖”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。