如何创建寻找元素网页游戏答案

【问题标题】：how to create finding elements web game如何创建寻找元素网页游戏
【发布时间】：2014-05-25 15:20:10
【问题描述】：

我正在尝试构建一个网页游戏，显示凌乱的办公室背景和办公室元素，用户需要找到这些元素。像这样的东西： http://www.games2rule.com/play/messy-office-room/9548

什么是正确的方法？任何可以节省我时间的框架？我应该使用画布还是只使用绑定点击事件的绝对位置的简单div？例如，创建一个显示办公室背景和笔记本电脑的主 div：

<div id="office-background">
    <div id="laptop"></div>
</div>

#office-background 将是 position:relative 并且笔记本电脑将在其上。

谢谢！

【问题讨论】：

标签： javascript jquery html frameworks game-physics

【解决方案1】：

您可以拥有如您所描述的背景和许多元素，例如笔记本电脑、椅子、打印机桌作为 div。然后，一旦找到这些元素，将它们拖放到另一个 div 的找到的篮子中。

http://jqueryui.com/draggable/

http://jqueryui.com/droppable/

这将允许您对元素做一些事情，而不仅仅是单击使其更具交互性。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui      .css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 </style>
 <script>
 $(function() {
 $( "#draggable" ).draggable();
 $( "#droppable" ).droppable({
   drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
   }
  });
 });
 </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
 <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>


</body>
</html>

【讨论】：