html--飞机坦克大战

最新推荐文章于 2024-06-14 07:44:22 发布
最新推荐文章于 2024-06-14 07:44:22 发布
阅读量520 收藏 4
点赞数 5
分类专栏： html 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/139113700
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  :root {
  --acceleration-default: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --acceleration-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --border-circular: 50%;
  --border-mid: 33%;
  --border-soft: 5%;
  --border-irregular: 33% 33% 5% 5%;
  --color-dark-100: #6b6d6f;
  --color-dark-80: #909294;
  --color-dark-60: #818386;
  --color-dark-40: #8d949a;
  --color-dark-20: #282828;
  --color-bright-100: #dfecf9;
  --color-bright-67: #c5d3e0;
  --color-bright-33: #adbac5;
  --color-accent: #ff8800;
  --color-accent-fade: linear-gradient(
    to top,
    rgba(255, 172, 76, 0) 0%,
    rgba(255, 172, 76, 1) 100%
  );
  --perspective: rotateX(47deg) rotateY(0deg) rotateZ(45deg);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body{
  background: var(--color-dark-20);
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.scene {
  background: var(--color-dark-80);
  width: 800px;
  height: 600px;
  -webkit-animation: animRevealScene ease-in 1s 1;
          animation: animRevealScene ease-in 1s 1;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius: 3px;
}

.inner-scene {
  -webkit-transform: var(--perspective);
          transform: var(--perspective);
  width: 100%;
  height: 120%;
  margin: 0 auto;
  max-width: 100%;
  max-width: 400px;
  max-height: 600px;
}

.track {
  position: absolute;
  height: 200%;
  width: 60%;
  left: 35%;
  top: -50%;
  outline: 1px solid transparent;
  -webkit-animation: animFakeParallax 3s linear infinite;
          animation: animFakeParallax 3s linear infinite;
  background: var(--color-dark-100);
}

.track:after {
  content: "";
  display: block;
  width: 70%;
  margin-left: -70%;
  height: 100%;
  background: var(--color-dark-60);
}

.track:nth-of-type(2) {
  top: calc(-250% + 2px);
}

.item {
  position: absolute;
  left: calc(50% - var(--item-half-width));
  top: calc(50% - var(--item-half-height));
}

.item:before,
.item:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  --item-half-width: 50%;
  --item-half-height: 50%;
  outline: 1px solid transparent;
}

.x-wing {
  width: 25px;
  height: 260px;
  --item-half-width: 30px;
  --item-half-height: 25%;
  border-radius: var(--border-irregular);
  background: var(--color-bright-67);
  top: 70%;
  -webkit-animation: animShake 2.5s var(--acceleration-bounce) infinite alternate;
          animation: animShake 2.5s var(--acceleration-bounce) infinite alternate;
  outline: 1px solid transparent;
}

.x-wing:before {
  background: var(--color-bright-100);
  width: 100%;
  height: 40%;
  bottom: 25%;
  border-radius: var(--border-irregular);
  -webkit-transform: scale3d(0.5, 0.4, 1);
          transform: scale3d(0.5, 0.4, 1);
  -webkit-transform-origin: left;
          transform-origin: left;
}

.x-left,
.x-right {
  width: 300%;
  height: 33%;
  left: -300%;
  top: 66%;
}

.x-right {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  left: 100%;
}

.pipe {
  width: 10%;
  height: 50%;
  left: -43%;
  top: 15%;
  background: var(--color-bright-67);
}

.pipe:before {
  width: 50%;
  height: 150%;
  left: 25%;
  top: -150%;
  background: var(--color-bright-33);
}

.pipe:after {
  width: 100%;
  height: 30%;
  left: 0%;
  top: -180%;
  background: var(--color-bright-67);
}

.engine {
  left: 80%;
  top: 0;
  -webkit-transform: rotateZ(180deg) scale(1.5, 0.6);
          transform: rotateZ(180deg) scale(1.5, 0.6);
}

.engine:after {
  -webkit-transform: scaleY(2);
          transform: scaleY(2);
}

.wing {
  width: 100%;
  height: 33%;
  left: -33%;
  bottom: 0;
  background: var(--color-bright-100);
}

.wing:before {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
  -webkit-transform-origin: top;
          transform-origin: top;
  background: var(--color-accent);
}

.wing:after {
  width: 100%;
  height: 80%;
  background: var(--color-bright-100);
  bottom: -20%;
  -webkit-transform: skewY(10deg);
          transform: skewY(10deg);
}

.x-left.shadow {
  -webkit-transform: translate3d(20px, 20px, 0) skewY(-30deg);
          transform: translate3d(20px, 20px, 0) skewY(-30deg);
  opacity: 0.7;
}

.x-right.shadow {
  -webkit-transform: scaleX(-1.2) translate3d(-20px, 20px, 0) skewY(-10deg);
          transform: scaleX(-1.2) translate3d(-20px, 20px, 0) skewY(-10deg);
  opacity: 0.7;
}

.shadow .wing:before {
  display: none;
}

.defense {
  width: 90px;
  height: 90px;
  --item-half-width: 12.5%;
  --item-half-height: 12.5%;
  left: 10%;
  border-radius: var(--border-circular);
  background: var(--color-dark-40);
  -webkit-transform: rotateZ(180deg) translateY(50%);
          transform: rotateZ(180deg) translateY(50%);
  -webkit-animation: animRotate 2s var(--acceleration-default) infinite alternate;
          animation: animRotate 2s var(--acceleration-default) infinite alternate;
}

.defense:nth-of-type(2) {
  left: auto;
  right: 10%;
  top: 90%;
  -webkit-animation: none;
          animation: none;
  border-radius: var(--border-soft);
}

.defense:before,
.defense:after {
  background: var(--color-bright-33);
  width: 100%;
  height: 100%;
  bottom: -20%;
  left: 5%;
  border-radius: var(--border-irregular);
  -webkit-transform: scale(0.6, 0.7) skewX(-5deg);
          transform: scale(0.6, 0.7) skewX(-5deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  z-index: 1;
}

.defense:after {
  -webkit-transform: scale(0.15, 0.5) skewX(-5deg);
          transform: scale(0.15, 0.5) skewX(-5deg);
  left: 40%;
  border-radius: var(--border-soft);
  background: var(--color-bright-67);
}

.defense .cannon {
  left: 45%;
  top: 0;
  -webkit-transform: scale(0.8, 0.6) skewX(0deg);
          transform: scale(0.8, 0.6) skewX(0deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-animation: animDefenseCannon 1.5s var(--acceleration-bounce) infinite;
          animation: animDefenseCannon 1.5s var(--acceleration-bounce) infinite;
}

.defense .cannon:nth-of-type(2) {
  left: auto;
  right: 25%;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.defense:nth-of-type(2):before {
  border-radius: var(--border-soft);
}

.laser {
  width: 10%;
  height: 50%;
  --item-half-width: 5%;
  --item-half-height: 25%;
  
}

.laser:before,
.laser:after {
  background: var(--color-accent-fade);
  width: 50%;
  height: 100%;
  bottom: 200%;
  left: 100%;
  -webkit-animation: animLaser 1.5s var(--acceleration-default) infinite;
          animation: animLaser 1.5s var(--acceleration-default) infinite;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.laser:before {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.laser:after {
  left: 275%;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

@-webkit-keyframes animFakeParallax {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes animFakeParallax {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@-webkit-keyframes animShake {
  0%,
  5% {
    -webkit-transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
            transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
  }
  45%,
  50% {
    -webkit-transform: scale(0.7) translate3d(200%, 10%, 0) skewY(2deg);
            transform: scale(0.7) translate3d(200%, 10%, 0) skewY(2deg);
  }
  100% {
    -webkit-transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
            transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
  }
}

@keyframes animShake {
  0%,
  5% {
    -webkit-transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
            transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
  }
  45%,
  50% {
    -webkit-transform: scale(0.7) translate3d(200%, 10%, 0) skewY(2deg);
            transform: scale(0.7) translate3d(200%, 10%, 0) skewY(2deg);
  }
  100% {
    -webkit-transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
            transform: scale(0.7) translate3d(0, 0%, 0) skewY(-2deg);
  }
}

@-webkit-keyframes animRevealScene {
  0% {
    opacity: 0.21;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animRevealScene {
  0% {
    opacity: 0.21;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes animDefenseCannon {
  0% {
    -webkit-transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
            transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
  }
  50% {
    -webkit-transform: scale(0.8, 0.6) skewX(-3deg) translateY(20px);
            transform: scale(0.8, 0.6) skewX(-3deg) translateY(20px);
  }
  80%,
  100% {
    -webkit-transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
            transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
  }
}

@keyframes animDefenseCannon {
  0% {
    -webkit-transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
            transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
  }
  50% {
    -webkit-transform: scale(0.8, 0.6) skewX(-3deg) translateY(20px);
            transform: scale(0.8, 0.6) skewX(-3deg) translateY(20px);
  }
  80%,
  100% {
    -webkit-transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
            transform: scale(0.8, 0.6) skewX(-3deg) translateY(5px);
  }
}

@-webkit-keyframes animLaser {
  0% {
    opacity: 0;
    -webkit-transform: scaleY(0) translate3d(0, 20px, 0) rotate(0.02deg);
            transform: scaleY(0) translate3d(0, 20px, 0) rotate(0.02deg);
  }
  35% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: scaleY(1.5) translate3d(0, -200px, 0) rotate(0.02deg);
            transform: scaleY(1.5) translate3d(0, -200px, 0) rotate(0.02deg);
  }
}

@keyframes animLaser {
  0% {
    opacity: 0;
    -webkit-transform: scaleY(0) translate3d(0, 20px, 0) rotate(0.02deg);
            transform: scaleY(0) translate3d(0, 20px, 0) rotate(0.02deg);
  }
  35% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: scaleY(1.5) translate3d(0, -200px, 0) rotate(0.02deg);
            transform: scaleY(1.5) translate3d(0, -200px, 0) rotate(0.02deg);
  }
}

@-webkit-keyframes animRotate {
  0% {
    -webkit-transform: rotateZ(165deg) translateY(50%);
            transform: rotateZ(165deg) translateY(50%);
  }
  100% {
    -webkit-transform: rotateZ(175deg) translateY(50%);
            transform: rotateZ(175deg) translateY(50%);
  }
}

@keyframes animRotate {
  0% {
    -webkit-transform: rotateZ(165deg) translateY(50%);
            transform: rotateZ(165deg) translateY(50%);
  }
  100% {
    -webkit-transform: rotateZ(175deg) translateY(50%);
            transform: rotateZ(175deg) translateY(50%);
  }
}
  </style>
 </HEAD>

 <BODY>
 <div class="scene">
  <div class="inner-scene">
     <div class="track">
      <div class="item defense">
          <div class="item laser"></div>
          <div class="item pipe cannon"></div>
          <div class="item pipe cannon"></div> 
      </div>
       <div class="item defense">
          <div class="item laser"></div>
          <div class="item pipe cannon"></div>
          <div class="item pipe cannon"></div>
      </div>
    </div>
    <div class="track">
      <div class="item defense">
          <div class="item laser"></div>
          <div class="item pipe cannon"></div>
          <div class="item pipe cannon"></div>
      </div>
      <div class="item defense">
           <div class="item laser"></div>
          <div class="item pipe cannon"></div>
          <div class="item pipe cannon"></div>
      </div>
    </div>
    <div class="item x-wing">
      <div class="item x-left shadow">
        <div class="item pipe cannon"></div>
        <div class="item wing"></div>
      </div>
      <div class="item x-left">
        <div class="item pipe cannon"></div>
        <div class="item wing"></div>
        <div class="item pipe engine"></div>
      </div>
      <div class="item x-right shadow">
        <div class="item pipe cannon"></div>
        <div class="item wing"></div>
      </div>
      <div class="item x-right">
        <div class="item pipe cannon"></div>
        <div class="item wing"></div>
        <div class="item pipe engine"></div>
      </div>
    </div>
  </div>
</div>

  <script></script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
飞机坦克大战.html
10-31
飞机坦克大战，本页面是用简单的html编写的一个常见的简易游戏，可以直接在浏览器上运行。编译软件可以使用VS，dw作为开发工具。
cocos2d-html5飞机大战.zip
09-04
多款HTML5 游戏源代码特辑，包括了捕鱼达人、植物僵尸、Solarmax、俄罗斯方块、扫雷、切水果、超级玛丽、三国杀、驴子跳、太空战舰、坦克大战等
html飞机大战游戏实验报告,JavaScript原生编写《飞机大战坦克》游戏完整实例
weixin_33598481的博客
06-02 967
先来看看开始的界面图实现思路：1.打开页面，背景开始走动；2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；3.当敌人碰到子弹，敌人消失；4.当敌人和飞机相遇，飞机死亡，结束游戏；html页面飞机大战StartGame Over!重新开始css样式*{margin: 0;padding: 0;font-family: "微软雅黑";}#mainScreen{width: 512px;heig...
飞机大战源代码
weixin_45641052的博客
08-21 1630
一款飞机大战游戏
飞机大战坦克游戏
测试
01-22 453
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="...
html实现经典坦克大战小游戏
xcLeigh
05-11 1826
html实现经典坦克大战小游戏，坦克大战源码，html实现经典坦克大战小游戏源码，这是一款很老的游戏，相信大家都有玩过，基本操作方法：玩家1：W A S D 上左下右，SPACE 射击；玩家2： ↑ ← ↓ → 上左下右，ENTER 射击。N 下一关，P 上一关。基本功能都实现，简单易上手。用 html+js+css+canvas 实现，可以借用上手学习。
python飞机大战类_python飞机大战
weixin_39803207的博客
11-24 332
广告关闭腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！导包2. 子弹类3. 玩家飞机类4. 发射子弹的函数5. 操控飞机移动的4个函数6. 敌机类7. 资源初始化及参数配置8. 游戏主循环 ? 今天给大家免费分享一下python飞机游戏的源码。 ? python飞机大战（声明：源码来源于网络，具体在哪搞的记不太清了，好像是17年的时候用...
Java实现一个坦克大战的小游戏【附源码】
JavaPub
03-27 5466
坦克大战,计算机毕业设计，毕业设计
【百套源码】HTML5期末大作业 - 各类网页作业源码合集
xcLeigh
06-16 7394
【百套源码】HTML5期末大作业 - 各类网页作业源码合集， HTML作业源码，源码下载，内含博主整理的附带源码的资源合集，包括个人介绍相关源码，企业官网相关源码（商城，服装，农业，公司官网，食品，居家，美容，理发，运动，健身，生鲜，保洁，应用，物流，快递，电子，宠物，教育，培训，家具，花店，婚纱，灯具，鲜花等），游戏相关源码，抽奖相关源码，生日求爱表白相关源码，个人博客空间相关源码等。博主持续更新，希望能给大家带来帮助和提供灵感。
HTML5小游戏动手做（二）：使用PIXI引擎制作坦克大战游戏
time1812的专栏
01-27 6024
这里写自定义目录标题1. 简介1.1 PIXI 简介1.2 坦克大战游戏简介2. 实现细节2.1 技术选型2.2 环境搭建2.3 创建舞台2.4 游戏状态机2.5 消息总线2.6 加载页面2.7 开始页面2.8 我们的坦克 1. 简介 1.1 PIXI 简介 PIXI JS是一款轻量级的HTML5的2D引擎，我看现在它的官网上并没有说自己是“游戏”引擎而是说“The HTML5 Creation ...
前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)
热门推荐
商务合作 | 共同学习 | 携手共进
03-02 10万+
通过 js 逻辑与 dom 操作结合实现了简易的飞机大战小游戏，附带图片素材。
h5+css+js原生实现简易飞机大战坦克
12-06
h5+css+js原生实现简易飞机大战坦克 功能非常简易 适合新手练习 js
JavaScript原生编写《飞机大战坦克》游戏完整实例
11-27
先来看看开始的界面图 实现思路：  1....  2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；...link rel="stylesheet" type="text/css" href="飞机大战.css"> </head> <body> <div
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1178
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML初体验
最新发布
linux423的博客
06-14 437
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
html实现粘贴excel数据，在页面表格中复制
weixin_43805439的博客
06-13 449
Html table 实现Excel多格粘贴
HTML跨年烟花
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
HTML标签 label for 还是 htmlFor
wuyujin1997的博客
06-09 494
HTML标签： label 的属性。注意：为了更程序化地设置。
java 坦克发射子弹_【Java_项目篇<1>】--JAVA实现坦克大战游戏--坦克发射子弹（三）...
06-12
好的，你的问题是关于Java实现坦克大战游戏中坦克发射子弹的内容。在这个游戏中，坦克可以通过按下空格键来发射子弹。在Java中，可以通过KeyListener来监听按键事件，然后在相应的事件中调用坦克发射子弹的方法。 具体的实现过程可以参考以下步骤： 1. 在坦克类中定义一个发射子弹的方法，例如shoot()。 2. 在坦克类的构造方法中添加KeyListener，监听空格键的按下事件。 3. 在空格键按下事件中调用shoot()方法，实现坦克发射子弹的功能。 4. 在shoot()方法中创建一个子弹对象，并设置其初始位置和方向等属性。 5. 在游戏循环中不断更新子弹的位置，判断子弹是否与其他坦克或障碍物碰撞，以及是否超出游戏界面等情况。 6. 如果子弹与其他物体发生碰撞或超出游戏界面，则将其从游戏中移除。 通过以上步骤，就可以实现Java中坦克发射子弹的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值