原创javascript小游戏实现代码

以下是代码：


代码如下:

<!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
代码打包下载

赞 (0)

相关推荐

  • 由JavaScript技术实现的web小游戏（不含网游）

    由JavaScript技术实现的web小游戏（不含网游）

    1.Mario(游戏地址:http://jsmario.com.ar/ ) 传说中的马里奥网页版,一比一实现了红白机时代超级马里奥中所有功能 与关卡,精细程度不逊原版游戏.依 赖库:无 2 . Bunny Hunt (游戏地址: http://www.themaninblue.com/experiment/BunnyHunt/) 猎兔,一款简单耐玩的网页狩猎游戏,没有使用第三方支持库,直接利用 css 与 JavasSript 实 现. 依 赖库:无 3 . Bomberman ( 游戏地址: 

  • Javascript编写2048小游戏

    Javascript编写2048小游戏

    去年2048很火, 本来我也没玩过, 同事说如果用JS写2048 只要100多行代码: 今天试了一下, 逻辑也不复杂, 主要是数据构造函数上的数据的各种操作, 然后通过重新渲染DOM实现界面的更新, 整体不复杂, JS,css,和HTML合起来就300多行: 界面的生成使用了underscore.js的template方法, 使用了jQuery,主要是DOM的选择和操作以及动画效果,事件的绑定只做了PC端的兼容,只绑定了keydown事件: 把代码放到github-page上, 通过点击这里查看

  • 分享自己用JS做的扫雷小游戏

    分享自己用JS做的扫雷小游戏

    引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /

  • JavaScript编写连连看小游戏

    JavaScript编写连连看小游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:

  • javascript实现别踩白块儿小游戏程序

    javascript实现别踩白块儿小游戏程序

    最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中

  • JavaScript实现一个空中避难的小游戏

    JavaScript实现一个空中避难的小游戏

    前言 最近在看js中的事件,之前也一直有用到事件,用到最多的就是onclick单击事件,还有填写表单信息时的用到的onfocus聚焦时间,和onblur事件,最近看到了onmousemove鼠标移动事件,觉得很神奇,就突然很想写一个小游戏,用到了setInterval函数.游戏的功能也很简单,就是天上掉纸片,小人儿要不停的躲,一旦纸片和小人儿相撞,就会game over! 代码如下: <!DOCTYPE html> <html> <head> <style>

  • js猜数字小游戏的简单实现代码

    复制代码 代码如下: <!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="

  • 纯javascript模仿微信打飞机小游戏

    纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • 12个非常有创意的JavaScript小游戏

    12个非常有创意的JavaScript小游戏

    这里是12个非常有创意的JavaScript小游戏,希望在给我们带来趣味的同时也能更进一步地了解更深层次的JavaScript语言,原来它可以这样的. Browser Pong Twitch Browser Ball Crystal Galazy Video & Picture Puzzle Apophis 2029 Bing-Bong Bomberman Bunny Hunt Real world racer JS Wars Berts Breakdown via:12 Amazing and

  • JS写的数字拼图小游戏代码[学习参考]

    复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;

随机推荐