原创javascript小游戏实现代码


Posted in Javascript onAugust 19, 2010

以下是代码:

<!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=gb2312" /> 
<title>jjb</title> 
<style type="text/css"> 
* { margin:0px; padding:0px;} 
#content{ width:800px; height:500px; position:absolute; left:10px; top:10px; background:url(bg.gif) repeat-x left top;} 
#scbox{width:100px; background:#000000; font-weight:bold; color:#FFFFFF; font-size:12px; line-height:22px; padding-left:10px;} 
#start{ position:absolute; left:215px; _left:190px; top:140px;} 
#life { height:22px; background:#009000; position:absolute; left:110px; top:0px;} 
#bottom { width:800px; height:44px; position:absolute; left:0; top:456px; background:#333; z-index:9;} 
#startbox { height:150px; position:absolute; left:260px; top:100px; background:#000000; color:#fff; font-size:12px; padding:10px;} 
#jia {font-size:40px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#0099CC; position:absolute; z-index:1001;} 
#jian {font-size:40px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FF0000; position:absolute; z-index:1001;} 
</style> 
<script language="javascript"> 
(function (){ 
(new Image()).src = "38.gif"; 
(new Image()).src = "48.gif"; 
(new Image()).src = "bike.gif"; 
(new Image()).src = "bike2.gif"; 
(new Image()).src = "bg.gif"; 
})(); 
//缓存加载图片 
function $(id) {return document.getElementById(id);} 
var boxBaseAttr = new Object; 
boxBaseAttr = { 
width : "26px", 
height : "40px", 
position: "absolute", 
top : "30px", 
background : "url(38.gif) no-repeat center top", 
zIndex : 10 
}; 
var boxBaseAttr2 = new Object; 
boxBaseAttr2 = { 
width : "26px", 
height : "40px", 
position: "absolute", 
top : "30px", 
background : "url(48.gif) no-repeat center top", 
zIndex : 10 
}; var ele = new Object; 
ele = { 
div : document.createElement("div"), 
span: function (){ 
var sp = document.createElement("span"); 
for(var s in boxBaseAttr) { 
sp.style[s] = boxBaseAttr[s]; 
} 
sp.setAttribute("type", "good"); 
return sp; 
}, 
badspan : function (){ 
var sp2 = document.createElement("span"); 
for(var s in boxBaseAttr2) { 
sp2.style[s] = boxBaseAttr2[s]; 
} 
sp2.setAttribute("type", "bad"); 
return sp2; 
} 
}; 
var sco = 0, lifeWidth = 690, lifes = true; 
var bar = { 
getScore : function () { 
sco += 10; 
$("sc").innerHTML = sco; 
}, 
loseScore : function (){ 
sco -= 10; 
$("sc").innerHTML = sco; 
}, 
life : function (){ 
var life = $("life"); 
var sl = setInterval(function(){ 
if(lifeWidth < 23) { 
lifes = false; 
clearInterval(sl); 
return; 
} 
else { 
lifeWidth -= 23; 
life.style.width = lifeWidth + "px"; 
} 
},1000); 
} 
}; 
var fire = { 
init : function (o, x, y) { 
o.style.display = "block"; 
o.style.left = x + "px"; 
o.style.top = y + "px"; 
var fs = setInterval(function(){ 
if (y >= 280) { 
y -= 10; 
o.style.top = y + "px"; 
} 
else{ 
clearInterval(fs); 
o.style.display = "none"; 
} 
},10); 
} 
}; 
/*-- game begin --*/ 
function game() { 
var content = $("content"), x = 0; 
var pigBaseAttr = new Object; 
pigBaseAttr = { 
background : "url(bike.gif) no-repeat center top", 
position : "absolute", 
top : content.clientHeight-44+"px", 
left : (content.clientWidth - 45)/2+"px", 
width : "45px", 
height : "44px", 
zIndex : 1000 
}; 
var pig = ele.div.cloneNode(true); 
for(var s in pigBaseAttr) { 
pig.style[s] = pigBaseAttr[s]; 
} 
content.appendChild(pig); 
/* -- 小猪移动功能begin--*/ 
content.onmousemove = function (event){ 
var e = event || window.event; 
if ( x > e.clientX) { 
//pig.style.width = "110px"; 
pig.style.background = "url(bike.gif) no-repeat left top"; 
if (e.clientX -45 < 0) { 
pig.style.left = "0px"; 
} else if(e.clientX + 45 > 800) { 
pig.style.left = "755px"; 
} 
else { 
pig.style.left = (e.clientX - 45)+"px"; 
} 
} 
else if (x < e.clientX) { 
//pig.style.width = "110px"; 
pig.style.background = "url(bike2.gif) no-repeat right top"; 
if (e.clientX -45 < 0) { 
pig.style.left = "0px"; 
} else if(e.clientX + 45 > 800) { 
pig.style.left = "755px"; 
} 
else { 
pig.style.left = (e.clientX - 45)+"px"; 
} 
} 
x = e.clientX; 
} 
/*-- 判断是否撞击,传入参数为box和content --*/ 
function meet(obox,parent) { 
var objX = obox.offsetLeft; 
var pigX = pig.offsetLeft; 
var boxType = obox.getAttribute("type"); 
if (objX + 26 >= pigX && objX <= pigX + 45) { 
if (boxType == "good") { 
bar.getScore(); 
fire.init($("jia"), pigX, pig.offsetTop-30); 
} 
else if(boxType == "bad") { 
bar.loseScore(); 
fire.init($("jian"), pigX, pig.offsetTop-30); 
} 
obox.style.left = "-2000px"; 
} 
} 
/* -- 创建随机位置的金币 begin--*/ 
function createbox() { 
var box = ele.span(); 
var b = 30; 
var boxLeft = Math.floor(Math.random()*760);//产生随机距离 
box.style.left = boxLeft + "px"; 
content.appendChild(box); 
//box进入游戏界面,开始移动,并开始执行函数和pig比对是否撞击 
var st = setInterval(function (){ 
if (b < 460){ 
box.style.top = b + 5 + "px"; 
b += 5; 
if (b >= 416) { 
meet(box, content); 
} 
} 
else { 
content.removeChild(box); 
clearInterval(st); 
b = 30; 
} 
},5); 
} 
function createbadbox() { 
var box = ele.badspan(); 
var b = 30; 
var boxLeft = Math.floor(Math.random()*760);//产生随机距离 
box.style.left = boxLeft + "px"; 
content.appendChild(box); 
//box进入游戏界面,开始移动,并开始执行函数和pig比对是否撞击 
var st = setInterval(function (){ 
if (b < 460){ 
box.style.top = b + 5 + "px"; 
b += 5; 
if (b > 416) { 
meet(box, content); 
} 
} 
else { 
content.removeChild(box); 
clearInterval(st); 
b = 30; 
} 
},5); 
} 
bar.life(); 
/*-- 开始执行循环添加box函数 --*/ 
var xt = setInterval(function(){ 
if (lifes == false) { 
clearInterval(xt); 
alert("时间到,您的得分是:"+sco); 
lifeWidth = 690; 
lifes = true; 
sco = 0; 
$("startbox").style.display = "block"; 
$("start").value = "再玩一次"; 
content.removeChild(pig); 
}else{ 
createbox(); 
createbadbox(); 
} 
},500); 
} 
window.onload = function () { 
$("start").onclick = function () { 
$("startbox").style.display = "none"; 
new game(); 
} 
} 
</script> 
</head> 
<body> 
<div id="content"> 
<div id="startbox"> 
<p>游戏规则:</p> 
<p>(1) 你只有30秒的时间,用鼠标控制小猪左右移动;</p> 
<p>(2) 小猪接到<img src="38.gif" />女孩,加10分;</p> 
<p>(3) 小猪接到<img src="48.gif" />女孩,减10分;</p> 
<input type="button" id="start" value="开始游戏" /> 
</div> 
<div id="scbox">分数:<span id="sc">0</span></div> 
<div id="life" style="width:690px;"></div> 
<div id="bottom"></div> 
<div id="jia" style="display:none;">+10</div> 
<div id="jian" style="display:none;">-10</div> 
</div> 
</body> 
</html>

演示代码:/js/js_game/index.htm
代码打包下载
Javascript 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 #Javascript
JQuery跨Iframe选择实现代码
Aug 19 #Javascript
JQuery中each()的使用方法说明
Aug 19 #Javascript
jquery获取input的value问题说明
Aug 19 #Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 #Javascript
JavaScript学习历程和心得小结
Aug 16 #Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 #Javascript
You might like
php array的学习笔记
2012/05/10 PHP
php cli 小技巧
2013/06/03 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python绘制3D图形
2018/05/03 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
parser.add_argument中的action使用
2020/04/20 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
网站编辑求职信
2013/10/17 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
一年级学生评语
2014/04/23 职场文书
美术学专业求职信
2014/07/23 职场文书
协会周年庆活动方案
2014/08/26 职场文书
公证委托书标准格式
2014/09/11 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
python画条形图的具体代码
2022/04/20 Python