js键盘小游戏

最新推荐文章于 2021-11-20 20:56:45 发布
最新推荐文章于 2021-11-20 20:56:45 发布
阅读量699 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011107187/article/details/9571477
版权


代码：

<html>

 <head>
 <style>
 body{
    margin: 0 auto;
    background-image:url(背景.jpg);
background-repeat:no-repeat;
 }
 .center{
   text-align:center;color:red
 }
 </style>
 <script>
    var time;
var number=0;
//DIV移动
function move(){
        mydiv1.style.top=parseInt(mydiv1.style.top)+6;
        mydiv2.style.top=parseInt(mydiv2.style.top)+7;
        mydiv3.style.top=parseInt(mydiv3.style.top)+5;
        mydiv4.style.top=parseInt(mydiv4.style.top)+4;
mydiv5.style.top=parseInt(mydiv5.style.top)+8;
mydiv6.style.top=parseInt(mydiv6.style.top)+3;
      if(parseInt(mydiv1.style.top)>=430){
     mydiv1.style.top=0;   
}
     if(parseInt(mydiv2.style.top)>=430){
     mydiv2.style.top=0;
}
     if(parseInt(mydiv3.style.top)>=430){
     mydiv3.style.top=0;
}
     if(parseInt(mydiv4.style.top)>=430){
     mydiv4.style.top=0;
}
     if(parseInt(mydiv5.style.top)>=430){
    mydiv5.style.top=0;  
}
if(parseInt(mydiv6.style.top)>=430){
    mydiv6.style.top=0;  
}
}

 /* 获取键盘输入*/
function keydown(e){
    var realkey = String.fromCharCode(e.which);
var mydiv = document.getElementById("mydiv");
if(realkey==mydiv1.innerHTML){
//mydiv1.style.visibility="hidden";
  mydiv1.style.top=10;
  mydiv1.innerHTML=ranString();
   number=number+5;
record.innerHTML=number+"分";
}
if(realkey==mydiv2.innerHTML){
  mydiv2.style.top=10;
  mydiv2.innerHTML=ranString();
  number=number+5;
  record.innerHTML=number+"分";
}
if(realkey==mydiv3.innerHTML){
  mydiv3.style.top=10;
  mydiv3.innerHTML=ranString();
  number=number+5;
  record.innerHTML=number+"分";


}
if(realkey==mydiv4.innerHTML){
  mydiv4.style.top=10;
  mydiv4.innerHTML=ranString();
  number=number+5;
  record.innerHTML=number+"分";
}
if(realkey==mydiv5.innerHTML){
  mydiv5.style.top=10;
  mydiv5.innerHTML=ranString();
  number=number+5;
  record.innerHTML=number+"分";
}
if(realkey==mydiv6.innerHTML){
  mydiv6.style.top=10;
  mydiv6.innerHTML=ranString();
  //累计加分
  number=number+5;
  record.innerHTML=number+"分";
}
}
//游戏开始
function gameStart(){
  //间隔时间
   time=setInterval("move()",500);
//启动document对象键盘事件
document.onkeydown = keydown;
}
//清除定时器
function stop(){
   clearInterval(time);
//清除document对像键盘事件
document.οnkeydοwn=null;
}
//产生随机的字母
function ranString(){
var randomNumber= ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
return randomNumber[parseInt(Math.random()*25)];
}
  </script>
 </head>
 <body> 
  <div id="mydiv1" style="position:absolute;background:orange;text-align:center;width:30;height:30;left:820px;top:10px">B</div>
  <div id="mydiv2" style="position:absolute;background:pink;text-align:center;width:30;height:30;left:720px;top:10px">A</div> 
  <div id="mydiv3" style="position:absolute;background:green;text-align:center;width:30;height:30;left:320px;top:10px">C</div>
  <div id="mydiv4" style="position:absolute;background:yellow;text-align:center;width:30;height:30;left:420px;top:10px">D</div>
  <div id="mydiv5" style="position:absolute;background:red;text-align:center;width:30;height:30;left:520px;top:10px">E</div>
  <div id="mydiv6" style="position:absolute;background:teal;text-align:center;width:30;height:30;left:620px;top:10px">H</div>
  <div style="position:absolute;border:1px solid purple;width:120;height:650px;">
  <div id="record" class="center" style="position:absolute;border:2px solid blue;width:70px;height:20px;left:20px;top:280px">0</div>
  <button οnclick="gameStart()" style="position:absolute;top:200px;left:20px">游戏开始</button>
  <button οnclick="stop()" style="position:absolute;top:240px;left:20px">游戏停止</button>
  </div>
 </body>

</html>


效果图：






