HTML网页版雷电游戏

最新推荐文章于 2021-05-31 13:33:15 发布
最新推荐文章于 2021-05-31 13:33:15 发布
阅读量2.3k 收藏
点赞数
分类专栏： javaScript html 游戏 文章标签： HTML JavaScript 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011096030/article/details/9229623
版权
javaScript 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
html
23 篇文章 0 订阅
订阅专栏
游戏
5 篇文章 0 订阅
订阅专栏

游戏名称：雷电游戏

游戏简介：

游戏类型：益智游戏

游戏操作：按键盘的上下左右键来控制战机的移动，打中敌机，敌机就会爆炸

代码分享：

 

 

 

 

<html>
 <head>
  <title>雷电贝贝版</title>
  <script>
  
   //start game
   function start(){
    //alert("start");
    fighterMove(); //call fighter move way
    //fireBullet(); //call fire Bullet way
    enemyMove(); // call enemy move way
    backgroundMove(); //call background loop moving way
    timer=setInterval("fireBullet()",100);
    timers=setInterval("enemyFiredBullet()",2000);
    
   }
   
   //background loop moving
   j=0;
   function backgroundMove(){
    //alert("backgroundMove");
    j++;
    interface.style.backgroundPosition="0 "+j;
    setTimeout("backgroundMove()",16);
    
   }
   
   //control fighter move
   function fighterMove(){
    //alert("fighterMove");
    document.onkeydown = keydown;
    function keydown(e){
     var keyName=String.fromCharCode(e.which);
     //alert(keyName);
     //turn up
     if(keyName=="&" && parseInt(fighter.style.top) > 50){
      //alert("up");
      top-=10;
      fighter.style.top=parseInt(fighter.style.top)-10;
     }
     //turn down
     if(keyName=="(" && parseInt(fighter.style.top) < 470){
      //alert("down");
      top+=10;
      fighter.style.top=parseInt(fighter.style.top)+10;
     }
     //turn left
     if(keyName=="%" && parseInt(fighter.style.left) > 10){
      //alert("left");
      left-=10;
      fighter.style.left=parseInt(fighter.style.left)-10;
     }
     //turn right
     if(keyName=="'" && parseInt(fighter.style.left) < 360){
      //alert("right");
      left+=10;
      fighter.style.left=parseInt(fighter.style.left)+10;
     }
     //the fighter fire bullet
     //if(keyName=="A"){
     // alert("bulletFire");
      //fireBullet();
     //}
    }
   }
   
   //fire bullet
   var top="440";
   var left="220";
   function fireBullet(){
    var bullets;
    //alert("fireBullet");
    createBullet();
    //create bullet
    function createBullet(){
     bullets=document.createElement("div");
     bullets.style.width="5px";
     bullets.style.height="5px";
     bullets.style.background="red";
     //alert("ok");
     bullets.style.position="absolute";
     bullets.style.top=top;
     bullets.style.left=left;
     document.body.appendChild(bullets);
     //alert(document.body.appendChild(bullets));
    }
    time = setInterval(function(){
     //alert("time");
     bullets.style.top=parseInt(bullets.style.top)-10;
     if(parseInt(bullets.style.top) < 30){
      //alert("none");
      bullets.style.display="none";
     }
     //bullet hit enemy,change image
     if(parseInt(bullets.style.top) - parseInt(enemy.style.top) < 50
      &&  parseInt(bullets.style.left) - parseInt(enemy.style.left) < 30
      && parseInt(bullets.style.top) > parseInt(enemy.style.top)
      && parseInt(bullets.style.left) > parseInt(enemy.style.left)){
      //alert("burst");
      enemy.style.background="url(hong2.png)";       
     }
     
     if(parseInt(bullets.style.top) - parseInt(enemy1.style.top) < 50
      &&  parseInt(bullets.style.left) - parseInt(enemy1.style.left) < 30
      && parseInt(bullets.style.top) > parseInt(enemy1.style.top)
      && parseInt(bullets.style.left) > parseInt(enemy1.style.left)){
      //alert("burst");
      enemy1.style.background="url(hong2.png)";       
     }
     
     if(parseInt(bullets.style.top) - parseInt(enemy2.style.top) < 50
      &&  parseInt(bullets.style.left) - parseInt(enemy2.style.left) < 30
      && parseInt(bullets.style.top) > parseInt(enemy2.style.top)
      && parseInt(bullets.style.left) > parseInt(enemy2.style.left)){
      //alert("burst");
      enemy2.style.background="url(hong2.png)";       
     }
     
     if(parseInt(bullets.style.top) - parseInt(enemy3.style.top) < 50
      &&  parseInt(bullets.style.left) - parseInt(enemy3.style.left) < 30
      && parseInt(bullets.style.top) > parseInt(enemy3.style.top)
      && parseInt(bullets.style.left) > parseInt(enemy3.style.left)){
      //alert("burst");
      enemy3.style.background="url(hong2.png)";       
     }
    },60);
    
    
   }
   
   //enemy move
   function enemyMove(){
    //alert("enemyMove");
    var left1=parseInt(Math.random()*3);
    var left2=parseInt(Math.random()*3);
    times=setInterval(function(){
     enemy.style.top=parseInt(enemy.style.top)+4;
     enemy1.style.top=parseInt(enemy1.style.top)+3;
     enemy2.style.top=parseInt(enemy2.style.top)+3;
     enemy3.style.top=parseInt(enemy3.style.top)+2;
     
     //enemy2.style.left=parseInt(enemy2.style.left)+left1;
     //enemy3.style.left=parseInt(enemy3.style.left)-left2;
     
     if(parseInt(enemy.style.top) > 450){
      //alert("stop");
      var num=parseInt(Math.random()*350);
      //alert(num);
      enemy.style.top=50;
      enemy.style.left=num;
      enemy.style.background="url(enemy.png)";
     }
     
     if(parseInt(enemy1.style.top) > 450){
      //alert("stop");
      var num=parseInt(Math.random()*350);
      //alert(num);
      enemy1.style.top=50;
      enemy1.style.left=num;
      enemy1.style.background="url(enemy.png)";
     }
     
     if(parseInt(enemy2.style.top) > 450  || parseInt(enemy2.style.left) > 360){
      //alert("stop");
      var num=parseInt(Math.random()*320);
      //alert(num);
      enemy2.style.top=50;
      enemy2.style.left=num;
      enemy2.style.background="url(enemy.png)";
     }
     
     if(parseInt(enemy3.style.top) > 450 || parseInt(enemy3.style.left) < 20){
      //alert("stop");
      var num=parseInt(Math.random()*320);
      //alert(num);
      enemy3.style.top=50;
      enemy3.style.left=num;
      enemy3.style.background="url(enemy.png)";
     }
    },30);
    
    
   }
   
   //enemy fired bullet
   var ko=0;
   function enemyFiredBullet(){
    //create enemy bullet
     var enemyBullet;
     var BulletLeft;
     CreateEnemyBullet();
     function CreateEnemyBullet(){
       enemyBullet=document.createElement("div");
       enemyBullet.style.width="5px";
       enemyBullet.style.height="5px";
       enemyBullet.style.background="yellow";
       //alert("ok");
       enemyBullet.style.position="absolute";
       enemyBullet.style.top="50";
       enemyBullet.style.left="150";
       document.body.appendChild(enemyBullet);
       //alert(document.body.appendChild(enemyBullet));
     }
     timess = setInterval(function(){
     //alert("timess");
     enemyBullet.style.top=parseInt(enemyBullet.style.top)+10;
     
     if(parseInt(enemyBullet.style.top) > 500){
      //alert("kk");
      enemyBullet.style.top=50;
      var num=parseInt(Math.random()*350);
      enemyBullet.style.left=num;
     }
     if(parseInt(enemyBullet.style.top) - parseInt(fighter.style.top) < 10 &&
     parseInt(enemyBullet.style.left) - parseInt(fighter.style.left) < 10 &&
     parseInt(enemyBullet.style.left) > parseInt(fighter.style.left) &&
     parseInt(enemyBullet.style.top) < parseInt(fighter.style.top)){
      //alert("ko");
      ko++;
      //alert(ko);
      if(ko > 2){
       //alert(ko);
       for(var i=0;i<500;i++){
        clearInterval(timer);
       clearInterval(timers);
       clearInterval(timess);
       clearInterval(time);
       }
       //change fighter background image
       fighter.style.width="80";
       fighter.style.height="80";
       fighter.style.background="url(over.png)";
       alert(myrefresh());
      }
     }
     },60);
   }
    //refresh page
    function myrefresh()
    {
     alert("game over");
     window.location.reload();
    }
  </script>
 </head>
 <body>
  <button οnclick="start()">start</button>
  <!--the size of the game interface-->
  <div id="interface" style="width:400px;height:500px;background-image:url(bg.gif);border:solid 1px black">
   <!--enemy-->
   <div id="enemy" style="width:50px;height:50px;background-image:url(enemy.png);position:absolute;left:200px;top:50px"></div>
   <div id="enemy1" style="width:50px;height:50px;background-image:url(enemy.png);position:absolute;left:140px;top:50px"></div>
   <div id="enemy2" style="width:50px;height:50px;background-image:url(enemy.png);position:absolute;left:80px;top:50px"></div>
   <div id="enemy3" style="width:50px;height:50px;background-image:url(enemy.png);position:absolute;left:260px;top:50px"></div>
   <!--fighter-->
   <div id="fighter" style="width:50px;height:70px;background-image:url(fight.png);top:450px;left:200px;position:absolute;"></div>
      
  </div>
 </body>
