注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

js小游戏-吃大饼代码  

2014-03-11 23:34:35|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
js小游戏-吃大饼代码 - 湖小叶叶 - 米欧光影工作室
 

玩法:


原始代码(单一html页面)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mio小游戏-吃大饼v3.01</title>
<style>
*{ padding:0; margin:0;}
body{ overflow:hidden; background:#fff; /*#f6f7fb;*/ font-family:'微软雅黑';}

#top{width:600px; margin:0 auto; font-size:12px;}
#top p{font-size:20px;}
#top span{color:red;}

/*---------------舞台、小球、记分牌的样式-----------------*/
#box{ width:550px; height:500px; background:#eee; margin:10px auto; padding-left:-50px;
border:#0096ff 1px solid; position:relative;}
#pies{ background:#efeeef; height:100%;position:relative; overflow:hidden;}
#pies li{ list-style:none; border-radius:50%; overflow:hidden;
width:50px; height:50px; line-height:50px; color:#000; position:absolute;
text-align:center; left:250px; margin:0px; font-size:20px;
background:#91bd09;
cursor:pointer; }
#pies li:hover{
background:#749a02; color:#fff;
}



/*---积分榜-----*/
#score{ width:80px; height:40px; background:#fff; position:absolute;
top:0;right:0;padding:10px; opacity:.4;
font-size:15px;}
#score:hover{ opacity:1;}
#score li{ list-style:none;}


/*---------开始和结束按钮-----------*/
#start, #stop{
width:90px; height:30px;
line-height:30px; text-align:center; font-size:20px;
color:#000; background:#fff;
border:#0096ff 1px solid;
border-radius:8%;

position:absolute;
top:70px; right:10px;

cursor:pointer;
opacity:0.7;
}
#stop{ background:#666; color:#fff; top:110px; display:none; }
#start:hover, #stop:hover{
opacity:1;}


#notice{
width:200px; height:150px;
line-height:30px; text-align:center; font-size:25px;

position:absolute;
left:150px; top:150px;

cursor:pointer;
visibility:hidden;

padding:5px;


overflow: hidden;

color:#fff; background:#F09609;
background: #F5F5F5; color:#000;

border: 1px solid #dbdbdb;
border-top: none;
border-radius:8%;

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
#notice p{font-size:35px;}
</style>
</head>

<body>

<div id=top>
<p>js小游戏:吃大饼 - [chrome only]</p>
-天空落下大饼,上有积分,点击得饼上的积分(小心负分!)。
15s内你的最高分是多少?有图有真相!<br />
<span >-自认为完工。求bug。求建议。miostudio@163.com QQ:469004330</span>
</div>
<hr>


<div id=box>
<ul id=pies>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>-10</li>
</ul>


<ul id=score>
<li>分数:<span>20</span>分</li>
<li>时间:<span>15</span>秒</li>
</ul>

<div id=start>start</div>
<div id=stop>pause</div>

<div id=notice><p>notice</p></div>
</div>


<script>
/********************************
*下降函数:传入参数obj,开始下降,同时左右随机漂移。
*********************************/
function fall(obj){
//var m=0;
var iterval=500;//计时器的时间间隔;
clearInterval(obj.timer);
obj.timer=setInterval( function(){
//console.log(aLi2[n]);

obj._x=parseInt(obj.style.left);
obj._y=parseInt(obj.style.top);

obj._x += parseInt((Math.random()-0.55)*30);
obj._y += Math.random()*30;

if(obj._x>500) obj._x -=500; if(obj._x<0) obj._x +=500;
if(obj._y>500) obj._y=-100; // if(obj._y<0) obj._y=0;

obj.style.left = parseInt(obj._x) + 'px';
obj.style.top = parseInt(obj._y) + 'px';


//console.log(obj.index +' - '+ 'x:'+obj.style.left + ' y: '+obj.style.top);
}, iterval);
}



/**********************************
*在obj中写入html代码 ok
**********************************/
function note(obj, html){
var _a = obj.innerHTML;
obj.style.visibility='visible';
obj.innerHTML = html;
} //end of f note


