是男人就撑过20秒Javascript版资源-CSDN文库

共6个文件

bmp：4个

db：1个

htm：1个

需积分: 35 23 浏览量 2011-04-01 09:37:17 上传评论收藏 6KB ZIP 举报

"是男人就撑过20秒"是一款广受欢迎的小游戏，考验玩家的反应速度和敏捷性。在这个JS版本中，开发者将原本的游戏逻辑移植到了JavaScript语言环境下，为玩家提供了网页上的游戏体验。JavaScript，通常简称为JS，是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，尤其是交互式元素的设计。在JavaScript版的"是男人就撑过20秒"中，游戏的核心机制可能会包括以下几个关键知识点： 1. **事件监听**：游戏的开始、暂停和结束可能通过监听用户的键盘输入或点击事件来触发。例如，用户按下空格键开始游戏，再次按下则暂停，或者游戏结束时显示相应提示。 2. **定时器（setTimeout 和 clearInterval）**：为了实现游戏的计时功能，开发者可能使用了JavaScript的`setTimeout`来定期生成子弹，而`clearInterval`用于在游戏结束后停止定时器，防止不必要的资源浪费。 3. **DOM操作**：JavaScript可以直接操作文档对象模型（DOM），改变HTML元素的属性，如位置、样式等，以实现游戏画面的更新。例如，子弹和障碍物的生成和移动，以及得分的显示，都需要通过DOM操作完成。 4. **碰撞检测**：为了判断子弹是否击中障碍物，开发者需要实现碰撞检测算法。这通常涉及计算两个图形的边界距离，如果小于一定阈值，则判定为碰撞。 5. **闭包（Closure）**：在JavaScript中，函数可以记住它被创建时的环境，这种特性被称为闭包。在游戏里，闭包可以用来保持对特定状态的引用，比如游戏的计时、得分或子弹的实例。 6. **面向对象编程**：开发者可能会使用面向对象的编程方式，定义游戏对象（如玩家、子弹、障碍物）的类，每个类包含其特有的属性（如位置、速度）和方法（如移动、碰撞处理）。 7. **动画帧率控制**：为了平滑地显示游戏过程，开发者可能利用`requestAnimationFrame`函数来实现动画效果，确保每帧之间的间隔一致，提供流畅的游戏体验。 8. **游戏逻辑优化**：由于JavaScript是单线程的，为了防止游戏逻辑阻塞浏览器的其他任务，可能需要对复杂计算进行优化，例如使用Web Workers进行异步处理。 9. **CSS样式**：配合JavaScript，CSS样式可以用来设置游戏界面的布局和视觉效果，如背景、元素的形状和颜色等。这个JS版的"是男人就撑过20秒"游戏展示了JavaScript在实现互动游戏上的强大能力，涉及到编程基础、游戏逻辑、性能优化等多个方面。通过这个游戏，开发者和学习者都可以深入理解JavaScript在实际项目中的运用。

资源推荐

资源详情

资源评论

收起资源包目录

是男人就撑过20秒.zip （6个子文件）

是男人就撑过20秒

b.bmp 102B

p.bmp 714B

是男人就撑过20秒.htm 8KB

Thumbs.db 7KB

pl.bmp 470B