何群杰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小游戏键盘操作
J辉的博客
10-25 993
知识点： 1，键盘window.event事件的接收,IE和firefox 2，判断碰撞的小函数 3，代码参考韩老师 4，index.html一个文件，2张图片 5，div属性，要设置成position:absolute<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></titl
原创javascript小游戏实现代码
10-28
【JavaScript小游戏实现详解】 在本文中，我们将探讨如何使用JavaScript来实现一款小游戏。JavaScript是一种广泛应用于网页开发的脚本语言，它可以为网页添加交互性，包括动态效果和游戏功能。以下是一个简单的...
JS 实现的打字小游戏
03-13
自动掉字，可控制速度，捕获键盘事件会去消来掉下来的字，不算太多，但能学到很多JS和DOM的东西
JavaScript-事件和事件对象、实现键盘打字小游戏
可可的博客
11-20 2547
JavaScript-事件和事件对象 一．事件介绍 事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。 JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型。 1
Js键盘事件
weixin_45966674的博客
12-18 495
相信大家都玩过4399小游戏，这些小游戏都是网页版的，可以说比较初级，当然我们做的很更低价一些，那么小凡玉就带大家看看吧。例如这样，当键盘有按键被按时事件就会自动触发，再用对象e判断用户按了什么键，再决定做什么事。首先我们需要了解JavaScript的键盘事件，这样我们才能制作出上下左右。那么有了上下左右写个小游戏是不是易如反掌了呢？
js打字小游戏（按键事件）
qq_41196874的博客
08-30 684
8.30小T开始在CSDN上记录对前端的练习 打字小游戏（按键事件） keypress、keydown、keyup的区别 keypress：按键按下时触发事件（注意不能识别功能键，如Ctrl、Shift及大小写） keydown：按键按下时触发事件 keyup：按键松开时触发事件 keydown、keyup不区分大小写 在此练习会遇到String.fromCharCode()、Math.random()、toUpperCase() String.fromCharCode()可接受一个指定的 Unicode
javaScript小游戏
12-07
JavaScript小游戏是一种利用JavaScript编程语言开发的互动娱乐应用。JavaScript，简称JS，是Web开发中不可或缺的一部分，主要用于网页和网络应用的动态化。由于其轻量级、解释型和跨平台的特性，使得JavaScript成为...
原生JS贪吃蛇小游戏
07-24
《原生JS贪吃蛇小游戏》是一款利用JavaScript编程语言，结合HTML5的Canvas画布技术实现的简单趣味游戏。在这款游戏中，玩家控制一条不断移动的蛇，通过吃食物来增长身体长度，同时避免触碰到自己的身体或者边界，...
纯JS对对碰小游戏
08-31
【纯JS对对碰小游戏】是一款完全由JavaScript编程语言实现的网页版休闲游戏，它体现了JavaScript在游戏开发领域的强大功能。这款小游戏不仅展示了JavaScript的基本语法和面向对象编程思想，还涵盖了DOM操作、事件...
js实现打字小游戏
10-15
主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2048小游戏js版本，键盘上下左右操作。
10-01
2048小游戏js版本，键盘上下左右操作。2048小游戏js版本，键盘上下左右操作。
js实现上下左右键盘控制div移动
10-15
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现键盘控制图片的移动
07-26
function test(id){ alert(id); } if(typeof GetControlundefined) GetControl=function (id) { return document.getElementById(id); }; function KeyDown() { var control=document.getElementById("dSquare"); var key; try{ key=event.keyCode; //取得键盘Code编号 } catch(a){ //对于Firefox来说，不支持event.keyCode key=KeyDown.arguments[0].keyCode; } switch(key) { case 40://40 down if(parseInt(control.style.top)<=100){ control.style.top=(parseInt(control.style.top)+1)+'px'; }else{alert('不可以再前行啦')} break; case 39://39 right control.style.left=(parseInt(control.style.left)+1)+'px'; break; case 38://38 up control.style.top=(parseInt(control.style.top)-1)+'px'; break; case 37://37 left control.style.left=(parseInt(control.style.left)-1)+'px'; break; } } document.onkeydown=KeyDown; //附加事件 document.onkeypress=KeyDown; //附加事件
简单打字游戏HTM5L+css3+JavaScript实现.zip
11-20
HTM5L+css3+JavaScript实现，打字游戏是用于电脑初学者练习打字，熟悉键盘的游戏。初学者可以根据自己的水平设置游戏难度，逐步提高打字速度。
Jquery实现打字小游戏
11-01
用jquery实现的一个打字小游戏 虽然很普遍 但是也花了一天时间
js写小游戏（打字母）
xue2xue的博客
08-10 1413
关键事件： 的Math.random（）产生0-1的随机数; setInterval（）方法按照指定的周期（以毫秒计）来调用函数或计算表达式; clearInterval（）方法取消由setInterval（）函数设定的定时执行操作; clearInterval（）方法的参数必须是由setInterval（）返回的ID值; 注意：  要使用clearInterval（）方...
关于Javascript游戏按键操控移动的思考
符明韬的博客
07-25 1163
关于Javascript游戏按键操控移动的思考当前想到的最好的实现办法自然是在每一帧设置好对象的加速度，且不断调用函数，在speed上加上acceleration，在position上加上speed。无论是position、speed还是acceleration，都是对象自己的属性，与函数本身无关，所以这样的方法应当还是不错的，现在的主要问题就是“在什么情况下去设置position等值”。有关连续触
一个简单用原生js实现的小游戏----FlappyBird
weixin_30725467的博客
04-01 1251
这是一个特别简单的用原生js实现的一个小鸟游戏，比较简单，适合新手练习 这是html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <b...
JS实现简单的“销魂”小游戏
小白小白从不日别的博客
10-23 3111
先看最终的成果吧！！！ 目录 思路： 难点： 解决如何利用一张“幽灵”图使其产生多张在水平方向随机的幽灵： 当点击“PLAY”按钮后，实现幽灵上浮效果 ： 如何在“幽灵”身上随机产生字母： 在键盘上按下对应的键，幽灵消失： 源码： 思路： 用一张背景图当做游戏界面，一张图片当做游戏按钮，当点击“PLAY”按钮后，背景音乐开始播放、“幽灵”开始随机出现 控制键盘的“keydown”事件，当“点击”了“幽灵”身上的对应的字母时，幽灵就被销毁 难点： 如何利用...
用javascript知足h5小游戏
最新发布
12-09
使用JavaScript可以很容易地创建H5小游戏。JavaScript是一种流行的脚本语言，可以通过在HTML文档中嵌入代码来实现游戏逻辑和交互性。 首先，我们可以使用JavaScript来处理用户的输入和交互。可以轻松地捕获键盘输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值