/**********************************
*使obj中的数字改变n ok
**********************************/
function changeNumInHtml(obj, n){//剩余时间
var _a= parseInt( obj.innerHTML );
obj.innerHTML = _a + n;
} //end of f changeNumInHtml















/**********************************
*框架部分结束;
*
*以下是页面代码部分
**********************************/
window.onload=function()
{
var wjl={};//唯一的全局变量;
wjl.st=false;//是否按了stop键; 默认是没有按下;
wjl.on=false;//游戏是否还在继续?是则加分,否则不加分; 默认是不在进行;
wjl.clock=null;//全局定时器;

//定义小球
var oUl2=document.getElementById('pies');
var aLi2=oUl2.getElementsByTagName('li');

//小球的加分
var oUl3=document.getElementById('score');
var aLi3=oUl3.getElementsByTagName('li');
var oScore=aLi3[0].getElementsByTagName('span')[0];//分数
var oTime=aLi3[1].getElementsByTagName('span')[0];//时间


//开始、停止按钮
var oStart=document.getElementById('start');
var oStop=document.getElementById('stop');

//通知栏
var oNotice=document.getElementById('notice');






/*-----------------------------
*给小球绑定单击事件
-------------------------------*/
for(var i=0; i<aLi2.length; i++)
{
//1.使li标签的index属性为:其内部的数字字面量;
aLi2[i].index = parseInt(aLi2[i].innerHTML);

//2.单击小球,如果是游戏中,则小球回到顶部,同时加小球上的分数
aLi2[i].onclick=function(){
if(wjl.on==true){
this.style.top='-50px';
changeNumInHtml(oScore, this.index);//在积分榜上,加上小球上数字的分数
}
}
}


//初始化小球;
function init(){
wjl.on=true;//游戏处于开始状态
oNotice.style.visibility='hidden';//分数通知栏隐藏;

note(oTime, 15);//设定时间zyj
note(oScore, 20);//设定基础积分

//初始化x,y坐标
for(var i=0; i<aLi2.length; i++){
aLi2[i].style.left= Math.random()*500+'px'; //初始化x坐标
aLi2[i].style.top='-50px';//初始化y坐标
}
}


//wjl.clock=null;//全局定时器
function clockAll(){
clearInterval(wjl.clock);//全局计时器;倒计时

wjl.clock=setInterval(function(){
changeNumInHtml(oTime, -1);//时间倒计时,
var _a=parseInt( oTime.innerHTML );
if( _a<=0 ){//如果时间没了;
wjl.on=false;//设置游戏状态:非开始

for(var _i=0; _i<aLi2.length; _i++){
clearInterval( aLi2[_i].timer );}//小球的计时器清除;

clearInterval( wjl.clock );//全局计时器清除

note( oNotice, '<p>Notice</p><br />Congratulations!\nYour score is: ' + parseInt( oScore.innerHTML ) ); //这是游戏结束时的分数提示条
}
},1000);

}


//开始按钮单击后
oStart.onclick=function(){
init();
clockAll();

//每个计时器开启;
for(var i=0; i<aLi2.length; i++){
fall(aLi2[i]);}

oStop.style.display = 'block';
}


//暂停按钮单击后
oStop.onclick=function(){
wjl.st=!wjl.st; //console.log(wjl.st);
if(wjl.st){
wjl.on = false;//游戏处于不运行状态
this.style.background='red';
this.innerHTML='continue';


for(var i=0; i<aLi2.length; i++){
clearInterval(aLi2[i].timer);}

clearInterval(wjl.clock);//倒计时 计时器
}else{
wjl.on = true;//游戏处于开始状态

this.style.background='grey';
this.innerHTML='pause';

clockAll();
//每个计时器;
for(var i=0; i<aLi2.length; i++){
fall(aLi2[i]);}
}
}


}
</script>
</body>
</html>





-----
  评论这张
 
阅读(128)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017