</html>

13东倍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页版扫雷（HTML/CSS/JS实践）
alllliy的博客
10-09 5508
html JavaScript版扫雷 剩余雷数：0 个 持续时间: 0 秒 难度选择： 初级（10*10） 中级（15*15） 高级（20*20）
网页版 雷电游戏
12-09
通过js技术 在html页面中 雷电小游戏技术
网页版扫雷游戏···
weixin_30915275的博客
04-20 181
闲的没事 写个扫雷， 算法 不太好·····凑合 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扫雷</title> </head> <body> <script> fun...
HTML网页雷电
07-04
游戏名称：html网页版雷电 主要是运用了javascript来实现 键盘的上下左右键来移动战机，子弹自动发射，若被敌机打中10次，game over。 代码简单却能让你快速接受理解代码
html5原生实现雷电游戏.zip
02-23
在这个"html5原生实现雷电游戏.zip"压缩包中，包含的是一个使用HTML5和原生JavaScript编写的雷电小游戏。这个项目非常适合初学者学习，因为它提供了详细的注释，帮助理解代码的运行机制。 首先，我们要了解HTML5在...
jquery gamequery.js开发网页版雷电战机游戏源码
11-03
《基于jQuery GameQuery.js开发的网页版雷电战机游戏源码解析》 在现代网页游戏中，JavaScript库的应用已经成为开发者们的首选工具，其中jQuery以其简洁、易用的特点深受喜爱。而GameQuery.js是jQuery的一个扩展库...
《银河系的掠夺》HTML5 网页游戏源码地址
12-07
试玩第一关后，感觉非常象流行的PC游戏“雷电”。学习HTML5游戏开发必备。
前端-雷电游戏
我的博客----机械鱼人
03-18 678
目录零、资源一、前端web1.1 网页的组成1.2 游戏分析二、图片的显示（html初识）2.1 标签2.1.1 什么是标签2.2 快速生成html模板2.3 img标签三、键盘事件的获取(JS)3.1 JS是什么？3.2 alert弹出框3.3 事件（方法function）3.3.1 简单的方法3.3.2 键盘点击绑定事件3.3.3 获取键盘点击的key四、飞机的移动4.1 指定飞机的位置4.1...
HTML5 js面向对象飞机大战【雷电】游戏代码.rar
07-10
HTML5 js面向对象游戏开发，飞机大战Betrs版，看看界面，感觉和雷电游戏十分相似啊，HTML5版的雷电游戏，放在手机上直接可以玩了，呵呵。PC端适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
javascript 雷电游戏
12-03
纯JS实现的雷电游戏。 采用面向对象的JS编程。继承，闭包等等。 支持中英文。支持按键设置等等功能。
使用Fiddler监控雷电/夜神模拟器浏览网页:"安全警告:该网站的安全证书有问题."解决方案!
热门推荐
PLA12147111的博客
06-10 2万+
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 访问成功,不再有安全警告弹窗!
html5游戏开发-弹幕+仿雷电小游戏demo
web开发自学
12-01 356
本游戏使用的是html5的canvas，运行游戏需要浏览器支持html5。 本篇文章详细讲解如何用html5来开发一款射击游戏，雷电可以说是射击游戏中的经典，下面就来模仿一下。 先看一下游戏截图 演示地址 http://fsanguo.comoj.com/html5/barrage2/index.html 游戏开发，需要用到开源库件：LegendForHtml5Programming。 Le...
基于HTML的飞机射击游戏
不脱发的程序猿
10-07 1万+
本篇博文将分享一篇基于HTML的简单的飞机射击游戏，下方是玩家飞机，可按空格键能不断地发射子弹，上方是随机出现的敌方飞机。玩家可以通过键盘的方向键控制自己飞机的移动，当玩家飞机的子弹碰到敌方飞机时，敌方飞机出现爆炸效果。
html飞机大战小游戏文本讲解,html、JS 飞机大战游戏
weixin_29331115的博客
05-31 319
飞机大战你的浏览器不支持canves画布元素，请更新浏览器获得演示效果。飞机大战分数：0分var canvas=document.getElementById('myCanvas');var context=canvas.getContext('2d');document.addEventListener('keydown',onKeydown);//飞机类和其属性var Plan=functio...
雷电源代码！易懂易学，适合初学者！
惜忆隐蝶
05-24 3227
这是一款非常时尚的，雷电源代码！易懂易学，适合初学者！ 由于程序代码过长不变  全部写上来  有需要学习的  请下载源码  程序    下载地址http://download.csdn.net/detail/xiyiyindie/9449310
基于JBox2D物理引擎开发的“雷电”小游戏（三）——模拟并显示世界
Black__Lotus的博客
05-01 1148
上一篇文章里讲到了如何创建世界及其边界，这次我将给大家讲讲如何模拟这个世界。什么是模拟世界虽然我们创建世界以及作为边界的刚体，但是这个世界是需要我们不断的去计算各个刚体的状态如速度、加速度、受力情况等，而这个不断的计算就是所谓的模拟世界，所以我们需要用一个定时器不断的模拟世界，使得世界能够运转。模拟世界ScheduledThreadPoolExecutor定时器在这里，我选择使用ScheduledT
初学JS，使用JavaScript和HTML5画布编写游戏Flappy Bird简易版
weixin_39369911的博客
03-07 1484
用js和H5&lt;canvas&gt;标签编写经典游戏：Flappy Bird 简易版声明：本人初学JS和H5，本文涉及编写方式以及算法如有更好地改进，请各位大佬提出建议~一.能力要求：JavaScript相关知识，HTML5&lt;canvas&gt;，json，面向对象思想等。二.需要完成以下工作：1.设计游戏（包括小鸟、柱子等，我们必须遵循一条清晰的逻辑：鸟是在做竖直上抛和自由落体运动，柱...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值