使用数组的Javascript + jQuery游戏（数字和图像）

对不起，我不是很清楚的标题。如果有人能帮助我，我正在游荡。我正在制作一款游戏，并且想要制作一个数字（告诉你有多少值得信用的东西），还有一张图片（以显示您购买的东西）。我将所有这些阵列放入一个滑块中，以便玩家可以看到他们可以购买的不同物品，这就是我迄今为止所做的。我的项目的网址是：theassets.staticloud.com 这只是我敲起来给你看我在做什么的基本思想：使用数组的Javascript + jQuery游戏（数字和图像）

<html> 
<head> 
    <title>Test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript"> 
var island = new Array(); 
island[0] = 7000; 
island[1] = $islandimg; 
    </script> 
    </head> 
    <body> 
      <img src="http://avatarmaker.net/free-avatars/avatars/nature_217/scenery_275/moorea_island_avatar_100x100_83622.jpg" id="islandimg"> 
      <body> 

</html>

这就是我的工作：

<!doctype html> 

<html lang="en"> 
<body bgcolor="black"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Slider - Slider scrollbar</title> 
<center> 
<img src="theassetsimg.png"> 
<br /> 
<br /> 
<center><table> 
<tr><td><img src="cooltext819230394.png" onmouseover="this.src='cooltext819230394MouseOver.png';" onmouseout="this.src='cooltext819230394.png';" /></td> 
<td><img src="cooltext819231213.png" onmouseover="this.src='cooltext819231213MouseOver.png';" onmouseout="this.src='cooltext819231213.png';" /><a></td> 
<td><img src="cooltext819232096.png" onmouseover="this.src='cooltext819232096MouseOver.png';" onmouseout="this.src='cooltext819232096.png';" /><a></td></tr> 
</table></center> 
</center>  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    .scroll-pane { overflow: auto; width: 99%; float:left; } 
    .scroll-content { width: 2440px; float: left; } 
    .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } 
    * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ 
    .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } 
    .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } 
    .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } 
    .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } 
    .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } 
    </style> 
    <script> 
    $(function() { 
     //scrollpane parts 
     var scrollPane = $(".scroll-pane"), 
      scrollContent = $(".scroll-content"); 

     //build slider 
     var scrollbar = $(".scroll-bar").slider({ 
      slide: function(event, ui) { 
       if (scrollContent.width() > scrollPane.width()) { 
        scrollContent.css("margin-left", Math.round(
         ui.value/100 * (scrollPane.width() - scrollContent.width()) 
        ) + "px"); 
       } else { 
        scrollContent.css("margin-left", 0); 
       } 
      } 
     }); 

     //append icon to handle 
     var handleHelper = scrollbar.find(".ui-slider-handle") 
     .mousedown(function() { 
      scrollbar.width(handleHelper.width()); 
     }) 
     .mouseup(function() { 
      scrollbar.width("100%"); 
     }) 
     .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>") 
     .wrap("<div class='ui-handle-helper-parent'></div>").parent(); 

     //change overflow to hidden now that slider handles the scrolling 
     scrollPane.css("overflow", "hidden"); 

     //size scrollbar and handle proportionally to scroll distance 
     function sizeScrollbar() { 
      var remainder = scrollContent.width() - scrollPane.width(); 
      var proportion = remainder/scrollContent.width(); 
      var handleSize = scrollPane.width() - (proportion * scrollPane.width()); 
      scrollbar.find(".ui-slider-handle").css({ 
       width: handleSize, 
       "margin-left": -handleSize/2 
      }); 
      handleHelper.width("").width(scrollbar.width() - handleSize); 
     } 

     //reset slider value based on scroll content position 
     function resetValue() { 
      var remainder = scrollPane.width() - scrollContent.width(); 
      var leftVal = scrollContent.css("margin-left") === "auto" ? 0 : 
       parseInt(scrollContent.css("margin-left")); 
      var percentage = Math.round(leftVal/remainder * 100); 
      scrollbar.slider("value", percentage); 
     } 

     //if the slider is 100% and window gets larger, reveal content 
     function reflowContent() { 
       var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left"), 10); 
       var gap = scrollPane.width() - showing; 
       if (gap > 0) { 
        scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10) + gap); 
       } 
     } 

     //change handle position on window resize 
     $(window).resize(function() { 
      resetValue(); 
      sizeScrollbar(); 
      reflowContent(); 
     }); 
     //init scrollbar size 
     setTimeout(sizeScrollbar, 10);//safari wants a timeout 
    }); 
    </script> 
</head> 
<body> 

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 
    <div class="scroll-content"> 
     <div class="scroll-content-item ui-widget-header"><img src="http://avatarmaker.net/free-avatars/avatars/nature_217/scenery_275/moorea_island_avatar_100x100_83622.jpg" id=""></div> 
     <div class="scroll-content-item ui-widget-header"><img src="http://i31.twenga.com/jewellery/watch/nixon-watches-all-gold-tp_531465411970057721.jpg"></div> 
     <div class="scroll-content-item ui-widget-header"><img src="http://www.glitteringstones.com/Images/bluediamond.gif"></div> 
     <div class="scroll-content-item ui-widget-header"><img src="http://www.rac.co.uk/images/tiles/car-driving.aspx"></div> 
    </div> 
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 
     <div class="scroll-bar"></div> 
    </div> 
</div> 


</body> 
</html>

来源

2012-11-10 LucaSpeedStack

请说明您尝试制作的阵列所遇到的问题。 –

我的数组只是工作而我试图用图像和数字制作一个数组 – LucaSpeedStack

'$ islandimg'不涉及任何内容。也许你的意思是$（“＃islandimg”），因为它是一个ID？ – pimvdb

您可能需要创建对象

var items = []; 

items.push({ 
    name: 'Island', 
    worth: 7000, 
    image: 'http://../island.jpg' 
}); 

items.push({ 
    name: 'Watch', 
    worth: 100, 
    image: 'http://../watch.jpg' 
});

然后你可以遍历项目数组和访问所需的属性数组

来源

2012-11-10 15:11:41 lostsource

omg谢谢你好多 – LucaSpeedStack

我不明白你怎么能打电话给一个单独的项目 – LucaSpeedStack

there items.push？ – LucaSpeedStack

使用数组的Javascript + jQuery游戏（数字和图像）

回答

相关问题