国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js實現數字拼圖代碼展示

3403771864 / 467人閱讀

  話不多說,直接開干。

  重點:

  下圖我們可以看到,游戲區分為8個div,進行游戲時需要判斷點擊的div是否可移動,移動后判斷游戲是否結束。

  解決思路:將游戲界面看作一個div大盒子,將大盒子分為9個區域進行編號,這9個區域的位置始終不變;8個div以定位top和left控制其位置,設置9個區域的div分別可以往哪個區域移動,點擊時判斷可移動的編號區域內是否有div,若有,則無法向該方向移動。每次移動后檢查8個div的編號是否與區域的編號完全重合,若重合,則通關。

  運行情況

  HTML

 

</>復制代碼

  1.  <div id="container">
  2.   <!--最外面的DIV,用來包含里面的結構-->
  3.   <div id="game">
  4.   <!--游戲區,也就是大DIV方塊-->
  5.   <div id="d1">1</div>
  6.   <div id="d2">2</div>
  7.   <div id="d3">3</div>
  8.   <div id="d4">4</div>
  9.   <div id="d5">5</div>
  10.   <div id="d6">6</div>
  11.   <div id="d7">7</div>
  12.   <div id="d8">8</div>
  13.   </div>
  14.   <div id="control">
  15.   <!--游戲控制區-->
  16.   <p>
  17.   總用時:
  18.   <span id="timer"></span>
  19.   </p>
  20.   <!--顯示游戲時間區域-->
  21.   <p>
  22.   <button id="start">開始</button>
  23.   <button id="reset">重來</button>
  24.   </p>
  25.   <!--顯示控制按鈕區域-->
  26.   </div>
  27.   </div>

  CSS

</>復制代碼

  1.   * {
  2.   padding: 0;
  3.   margin: 0;
  4.   border: 0;
  5.   }
  6.   body {
  7.   width: 100%;
  8.   height: 100%;
  9.   }
  10.   #container {
  11.   position: relative;
  12.   width: 620px;
  13.   height: 450px;
  14.   margin: 0 auto;
  15.   margin-top: 100px;
  16.   border-radius: 1px;
  17.   }
  18.   #game {
  19.   position: absolute;
  20.   width: 450px;
  21.   height: 450px;
  22.   border-radius: 5px;
  23.   display: inline-block;
  24.   background-color: #ffe171;
  25.   box-shadow: 0 0 10px #ffe171;
  26.   }
  27.   #game div {
  28.   position: absolute;
  29.   width: 149px;
  30.   height: 149px;
  31.   box-shadow: 1px 1px 2px #777;
  32.   background-color: #20a6fa;
  33.   color: white;
  34.   text-align: center;
  35.   font-size: 150px;
  36.   line-height: 150px;
  37.   cursor: pointer;
  38.   transition: 0.3s;
  39.   }
  40.   #game div:hover {
  41.   color: #ffe171;
  42.   }
  43.   #control {
  44.   width: 150px;
  45.   height: 450px;
  46.   display: inline-block;
  47.   position: absolute;
  48.   top: 0;
  49.   right: 0;
  50.   }
  51.   #control button {
  52.   height: 25px;
  53.   font-size: 20px;
  54.   color: #222;
  55.   margin-top: 10px;
  56.   }
  57.   #start {
  58.   display: inline-block;
  59.   font-size: 28px;
  60.   width: 100px;
  61.   height: 28px;
  62.   background-color: #20a6fa;
  63.   color: #ffe171;
  64.   text-shadow: 1px 1px 2px #ffe171;
  65.   border-radius: 5px;
  66.   box-shadow: 2px 2px 5px #4c98f5;
  67.   text-align: center;
  68.   /* cursor:pointer 讓鼠標移到元素上面顯示不同的鼠標形狀,pointer是手型 */
  69.   cursor: pointer;
  70.   }
  71.   #reset {
  72.   display: inline-block;
  73.   font-size: 28px;
  74.   width: 100px;
  75.   height: 28px;
  76.   background-color: #20a6fa;
  77.   color: #ffe171;
  78.   text-shadow: 1px 1px 2px #ffe171;
  79.   border-radius: 5px;
  80.   box-shadow: 2px 2px 5px #4c98f5;
  81.   text-align: center;
  82.   cursor: pointer;
  83.   }
  84.   #d1 {
  85.   left: 0px;
  86.   }
  87.   #d2 {
  88.   left: 150px;
  89.   }
  90.   #d3 {
  91.   left: 300px;
  92.   }
  93.   #d4 {
  94.   top: 150px;
  95.   }
  96.   #d5 {
  97.   top: 150px;
  98.   left: 150px;
  99.   }
  100.   #d6 {
  101.   top: 150px;
  102.   left: 300px;
  103.   }
  104.   #d7 {
  105.   top: 300px;
  106.   }
  107.   #d8 {
  108.   left: 150px;
  109.   top: 300px;
  110.   }

  JS

 

