您的位置: 首页  >  IT文章  >  jquery 兑现撒金币效果

jquery 兑现撒金币效果

分类: IT文章 • 2022-10-09 11:19:37
jquery 实现撒金币效果
html>
<head>
<title></title>
<style type="text/css">
body{padding:0px;margin:0px;font-size:12px;overflow:hidden;background:#000;}
#container div{padding:10px;position:absolute;border:0px dotted brown;width:0px;color:#FF0000;cursor:pointer;}
.text{padding:10px;color:#ccc;}
</style>

<script type="text/javascript" src="http://www.cozof.com/images/js/jquery.min.1.5.js"></script>
<script type="text/javascript">
var goldFallInterval;
var goldFallStart=0;
function initGoldFall(){
	var length = $('div','#container').length;
	
	if(length<4){
		for(i=0;i<6;i++){
		 $('div','#container').clone().prependTo('#container');
		}
	}
	
}
function startGoldFall(){
	clearInterval(goldFallInterval);
	endCount = 0;
	range();
	goldFallStart = new Date().getTime();
	goldFallInterval= setInterval(dropGoldFall,200);
}

//排列
function range()
{
 var num = 1;
 $('div','#container').each(function(i)
 {
  var ww = $(window).width();//窗口宽度
  var wh = $(window).height();

  var ot = -20;//从头部以上开始

  $(this).css({"left":(i*(ww/64)) +"px","top":"-50px"});//距左距离保持，距上距离变化
  num ++;
 });
}

//降落
function dropGoldFall()
{
	var now =  new Date().getTime();
	if(now - goldFallStart >3000){
		
		clearInterval(goldFallInterval);
	}
 var $objs =  $('div','#container');
 $objs.each(function(i)
 {
  var wh   = $(window).height();
  var ol   = $(this).offset().left;
  var ot   = $(this).offset().top;
  var rnd  = Math.round(Math.random()*100);
  var rnd2 = Math.round(Math.random()*50);
  
 //降落的速度
  if(ot<=wh)//如果掉到窗口以下
  {    
  	$(this).css({"top":(ot+rnd+rnd2) +"px"});
  }
 });
}


function fn(){
	initGoldFall();
	startGoldFall();
}
</script>
</head>
<body>
<!--begin-->
<div id="container">
<div><img src=image/gold.png ></div>
</div>

woafdasfasfdasfsadfasfasf<input type=button onclick="fn();" value=test>
<!--end-->

</body>
<script language="javascript">

</script>
</html>


问题描述

HTML5游戏中过关希望实现撒金币效果，最开始通过canvas写了几个简单的随机函数绘制金币，发现效果不行。
通过收索发现有jquery实现的下雪效果：
https://github.com/kopipejst/jqSnow

希望更换雪片的贴图，后发现jquery的几个下雪模型都是使用  '&#10052;' 这个符号来实现的，所以无法更换贴图。
最终参考了 
http://www.cozof.com/demo/matrix/
中的代码实现了一个简单的。


实现代码



自己准备金币的图片，直接运行。

通过调用一下代码，可多次启动。
initGoldFall();
startGoldFall();



相关推荐