pr.bmp 470B

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>是男人就撑过20秒 - w上 s下 a左 d右回车或B开始</title> </head> <body onkeyDown="keyDown();" onkeyUp="keyUp();"> </table> <script> var times = 0; var top = 20; var left = 20; var width = 300; var height = 260; var bnum = 30; var bsp = 2; var bgnum = 50; var p = new Plane(); var allB; var inGame = false; var timer; var bgb = new Array(bgnum); document.write('<div id="showBodyDiv" style="position: absolute;left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + height + 'px;background:#000000;"></div>'); for(i = 0;i < bgnum; i++){ switch(((Math.random()*10)|0)){ case 0: tbg = "#808000"; break; case 1: tbg = "#008000"; break; case 2: tbg = "#800000"; break; case 3: tbg = "#808080"; break; case 4: tbg = "#0000FF"; break; case 5: tbg = "#FFFF00"; break; case 6: tbg = "#FF00FF"; break; case 7: tbg = "#00FFFF"; break; case 8: tbg = "#FF0000"; break; case 9: tbg = "#00FF00"; break; } bgb[i] = (((Math.random()*height)|0)+top); document.write('<div id="bg' + i + 'Div" style="position: absolute;overflow:hidden;width:1px;height:1px;top:' + bgb[i] + ';left:' + (((Math.random()*width)|0)+left) + ';background:' + tbg + '"></div>'); } document.write('<div id="showOptDiv" style="position: absolute;height:80;width:250;left:' + (left+width) + 'px;top:' + (top) + 'px;background:#000000;"><font color="#FFFFFF">回车或B开始<br> w上s下a左d右<br> 子弹数量：<select name="bbn" id="bbn"><option value="30"> 30</option> <option value="35"> 35</option><option value="40"> 40</option><option value="45" selected> 45</option><option value="50"> 50</option> <option value="55"> 55</option><option value="60"> 60</option> <option value="65"> 65</option> <option value="70"> 70</option> </select><br>最高速度：<select name="bbv" id="bbv"><option value="3">1</option> <option value="4">2</option> <option value="5">3</option> <option value="6" selected>4</option> <option value="7">5</option> <option value="8">6</option> <option value="9">7</option></select></font></div>'); document.write('<div id="showInfoDiv" style="position: absolute;width:250;left:' + (left+width) + 'px;top:' + (top+80) + 'px;background:#000000;"><font size="5" color="#FFFF00"><b>得分：0</b></font></div>'); function Plane(){ // 飞机类 this.x = (width)/2; this.y = (height)/2; this.moveRight = function(){ this.x += 2; if((this.x) > (width-15)){ this.x = width - 15; } } this.moveDown = function(){ this.y += 2; if((this.y) > (height-15)){ this.y = height - 15; } } this.moveLeft = function(){ this.x -= 2; if(this.x < 0){ this.x = 0; } } this.moveUp = function(){ this.y -= 2; if(this.y < 0){ this.y = 0; } } } function Ball(){ // 子弹类 this.x = 0; // 坐标 this.y = 0; this.dm = 0; // 子弹移动方向(坐标增量斜率) this.dx = 0; // 目标x位置 this.dy = 0; // 目标y位置 this.add = 1; // (每次移动的位置)坐标增量 this.init = function(){ // 初始化子弹坐标 switch((Math.random()*4)|0){ case 0: this.y = 0; this.x = ((Math.random()*(width-4))|0); break; case 1: this.y = height-4; this.x = ((Math.random()*(width-4))|0); break; case 2: this.y = ((Math.random()*(height-4))|0); this.x = 0; break; case 3: this.y = ((Math.random()*(height-4))|0); this.x = width-4; break; } this.add = 1 + ((Math.random()*bsp)|0)/4; this.changeDir(); } this.changeDir = function(){ // 改变子弹方向 this.dx = p.x+7; // 以当前飞机所在位置为目标方向 this.dy = p.y+7; this.dm = (this.dx-this.x)/(this.dy-this.y); } this.move = function(){ // 移动子弹 if(-1 < this.dm && this.dm < 1){ if(this.dm < 0){ this.y -= this.add; } else{ this.y += this.add; } this.x = this.dx - (this.dy-this.y)*this.dm } else{ if(this.dm < 0){ this.x -= this.add; } else{ this.x += this.add; } this.y = this.dy - (this.dx-this.x)/this.dm } if(this.x >= (width-4) || this.x < (1) || this.y >= (height-4) || (this.y < (1))){ this.init(); // 出界，重新生成子弹 } } } var rl = 0; // -1左，1右 var ud = 0; // -1上，1下 //用户按下操作键 function keyDown(){ if(inGame){ switch(event.keyCode){ case 87://'W'键,->上 case 119://'s'键,->上 ud = -1; break; case 83://'S'键,->下 case 115://'s'键,->下 ud = 1; break; case 65://'A'键,->左 case 97://'a'键,->左 rl = -1; break; case 68://'D'键,->右 case 100://'d'键,->右 rl = 1; break; case 80://'P'键 case 112://'p'键 break; case 13://回车键 break; } } else{ if(13 == event.keyCode || 98 == event.keyCode || 66 == event.keyCode){ // 开始 beginGame(); } } } function keyUp(){ if(inGame){ switch(event.keyCode){ case 87://'W'键,->上 case 119://'s'键,->上 case 83://'S'键,->下 case 115://'s'键,->下 ud = 0; break; case 65://'A'键,->左 case 97://'a'键,->左 case 68://'D'键,->右 case 100://'d'键,->右 rl = 0; break; case 80://'P'键 case 112://'p'键 break; case 13://回车键 break; } } } function beginGame(){ p.x = (width)/2; p.y = (height)/2; bnum = document.getElementById("bbn").value; bsp = document.getElementById("bbv").value; rl = 0; ud = 0; times = 0; allB = new Array(bnum); showBodyDiv.innerHTML = ""; showBodyDiv.insertAdjacentHTML("BeforeEnd",'<div id="pDiv" style="position: absolute;top:' + ((height)/2) + ';left:' + ((width)/2) + ';"><img src="p.bmp"/></div>'); for(i = 0;i < bnum; i++){ showBodyDiv.insertAdjacentHTML("BeforeEnd",'<div id="b' + i + 'Div" style="position: absolute;"><img src="b.bmp"/></div>'); allB[i] = new Ball(); allB[i].init(); } timer = window.setInterval(showAll, 15); // 15毫秒刷新一次 inGame = true; } function showAll(){ // 根据按键按下情况，移动飞机，并修改图片 if(rl > 0){ p.moveRight(); pDiv.innerHTML = '<img src="pr.bmp"/>'; } else if(rl < 0){ p.moveLeft(); pDiv.innerHTML = '<img src="pl.bmp"/>'; } else{ pDiv.innerHTML = '<img src="p.bmp"/>'; } if(ud > 0){ p.moveDown(); } if(ud < 0){ p.moveUp(); } // 设置飞机div位置 pDiv.style.left = p.x; pDiv.style.top = p.y; times += 1; showInfoDiv.innerHTML = '<font size="5" color="#FFFF00"><b>得分：' + (times) + '</b></font>'; // 显示时间 for(i = 0;i < bnum; i++){ // 处理所有子弹对象 var obj = document.getElementById("b" + i + "Div"); allB[i].move(); // 移动子弹 if(0 == (Math.random()*5)|0){ allB[i].changeDir(); // 5分之1的概率改变子弹目标位置 } obj.style.left = (allB[i].x|0); obj.style.top = (allB[i].y|0); var pxm = 13; if(rl != 0){ pxm = 11; } if(allB[i].x > p.x && allB[i].x < (p.x+pxm*1) && allB[i].y > p.y+6 && allB[i].y < p.y+13 || allB[i].x > p.x+3 && allB[i].x < (p.x+pxm*1-3) && allB[i].y > p.y+1 && allB[i].y < p.y+7){ window.clearInterval(timer); // 中弹 inGame = false; showInfoDiv.insertAdjacentHTML("BeforeEnd",'<font color="#FF0000"><b><br>你中弹了！！！<br>游戏结束！！</b></font>'); break; } } for(i = 0;i < bgnum; i++){ var obj = document.getElementById("bg" + i + "Div"); switch(i % 6){ case 0: bgb[i] += 1.5; break; case 1: case 2: bgb[i] += 1; break; case 3: case 4: case 5: bgb[i] += 0.5; break; } if(bgb[i] > (top+height)){ bgb[i] = top; } obj.style.top = bgb[i]|0; } } </script> </body> </html>

评论收藏

内容反馈