个人中心
gpt4 book ai didi

javascript - 创建将拖入支架的图像数组

转载 作者：行者123 更新时间：2023-11-27 23:24:16 25 4
gpt4 key购买 nike

我创建了一个游戏，将图 block 拖到其匹配的支架上。我希望能够将数字更改为图像。这是我的代码:

<!doctype html>
<html lang="en">
<head>
<style>
body {
  margin: 30px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
}

/* Give headings their own font */

h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* Main content area */

#content {
  margin: 80px 70px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}





/* Slots for final card positions */

#tileSlots {
  margin: 50px auto 0 auto;
  background: #ddf;
  color: green;


}

/* The initial pile of unsorted cards */

#tilePile {
  margin: 0 auto;
  background: #ffd;
}

#tileSlots, #tilePile {
  width: 910px;
  height: 120px;
  padding: 20px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}

/* Individual cards and slots */

#tileSlots div, #tilePile div {
  float: left;
  width: 150px;
  height: 78px;
  padding: 10px;
  padding-top: 40px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 0 10px;
  background: #fff;
}

#tileSlots div:first-child, #tilePile div:first-child {
  margin-left: 0;
}

#tileSlots div.hovered {
  background: #aaa;
}

#tileSlots div {
  border-style: solid;


}

#tilePile div {
  background: #666;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;
}

#tilePile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

/* Individually coloured cards */

#tiles1.correct { background: red; }
#tiles2.correct { background: brown; }
#tiles3.correct { background: orange; }
#tiles4.correct { background: yellow; }
#tiles5.correct { background: green; }


/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

</style>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

var correctTiles = 0;
$( init );

function init() {

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#tilePile').html( '' );
  $('#tileSlots').html( '' );

  // Create the pile of shuffled cards
  var tiles = [ 1, 2, 3, 4, 5];
  tiles.sort( function() { return Math.random() - .1 } );

  for ( var i=0; i<5; i++ ) {
    $('<div>' + tiles[i] + '</div>').data( 'tiles', tiles[i] ).attr( 'id', 'tiles'+tiles[i] ).appendTo( '#tilePile' ).draggable( {
      containment: '#content',
      stack: '#tilePile div',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the card slots

  var tiles = [ 'one', 'two', 'three', 'four', 'five' ];
  for ( var i=1; i<=5; i++ ) {
    $('<div>' + tiles[i-1] + '</div>').data( 'tiles', i ).appendTo( '#tileSlots' ).droppable( {
      accept: '#tilePile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'tiles' );
  var cardNumber = ui.draggable.data( 'tiles' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'correct' );
    $(this).droppable( 'correct' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', 'invalid' );
    correctCards++;
  } 

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 5 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }




}

</script>

</head>
<body>

<div id="content">

  <div id="tilePile"> </div>
  <div id="tileSlots"> </div>

  <div id="successMessage">
    <h2>You did it!</h2>
    <button onclick="init()">Play Again</button>
  </div>

</div>

</body>
</html>

有没有一种方法可以使用第一个数组来保存可以拖动到特定容器中的图像？

最佳答案

为您的图像指定相同的名称，但使用与其卡相对应的不同编号:
my-image-1.jpg
my-image-2.jpg
my-image-3.jpg
my-image-4.jpg
my-image-5.jpg

然后只需更改循环即可创建卡片，如下所示:

  for ( var i=0; i<5; i++ ) {
    $('<div><img src="/imagePath/my-image-' + tiles[i] + '.jpg" alt=""></div>').data( 'tiles', tiles[i] ).attr( 'id', 'tiles'+tiles[i] ).appendTo( '#tilePile' ).draggable( {
      containment: '#content',
      stack: '#tilePile div',
      cursor: 'move',
      revert: true
    });
  }


或者最优雅的方式(所有图像可以有不同的名称和扩展名):

使用图像名称创建一个数组，如下所示:

var images = ["my-image-1.jpg", "my-image-2.jpg", "my-image-3.jpg", "my-image-4.jpg", "my-image-5.jpg"];

然后改变你的循环来创建你的卡片，如下所示:

  for ( var i=0; i<5; i++ ) {
    $('<div><img src="/imagePath/' + images[tiles[i]-1] + '" alt=""></div>').data( 'tiles', tiles[i] ).attr( 'id', 'tiles'+tiles[i] ).appendTo( '#tilePile' ).draggable( {
      containment: '#content',
      stack: '#tilePile div',
      cursor: 'move',
      revert: true
    });
  }

如果您更喜欢使用图像作为带有封面属性的背景，请像这样(不要忘记跨浏览器支持的所有前缀):

  for ( var i=0; i<5; i++ ) {
    $('<div style="background: url('+ images[tiles[i]-1] + ');background-size: cover;"></div>').data( 'tiles', tiles[i] ).attr( 'id', 'tiles'+tiles[i] ).appendTo( '#tilePile' ).draggable( {
      containment: '#content',
      stack: '#tilePile div',
      cursor: 'move',
      revert: true
    } );
  }

注意:不要忘记修改图像的路径并更新 CSS，以使图像填充其容器。

关于javascript - 创建将拖入支架的图像数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35105951/

25 4 0
文章推荐： javascript - 如何通过在 ASP.NET 中选择单选按钮来启用和禁用下拉列表
文章推荐： javascript - 比较 Angular JS 中的日期
文章推荐： c++ - ctime(x) = ctime(x-600) 为什么？
文章推荐： c++ - GLSL 和 FBOs - glActiveTexture 不起作用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com