`
zhangrong108
  • 浏览: 206622 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javaScript 通过键盘移动层（游戏模仿）

游戏JavaScriptUPCSSHTML 
阅读更多 
 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>键盘控制层的移动</title> 
<style type="text/css"> 
<!-- 
#Div { 
position:absolute; 
width:238px; 
height:135px; 
left:expression((body.clientWidth - this.offsetWidth)/2); 
top:expression((body.clientHeight - this.offsetHeight)/2); 
z-index:1; 
text-align:center; 
background:#AFDBFF; 
border:#006699 1px solid; 
} 
#Txt{ 
font-size:9pt; 
position:absolute; 
width:200px; 
top:expression((Div.offsetHeight - this.offsetHeight)/2); 
left:expression((Div.offsetWidth - this.offsetWidth)/2); 
} 
#Txt p{ 
font-size:9pt; 
margin:8px; 
} 
#Txt font{ 
color:#FF0000; 
font-size:9pt; 
} 
#Layer1 { 
border:#006699 1px solid; 
padding:10px; 
font-size:9pt; 
color:#336699; 
position:absolute; 
top:expression((body.clientHeight - this.offsetHeight)/2); 
left:expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth); 
} 
#Layer1 Input { 
font-size:9pt; 
color:#336699; 
} 
#Int { 
text-align:right; 
} 
--> 
</style> 
</head> 
<body> 
<div id="Div"><span id="Txt">请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>， 
试试看有什么效果？ </span></div> 
<span id="Layer1">控制键设置:
 
向上移动: 
<input name="Up" type="text" value="↑" size="6">
 
向下移动: 
<input name="Down" type="text" value="↓" size="6">
 
向左移动: 
<input name="Left" type="text" value="←" size="6">
 
向右移动: 
<input name="Right" type="text" value="→" size="6">
 
每次移动  <input name="Int" type="text" id="Int" value="5" size="4" maxlength="3"> 
px;</span> 
</body> 
</html> 
<script language="javascript"> 
<!-- 
//alert(txt.style.top); 
var up,down,left,right; 
up = 38; 
down = 40; 
left = 37; 
right = 39; 
function document.onkeydown() 
{ 
// alert(event.keyCode); 
//左：37 上：38 右：39 下：40 
var int; 
int = parseInt(document.getElementById("Int").value); 
if(int == "NaN") 
  int = 5; 
var str = "",press,evet; 
var div = document.getElementById("Div"); 
var txt = document.getElementById("Txt"); 
if(event.srcElement.tagName == "INPUT") 
{ 
  if(event.srcElement == document.getElementById("Int")) 
  { 
  if(event.keyCode == 13) 
    document.body.focus(); 
  if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode <= 40) ) 
    event.returnValue = false; 
    return; 
  } 
  else 
  { 
  switch(event.keyCode) 
  { 
    case 37:{ 
    event.srcElement.value = "←"; 
    break; 
    } 
    case 38:{ 
    event.srcElement.value = "↑"; 
    break; 
    } 
    case 39:{ 
    event.srcElement.value = "→"; 
    break; 
    } 
    case 40:{ 
    event.srcElement.value = "↓"; 
    break; 
    } 
  } 
  switch(event.srcElement) 
  { 
    case document.getElementById("Up"):{ 
    up = event.keyCode; 
    break; 
    } 
    case document.getElementById("Down"):{ 
    down = event.keyCode; 
    break; 
    } 
    case document.getElementById("Left"):{ 
    left = event.keyCode; 
    break; 
    } 
    case document.getElementById("Right"):{ 
    right = event.keyCode; 
    break; 
    } 
  } 
  } 
} 
else 
{ 
  switch(event.keyCode) 
  { 
  case left:{ 
  press = "<font> ← </font>"; 
  evet = "<font>向 <b>左</b> 移动</font>" + " " + int + " px 。"; 
  div.style.left = (parseInt(div.currentStyle.left) - int) + "px"; 
  if(parseInt(div.style.left) <= 0) 
  { 
    evet = "已经到了 <font>最左边</font> ，无法再 <font>向左</font> 移动。"; 
    div.style.left = "0px"; 
    break ; 
  } 
  break; 
  } 
  case up:{ 
  press = "<font> ↑ </font>"; 
  evet = "<font>向 <b>上</b> 移动</font>" + " " + int + " px 。"; 
  div.style.top = (parseInt(div.currentStyle.top) - int) + "px"; 
  if(parseInt(div.style.top) <= 0) 
  { 
    evet = "已经到了 <font>最上边</font> ，无法再 <font>向上</font> 移动。"; 
    div.style.top = "0px"; 
    break ; 
  } 
  break; 
  } 
  case right:{ 
  press = "<font> → </font>"; 
  evet = "<font>向 <b>右</b> 移动</font>" + " " + int + " px 。"; 
  div.style.left = (parseInt(div.currentStyle.left) + int) + "px"; 
  if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) - parseInt(div.offsetWidth))) 
  { 
    div.style.left = parseInt(document.body.clientWidth) - parseInt(div.offsetWidth); 
    evet = "已经到了 <font>最右边</font> ，无法再 <font>向右</font> 移动。"; 
    break ; 
  } 
  break; 
  } 
  case down:{ 
  press = "<font> ↓ </font>"; 
  evet = "<font>向 <b>下</b> 移动</font>" + " " + int + " px 。"; 
  div.style.top = (parseInt(div.currentStyle.top) + int) + "px"; 
  if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) - parseInt(div.offsetHeight))) 
  { 
    div.style.top = parseInt(document.body.clientHeight) - parseInt(div.offsetHeight); 
    evet = "已经到了 <font>最下边</font> ，无法再 <font>向下</font> 移动。"; 
    break ; 
  } 
  break; 
  } 
  default: 
  { 
  return; 
  } 
  } 
  str = "您按下了" + press + "键，"; 
  str += "该图层" + evet; 
  txt.innerHTML = str; 
} 
} 
//--> 
</script>

 

1
顶
0
踩
分享到：
| 指针默认图标
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯javascript模仿微信打飞机游戏代码

    在本项目中，“纯javascript模仿微信打飞机游戏代码”是一个示例，展示了如何使用JavaScript这一前端编程语言来实现一个简单的游戏——打飞机游戏。打飞机游戏通常是一个快节奏的射击类游戏，玩家需要控制一架飞机...

    JavaScript模仿微信打飞机游戏.zip

    2. 事件监听与处理：JavaScript通过`addEventListener`来监听用户的输入，如键盘按键或触摸屏滑动，这些输入会驱动飞机移动、发射子弹等游戏行为。事件处理函数根据事件类型执行相应的游戏逻辑。 3. 动画与定时器：...

    网页模板——JavaScript模仿微信打飞机游戏.zip

    【标题】"网页模板——JavaScript模仿微信打飞机游戏"是一个基于JavaScript编程语言开发的网页游戏，旨在模拟微信中流行的“打飞机”小游戏。这个项目可能是为了教学目的，帮助初学者理解JavaScript在游戏开发中的...

    纯javascript模仿微信打飞机小游戏共13页.pdf

    【标题】: "纯javascript模仿微信打飞机小游戏共13页.pdf" 【描述】: 这个压缩包文件包含了一份13页的PDF文档，详细讲述了如何使用纯JavaScript语言来模仿开发微信上著名的"打飞机"小游戏。JavaScript是一种广泛应用...

    打飞机小游戏原生javascript版

    在这款游戏中，玩家通过键盘的方向键来控制大飞机的移动，目标是发射子弹击中小飞机，每击中一架小飞机，玩家将获得一定的分数。这种设计不仅考验玩家的手眼协调能力，也增添了游戏的竞争性和挑战性。计分系统使得...

    js模仿微信打飞机游戏代码.zip

    在本项目中，"js模仿微信打飞机游戏代码.zip" 是一个包含JavaScript代码的压缩包，目的是为了重现微信上流行的“打飞机”小游戏。这款基于JavaScript的游戏开发旨在展示JavaScript编程能力，以及对游戏逻辑、动画...

    虚拟键盘控件.rar

    2. **事件处理**：通过监听用户的触摸或鼠标事件，JavaScript可以触发键盘的弹出和关闭，以及在用户点击键时响应。 3. **动画效果**：为了提供更好的用户体验，键盘的显示和隐藏通常会加入过渡动画。 4. **自适应...

    飞机大战小游戏

    例如，玩家通过键盘控制飞机移动，JavaScript监听键盘事件并响应。同时，游戏会定期更新状态，如飞机的位置、子弹的飞行轨迹、敌机的行动等。 3. **碰撞检测**：JavaScript通过计算飞机和子弹的位置来判断是否发生...

    JavaScript版蜘蛛纸牌

    JavaScript版蜘蛛纸牌是一款完全基于JavaScript编程语言实现的在线游戏，它模仿了Windows操作系统中经典的蜘蛛纸牌游戏。这款游戏的开发耗时三周，旨在提供与原版游戏类似的体验，让玩家可以在网页环境中享受蜘蛛...

    html5模仿微信打飞机游戏源码

    JavaScript事件监听器，如`keydown`和`keyup`，用来响应用户的键盘输入，控制飞机的上下移动。碰撞检测通常通过比较每个游戏对象的位置和大小来实现，一旦有重叠，就判定为碰撞。 音频处理在HTML5中也有专门的Audio...

    纯js模仿微信打飞机游戏代码(已测试).zip

    【纯js模仿微信打飞机游戏代码(已测试).zip】是一个使用JavaScript编写的微信打飞机游戏的源代码包。这个游戏是基于HTML5 canvas技术构建的，展示了JavaScript在游戏开发中的应用，同时也涉及到Web编程的基本原理和...

    js超级玛丽模仿

    3. **事件监听与处理**: 游戏中的交互性主要通过事件监听来实现，例如玩家按键控制马里奥移动、跳跃。JavaScript的addEventListener方法可以用于添加事件监听器。 4. **对象和类**: 在JavaScript中，我们可以使用...

    小练手+JavaScript+贪吃蛇

    【标题】"小练手+JavaScript+贪吃蛇"是一个基于JavaScript编程语言开发的小型游戏项目，它模仿了经典游戏“贪吃蛇”。这个项目旨在帮助开发者熟悉JavaScript的基础语法和事件处理，同时锻炼其实现简单游戏逻辑的能力...

    snakegame仿贪吃蛇大作战游戏AI

    【标题】"snakegame仿贪吃蛇大作战游戏AI"是一个使用layabox引擎并采用TypeScript编程语言开发的项目，其目标是模仿流行的手机游戏"贪吃蛇大作战"。这个练手项目已经实现了游戏的基本功能，但仍有进一步完善的空间。...

    超强JavaScript效果[超强JavaScript效果]

    23. **可拖动浮动层**：创建具有阴影效果的浮动层，用户可以自由移动，常用于对话框或提示框。 24. **运行代码的代码预览**：允许用户在浏览器中直接查看和运行代码片段，常用于教程或示例。 25. **凹陷文字**：...

    经典飞机大战是一款JS模仿微信打飞机游戏

    《经典飞机大战》是一款利用JavaScript（JS）编程语言模仿微信上的热门游戏——“打飞机”所开发的作品。在本文中，我们将深入探讨JS在游戏开发中的应用，以及如何利用JS实现一个简单的飞机大战游戏。 首先，...

    JavaScript游戏之是男人就下100层代码打包

    标题和描述中提到的“JavaScript游戏之是男人就下100层代码打包”，很可能是指一个简单的网页游戏项目，这款游戏是模仿经典的“是男人就下100层”这一概念，玩家通过键盘控制角色进行移动与跳跃，目的是尽可能地下降...

    [模仿]html5游戏_2048

    通过不断实践和优化，我们可以创建出一款既能在PC上流畅运行，也能适应移动设备的高质量游戏。对于初学者来说，这是一个很好的学习项目，能够帮助他们掌握HTML5和JavaScript的核心技术。而对于经验丰富的开发者，这...

    js 模仿魔兽争霸

    在JavaScript的世界里，模仿经典游戏"魔兽争霸"是一项挑战性的任务，它涉及到多个技术领域，如前端开发、游戏逻辑、用户交互以及动画效果等。在这个项目中，我们将深入探讨如何利用JavaScript来实现这一目标。 首先...

Magicbox
Global site tag (gtag.js) - Google Analytics