本章教你如何用html css js做一个跳跃逃离坍塌房子。
这次我们做动画特效，我们来整个小游戏！ 我先把跳跃逃离坍塌房子运行结果放在下面
我们可以把html css js放在html文件里面，也就是把css和JavaScript放在index.html里面。
废话不多说我们先来讲解html的代码。
我使用下面的 HTML 和 CSS 代码在网页上创建了游戏界面。html代码就是你所看到的六个div和class选择器组成的。
代码语言：javascript复制<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>当我们写好html代码后，我们使用下面的CSS后，我们就成功的在网页上搭建了游戏界面。
代码语言：javascript复制@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;
}
}
.building.destroy::before {
content: "";
position: absolute;
top: calc(50% - 5px);
right: 90%;
width: 320px;
height: 10px;
border-radius: 5px;
background-image: linear-gradient(#f000, #f00, #f000);
-webkit-animation: laserOff 0.5s ease-out forwards;
animation: laserOff 0.5s ease-out forwards;
}
@-webkit-keyframes laserOff {
to {
opacity: 0;
}
}
@keyframes laserOff {
to {
opacity: 0;
}
}
.road {
position: absolute;
bottom: 0;
width: calc(100% 10px);
height: 20px;
background-image: linear-gradient(#555, #333);
}
.road::after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
background-image: repeating-linear-gradient(90deg, #aaa 0px 5px, #aaa0 5px 10px);
}html css的代码演示如下
由于代码不能放多了，所以JavaScript代码我就不放在这个上面了，我就简单的讲一下js在游戏里面的作用。 JavaScript在这个小游戏里面非常重要的作用，用另一种说就是游戏的核心，JavaScript在游戏里划分游戏人物跳跃和计算人物所跳跃的数量，还规划了游戏的场景。所以JavaScript在游戏里起到了重要作用！
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=5t95bj3gl3hu