</>復制代碼

  1.  var time = 0;
  2.   //添加暫停判斷
  3.   var pause = true;
  4.   var set_timer;
  5.   //創建編號,不使用第一個元素
  6.   var d = new Array(10);
  7.   for (var i = 1; i < 9; i++) {
  8.   d[i] = i;
  9.   }
  10.   d[9] = 0;
  11.   //大div編號可移動的位置
  12.   var d_direct = new Array(
  13.   [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]
  14.   );
  15.   //大div編號的位置[left,top]
  16.   var d_posXY = new Array(
  17.   [0][0, 0][150, 0][300, 0][0, 150][150, 150][300, 150][0, 300][150, 300][300, 300]
  18.   );
  19.   var game = document.querySelectorAll('#game>div');
  20.   for (var i = 0; i < game.length; i++) {
  21.   var j = i + 1;
  22.   game[i].setAttribute('index', j);
  23.   game[i].addEventListener('click'function(e{
  24.   move(e, e.target.getAttribute('index'));
  25.   });
  26.   }
  27.   //移動
  28.   function move(e, id{
  29.   //查找小div在大div中的位置
  30.   var i = 1;
  31.   for (i = 1; i < 10; i++) {
  32.   if (d[i] == id) {
  33.   break;
  34.   }
  35.   }
  36.   //查找小div可移動的位置,0則無法移動
  37.   var target_d = 0;
  38.   target_d = whereCanTo(i);
  39.   //判斷當前被點擊的小div是否可移動
  40.   if (target_d != 0) {
  41.   //設置當前大div編號為0
  42.   d[i] = 0;
  43.   //將目標大div編號設置為被點擊的小div編號
  44.   d[target_d] = id;
  45.   //設置被點擊小div的位置
  46.   document.getElementById('d' + id).style.left = d_posXY[target_d][0] + 'px';
  47.   document.getElementById('d' + id).style.top = d_posXY[target_d][1] + 'px';
  48.   }
  49.   //判斷游戲是否完成
  50.   var finish_flag = true;
  51.   for (var k = 1; k < 9; k++) {
  52.   if (d[k] != k) {
  53.   finish_flag = false;
  54.   break;
  55.   }
  56.   }
  57.   if (finish_flag == true) {
  58.   if (!pause) {
  59.   start();
  60.   alert('bingo congratulation!');
  61.   }
  62.   }
  63.   }
  64.   //查找并返回小div可以移動的編號
  65.   function whereCanTo(cur_div{
  66.   var j = 0;
  67.   var move_flag = false;
  68.   for (j = 0; j < d_direct[cur_div].length; j++) {
  69.   if (d[d_direct[cur_div][j]] == 0) {
  70.   move_flag = true;
  71.   break;
  72.   }
  73.   }
  74.   if (move_flag == true) {
  75.   return d_direct[cur_div][j];
  76.   } else {
  77.   return 0;
  78.   }
  79.   }
  80.   //設置計時
  81.   function timer({
  82.   time += 1;
  83.   var min = parseInt(time / 60);
  84.   var s = time % 60;
  85.   document.getElementById('timer').innerHTML = min + '分' + s + '秒';
  86.   }
  87.   //開始暫停
  88.   var start = document.querySelector('#start');
  89.   start.addEventListener('click', sta);
  90.   function sta({
  91.   if (pause) {
  92.   start.innerHTML = '暫停';
  93.   pause = false;
  94.   set_timer = setInterval(timer, 1000);
  95.   } else {
  96.   start.innerHTML = '開始';
  97.   pause = true;
  98.   clearInterval(set_timer);
  99.   }
  100.   }
  101.   //重置游戲
  102.   var reset = document.querySelector('#reset');
  103.   reset.addEventListener('click', res);
  104.   function res({
  105.   time = 0;
  106.   random_d();
  107.   if (pause) {
  108.   sta();
  109.   }
  110.   }
  111.   //隨機打亂
  112.   function random_d({
  113.   for (var i = 9; i > 1; i--) {
  114.   var to = parseInt(Math.random() * (i - 1) + 1);
  115.   //設置當前div為隨機產生的div位置
  116.   if (d[i] != 0) {
  117.   document.getElementById('d' + d[i]).style.left = d_posXY[to][0] + 'px';
  118.   document.getElementById('d' + d[i]).style.top = d_posXY[to][1] + 'px';
  119.   }
  120.   //設置隨機產生的div位置為當前div位置
  121.   if (d[to] != 0) {
  122.   document.getElementById('d' + d[to]).style.left = d_posXY[i][0] + 'px';
  123.   document.getElementById('d' + d[to]).style.top = d_posXY[i][1] + 'px';
  124.   }
  125.   //隨機產生的div與當前的div編號互換
  126.   var temp = d[to];
  127.   d[to] = d[i];
  128.   d[i] = temp;
  129.   }
  130.   }
  131.   //初始化
  132.   window.addEventListener('load', res);

    代碼都已展示,希望大家可以好好學習,多讀熟練掌握。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/128189.html

相關文章

  • 利用Vue.js實現拼圖游戲

    摘要:之前寫過一篇基于的表格分頁組件的文章,主要介紹了組件的編寫方法,有興趣的可以訪問這里進行閱讀前言為了進一步讓大家了解的神奇魅力,了解的一種以數據為驅動的理念,本文主要利用實現了一個數字拼圖游戲,其原理并不是很復雜,效果圖如下展示地址為有能力 之前寫過一篇《基于Vue.js的表格分頁組件》的文章,主要介紹了Vue組件的編寫方法,有興趣的可以訪問這里進行閱讀:https://segment...

    wh469012917 評論0 收藏0
  • 展示js簡單拼圖游戲

      我們看看js實現簡單拼圖游戲的詳細代碼,HTML僅有一個id為game的div,也不錯編寫CSS,僅要img文件夾中放置一個圖片文件就行,此處我放置的是LOL皇子的圖片,圖片名為'lol.png'  <divid="game">   </div>  下面展示具體效果  多的不說,直接上js代碼  /**   *游戲配置   */   ...

    3403771864 評論0 收藏0
  • 基于JavaScript求解八數碼最短路徑并生成動畫效果

    摘要:寫在最前本次分享一下通過廣度優先搜索解決八數碼問題并展示其最短路徑的動畫效果。一個排列中逆序的總數就稱為這個排列的逆序數。如果起始狀態與結束狀態的逆序數的奇偶性相同,則說明狀態可達,反之亦然。 寫在最前 本次分享一下通過廣度優先搜索解決八數碼問題并展示其最短路徑的動畫效果。 歡迎關注我的博客,不定期更新中—— 效果預覽 該效果為從[[2, 6, 3],[4, 8, 0],[7, 1, ...

    Jioby 評論0 收藏0
  • 正在失業中的《課多周刊》(第3期)

    摘要:正在失業中的課多周刊第期我們的微信公眾號,更多精彩內容皆在微信公眾號,歡迎關注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關于的不好之處。淺談超時一運維的排查方式。 正在失業中的《課多周刊》(第3期) 我們的微信公眾號:fed-talk,更多精彩內容皆在微信公眾號,歡迎關注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大的...

    robin 評論0 收藏0

發表評論

0條評論

3403771864

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<