游戏名称：雷电游戏

游戏简介：

游戏类型：益智游戏

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

代码分享：

<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>

HTML网页版雷电游戏相关推荐

  1. 石头剪刀布php源码,php实现的网页版剪刀石头布游戏示例

    本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { ...

  2. HTML5高度还原复古24层魔塔网页版小游戏源码

    简介: HTML5高度还原复古24层魔塔网页版小游戏源码 网盘下载地址: http://kekewl.cc/OFfi6keX7OS0 图片:

  3. 网页版JS游戏五子棋单机版也可以改版成网络版

    网页版JS游戏五子棋单机版也可以改版成网络版 2个文件,界面wuziqi.html   脚本wuziqi.js 新手可以去我下载中心下, <!DOCTYPE html> <html ...

  4. 《游戏学习》| 水果忍者HTML5网页版在线游戏 | 源码分析

    游戏介绍 这是一款由百度JS小组提供的HTML5版切水果游戏,这款基于HTML5实现的网页版切水果游戏虽然和原版的切水果游戏相比仍有美中不足之处,但也算有声有色,画面效果也十分炫目华丽. 游戏截图 主 ...

  5. 收藏网页版小游戏：蜘蛛纸牌、扫雷、水果忍者、打地鼠、吃豆人

    学习之余当然是摸鱼了,这里分享几个不用下载直接在线玩耍的游戏.有蜘蛛纸牌网页版在线玩.在线扫雷小游戏.在线玩的水果忍者.吃豆人.打地鼠.3D模仿. 下面我将一个个列出来.欢迎体验收藏! 蜘蛛纸牌:这是 ...

  6. 前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘

    功能模块 快来体验下吧!看下你能赢得了计算机么? 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 老规矩,源码贴上 具体代码 (1)HTML代码 <!DOCTYPE html ...

  7. web前端之五子棋网页版小游戏

    五子棋小游戏 这个五子棋小游戏,没有写成人机模式. 但大家可以尝试下自己饰演两个角色的五子棋,嘻嘻嘻 效果图片 效果 代码 index.html <!doctype html> <h ...

  8. js实现web网页版台球游戏

    js桌球小游戏在线试玩地址:http://keleyi.com/game/13/ 游戏截图: 完整代码,保存到html文件可以试玩: 1 <!DOCTYPE html PUBLIC " ...

  9. 网页版扫雷游戏···

    闲的没事 写个扫雷, 算法 不太好·····凑合 <!DOCTYPE html> <html> <head> <metacharset="utf-8 ...

最新文章

  1. ARM 之八 Cortex-M/R 内核启动过程 / 程序启动流程（基于IAR）
  2. Node — 第四天（Promise与路由）
  3. 前端学习（2020）vue之电商管理系统电商系统之完成商品添加操作
  4. python @cached_property
  5. 提交信息html模板,提交留言HTML模板代码
  6. 白噪音和粉红噪音煲机_白噪音app体验报告
  7. 【编译原理笔记19】代码优化： 支配结点和回边，自然循环及其识别，删除全局公共子表达式和复制语句，代码移动，作用于归纳变量的强度削弱，归纳变量的删除
  8. pythonjson安装_python安装simplejson
  9. 【转】Servlet/JSP学习笔记(3)-Lomboz介绍+安装方法
  10. 教您盘点8款最好用的免费远程桌面工具(附地址)
  11. idea database mysql驱动
  12. 红帽linux开启vnc服务器,红帽Linux上使用VNC
  13. 头条抖音后端技术3面，2021大厂Java面试题精选
  14. 引流效果差？一文详解轻松获取优质流量的两大要点
  15. VMware无法注册的问题所在
  16. 推荐一本书——半小时漫画中国史
  17. fluent柱坐标系设定_Fluent中速度入口条件要设置哪些参数
  18. 搭建 VuePress 站点必做的 10 个优化
  19. pdf,word,ppt在线预览
  20. Albumentations 中的空间级图像变换

热门文章

  1. 地图经纬度坐标相互转换度分秒
  2. 宜信实习经历： “明年暑假，我还要再来”
  3. Word2016自第3页开始添加连续页脚（除掉封面和目录）
  4. 多级列表关联到标题样式
  5. 畅言插件，http换成https失效了
  6. 笔记本网卡搜索不到wifi名（SSID）的其中一个解决思路
  7. kafka windows环境搭建 SASL_PLAINTEXT/SCRAM
  8. 搜狗输入法繁简体切换
  9. 简单的文本挖掘-用于QQ聊天记录（R）
  10. 专有钉钉 浙政钉 前端 对接流程（小程序）