原创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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 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实现贪吃蛇小游戏
2016/07/26 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
python实现kNN算法
2017/12/20 Python
Django REST framework视图的用法
2019/01/16 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python安装Bs4的多种方法
2020/11/28 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
教师考察材料范文
2014/06/03 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
JS实现数组去重的11种方法总结
2022/04/04 Javascript