HTML动画特效-小游戏(第三部)

Posted 2022-03-31 海瞳Seapupil

---

本章教你如何用html+css+js做一个跳跃逃离坍塌房子。

这次我们做动画特效，我们来整个小游戏！

我先把跳跃逃离坍塌房子运行结果放在下面

我们可以把html+css+js放在html文件里面，也就是把css和javascript放在index.html里面。

废话不多说我们先来讲解html的代码。

我使用下面的 HTML 和 CSS 代码在网页上创建了游戏界面。html代码就是你所看到的六个div和class选择器组成的。

<div class="game">
  <div class="player idle"></div>
  <div class="buildings"></div>
  <div class="road"></div>
  <div class="score">分数: 0</div>
  <div class="msg">点击开始...</div>
</div>

当我们写好html代码后，我们使用下面的CSS后，我们就成功的在网页上搭建了游戏界面。

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800&display=swap");
*, *::before, *::after 
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;


body 
  font-family: "Open Sans", sans-serif;
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


.game 
  position: relative;
  width: 960px;
  height: 340px;
  overflow: hidden;
  background-image: linear-gradient(#001, #200);
  box-shadow: 0 0 1em #fff1;


.score 
  position: absolute;
  top: 0.5em;
  left: 0.5em;


.msg 
  position: absolute;
  top: 2em;
  left: 50%;
  font-size: 1.2em;
  transform: translateX(-50%);
  text-align: center;
  transition: opacity 0.25s;

.msg.off 
  opacity: 0;


.player 
  position: absolute;
  top: var(--player-y, 320px);
  left: var(--player-x, 480px);
  transform: translate(-100%, -100%);
  width: 24px;
  height: 24px;
  background-size: contain;

.player.idle 
  background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-idle.gif");

.player.run 
  background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-run.gif");

.player.jump 
  background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-jump.gif");

.player.dead 
  background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-dead.gif");


.building 
  position: absolute;
  bottom: 20px;
  left: var(--building-x, 960px);
  border: solid #0007;
  border-width: 0 1px;

.building_fragment 
  position: absolute;
  width: 25%;
  height: 33.334%;
  background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/building02.png");
  background-size: 1600% 300%;
  filter: hue-rotate(var(--hue));

.building_fragment:nth-child(4n+1) 
  left: 0%;
  background-position-x: calc(var(--buildingImageX, 0%) + 0%);

.building_fragment:nth-child(4n+2) 
  left: 25%;
  background-position-x: calc(var(--buildingImageX, 0%) + 6.25%);

.building_fragment:nth-child(4n+3) 
  left: 50%;
  background-position-x: calc(var(--buildingImageX, 0%) + 12.5%);

.building_fragment:nth-child(4n+4) 
  left: 75%;
  background-position-x: calc(var(--buildingImageX, 0%) + 18.75%);

.building_fragment:nth-child(n+1):nth-child(-n+4) 
  top: 0%;
  background-position-y: 0%;

.building_fragment:nth-child(n+5):nth-child(-n+8) 
  top: 33.334%;
  background-position-y: 50%;

.building_fragment:nth-child(n+9):nth-child(-n+12) 
  top: 66.668%;
  background-position-y: 100%;

.building.destroy .building_fragment 
  z-index: 100;
  -webkit-animation: destroy 1s ease-out forwards;
          animation: destroy 1s ease-out forwards;

@-webkit-keyframes destroy 
  to 
    transform: translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
    opacity: 0;
  

@keyframes destroy 
  to 
    transform: translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
    opacity: 0;
  

以上是关于HTML动画特效-小游戏(第三部)的主要内容，如果未能解决你的问题，请参考以下文章
 
 案例 HTML5 Canvas流动线条动画特效
 求教如何在Unity中为2D游戏制作技能特效
 CSS3 单选框动画特效
 CATransform3D iOS动画特效详解
 超酷创意分段式SVG文字动画特效
 HTML5“爱心鱼”游戏总结