首页 > 语言 > JavaScript > 正文

打豆豆小游戏 用javascript编写的[打豆豆]小游戏

2024-05-06 14:20:07
字体:
来源:转载
供稿:网友
闲来无事,花了两天时间,用javascript 写了一个打豆豆的游戏,至于怎么玩的就不细说了,到网上搜一下就知道了,很简单。

下面是源码,发布出来供大家学习交流。
由于本程序没有用到一个图片,所以界面在ie下豆豆都是方形的比较扎眼,建议用chrome浏览器运行,或者firefox
演示地址:http://www.imkoko.com/app/dadoudou.php
不多说,上代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
body{font-size:12px;}
#fly{position:absolute;}
a{text-decoration:none;color:#999;}
.huabu,#main{width:600px;height:450px;position:relative;overflow:hidden;}
.b,.c{height:25px;width:25px;position:absolute;z-index:1;background:#efefef;font-size:12px;}
.c{background:#000;border-radius:12px;text-align:center;line-height:25px;color:#fff;}
.c10{background:#FDADFE}
.c1{background:#0569FF}
.c2{background:#0CCE0C}
.c3{background:#CE6C0A}
.c4{background:#FF9B05}
.c5{background:#CCCC66}
.c6{background:#CD6ACD}
.c7{background:#6DCECE}
.c8{background:#9C9C9C}
.c9{background:#FF6A6A}
#pin{z-index:3;position:absolute;width:600px;height:450px;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;background:#fff;}
#time,#cou,.right{position:absolute;bottom:0px;color:#999;}
#cou{left:100px;}
#menu{z-index:3;position:absolute;left:200px;top:100px;width:200px;height:300px;font-weight:bold;font-size:24px;text-align:center;}
#menu button{width:100px; height:50px;}
.right{right:0px;}
</style>
</head>
<body>
<div id="fly">
<div id="dou" class="huabu">
<div id="pin" onmousedown="event.cancelBubble=true;"></div>
<div id="menu"> <button onclick="start()" >开始</button><br><br>玩法:点击空白地方,上、下、左、右如果有相同的颜色或数字就可以得分</div>
<div id="main" onmousedown="MoveObject.down(this,cc)"></div>
<div id="time">剩余时间:120</div>
<div id="cou">得分:0</div>
<div class="right">Power by <a href="http://www.imkoko.com">酷酷网</a></div>
</div>
</div>
<script>
/*
*作者:江奇
*演示网站:酷酷网 http://www.imkoko.com/app/dadoudou.php
*程序完全免费公开,转载请保留此信息,谢谢
*/
function $(o){
return document.getElementById(o);
}
var MoveObject={
down:function (o,fun)
{
document.onselectstart=new Function("event.returnValue=false");
document.body.setAttribute('style','-moz-user-select: none;');
//e=e?e:window.event;
e=arguments.callee.caller.arguments[0] || window.event;
x=e.clientX;
y=e.clientY;
fun([x,y]);
return false;
}
};
var o=new Array();
var it=0;
var fen=0;
function ini(){
var _doc = (document.compatMode != "BackCompat") ? document.documentElement : document.body;
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选