本文介绍了一个简单的JavaScript游戏项目，通过编写代码实现下落方块游戏。文章分享了完整的HTML和JavaScript代码，并介绍了游戏机制，包括方块生成、碰撞检测、得分等。
还是菜鸟，鉴于清明放假，写Java写累了，写写Javascript。
JS我还是菜鸟，没受过正规教育。写的不好，大家请见谅。欢迎踊跃提出建议和意见。
不多说，先上图
下面是源码。有空我会加多一些效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"><!-- * { margin:0; padding:0 } body { background:url(bg1.jpg) top center no-repeat; } #center { width:820px; height:602px; background:url(line.png) center 5px no-repeat; border-top:none; margin:0 225px; position:relative; overflow:hidden; } #touMing { width:800px; height:602px; filter:alpha(opacity=40); opacity:0.6; padding:10px; color:white; } #start { width:70px; height:28px; margin:40px 0 0 400px; } #pause { width:70px; height:28px; margin:40px 0 0 350px; } --></mce:style><style type="text/css" mce_bogus="1">* { margin:0; padding:0 } body { background:url(bg1.jpg) top center no-repeat; } #center { width:820px; height:602px; background:url(line.png) center 5px no-repeat; border-top:none; margin:0 225px; position:relative; overflow:hidden; } #touMing { width:800px; height:602px; filter:alpha(opacity=40); opacity:0.6; padding:10px; color:white; } #start { width:70px; height:28px; margin:40px 0 0 400px; } #pause { width:70px; height:28px; margin:40px 0 0 350px; }</style> <mce:script type="text/javascript"><!-- var MAX_HEIGHT = 602; //超过这个高度的方块不显示 var blocks = new Array(); //放置每个下落的方块 var speed = 5; //每次下落速度 var timeMin = 1; //最快1秒产生一个方块 var timeMax = 2; //最慢2秒产生一个方块 var numMax = 10; //最多同时有6个方块 var lastGenTime=0; //上次产生方块的时间 var timeGrid = 800; //产生方块的时间间隔不能比这个短 var clearRand = 60; //距离MAX_HEIGHT上下多少像素就能消去方块而且加分 var score = 0; var keyB = new Array("url(w.png) no-repeat","url(s.png) no-repeat","url(a.png) no-repeat","url(d.png) no-repeat"); var KEY_W = 0; //对应数组的位置 var KEY_S = 1; var KEY_A = 2; var KEY_D = 3; var pageX = new Array("25px","105px","185px","265px","345px","425px","505px","585px","665px","745px"); var TIP_WIDTH = 100; var TIP_HEIGHT = 30; var TIP_IMAGES = new Array( new Array("images/l10001.png","images/l10002.png","images/l10003.png","images/l10004.png","images/l10005.png","images/l10006.png"), new Array("images/l20001.png","images/l20002.png","images/l20003.png","images/l20004.png","images/l20005.png","images/l20006.png"), new Array("images/l30001.png","images/l30002.png","images/l30003.png","images/l30004.png","images/l30005.png","images/l30006.png") ); /* * 每隔一个时间就调用一个函数 */ function doOnTime(func,time){ return setInterval(func,time); } /* * 产生方块 */ function generateBlock(){ setTimeout(function(){ var nowTime = new Date().getTime(); if((blocks.length < numMax )&& (nowTime - lastGenTime > timeGrid)){ lastGenTime = nowTime; var randPos=Math.floor(pageX.length*Math.random()); var randPic=Math.floor(keyB.length*Math.random()); var center=document.getElementById("center"); var thing=document.createElement("div"); center.appendChild(thing); thing.style.width="30px"; thing.style.height="30px"; thing.style.overflow="hidden"; thing.style.position="absolute"; thing.style.background=keyB[randPic]; thing.style.left=pageX[randPos]; thing.keyNum = randPic; //为IE准备的 thing.setAttribute("keyNum",randPic); //为FF准备的 thing.style.top = "-30px"; blocks.push(thing); //将方块加入数组中 } },Math.random()*(timeMax-timeMin+1)*1000+timeMin*1000); } /* * 游戏入口，每隔一定时间被调用 */ function game(){ generateBlock(); update(); showScore("score",score); } /* * 更新游戏数据，比如方块位置 */ function update(){ for(var i=0; i<blocks.length; i++){ if(parseInt(blocks[i].style.top)>MAX_HEIGHT){ blocks[i].style.display = "none"; blocks.remove(i); i--; }else{ blocks[i].style.top = parseInt(blocks[i].style.top)+speed+"px"; } } } /* * 显示分数 */ function showScore(showId,score){ document.getElementById(showId).innerHTML = parseInt(score); } /* * 给Array添加移除的方法 */ Array.prototype.remove=function(dx){ if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++){ if(this[i]!=this[dx]){ this[n++]=this[i]; } } this.length-=1; } /* * 添加事件监听 */ function addKeyListener(){ document.onkeydown=function(evt){ var evt=evt||window.event; var evtKey=evt.keyCode||evt.which||evt.charCode; for(var u=0;u<blocks.length;u++){ var blockKeyNum = blocks[u].keyNum || blocks[u].getAttribute("keyNum"); if((evtKey==87 && blockKeyNum == KEY_W) || (evtKey==83 && blockKeyNum == KEY_S) || (evtKey==65 && blockKeyNum == KEY_A) || (evtKey==68 && blockKeyNum == KEY_D) ){ var top = parseInt(blocks[u].style.top); var height = parseInt(blocks[u].style.height); if(top>MAX_HEIGHT-clearRand-height && top<MAX_HEIGHT+clearRand){ //在消失高度范围内 var mid = top+height/2; var temp = Math.abs(MAX_HEIGHT-mid); //和目标线的距离 var level = 0; if(temp>0 && temp<= clearRand/3){ level = 2; }else if(temp > clearRand*1/3 && temp <= clearRand*2/3){ level = 1; } score+=level+1; animate(parseInt(blocks[u].style.left)+TIP_WIDTH,top-TIP_HEIGHT,TIP_WIDTH,TIP_HEIGHT,TIP_IMAGES[level],0,90,"rid"+Math.random()+Math.random()); blocks[u].style.display="none"; blocks.remove(u); u--; } } } } } /* * 动画函数 * x -- 图片left * y -- 图片top * width -- 图片宽度 * height -- 图片高度 * imageArray -- 图片数组 * index -- 当前播放到哪个图片 * time -- 每个图片切换的时间 * id -- 产生的div的id */ function animate(x,y,width,height,imageArray,index,time,id){ if(index<imageArray.length){ var d = document.getElementById(id); if(d==null){ d = document.createElement("div"); d.style.width = width+"px"; d.style.height= height+"px"; d.style.position = "absolute"; d.style.top = y+"px"; d.id = id; d.setAttribute("id",id); d.style.left= x+"px"; document.getElementsByTagName("body")[0].appendChild(d); } d.style.background = "url(/""+imageArray[index]+"/")"; setTimeout(function(){return animate(x,y,width,height,imageArray,++index,time,id)},time); }else{ var d = document.getElementById(id); if(d!=null){ document.getElementsByTagName("body")[0].removeChild(d); } } } window.onload=function(){ var t; var pauseBtn = document.getElementById("pause"); pauseBtn.onclick=function(){ clearInterval(t); t=null; } var startBtn = document.getElementById("start"); startBtn.onclick=function(){ if(!t){ t = doOnTime(game,25); } } addKeyListener(); } // --></mce:script> </head> <body> <div id="center"> <div id="touMing"> 当前分数 ： <span id="score"></span> </div> </div> <input type="button" id="start" value="开始游戏"/> <input type="button" id="pause" value="暂停游戏"/> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
