项目介绍： 《龙之世界》是一款游戏，其中一条龙试图通过跳过挡路的龙来从另一条龙中拯救自己。当一条龙从另一条龙中救出自己时，分数会更新。
该项目将包含 HTML、CSS 和 JavaScript 文件。 HTML 文件为游戏添加结构，然后使用 CSS 设置样式。 JavaScript 为游戏添加了功能。
文件结构：
- 索引.html
- 样式文件
- 脚本.js
HTML代码：
- 标题部分：它将显示游戏名称。
- 游戏结束部分：游戏失败时显示。
- 障碍物部分：它将包含龙必须自救的障碍物。
- 龙部分：它将包含必须从障碍中拯救出来的龙，即另一条龙。
- 比分部分：显示当前比赛的比分。
索引.html
HTML
Welcome to Dragon's world
Game Over
Your score : 0
CSS代码：
- 定位游戏名称：游戏名称由CSS的absolute属性定位。
- 背景图片样式：在容器类中，我们放置了游戏的背景图片，背景大小设置为cover 。
- 记分卡样式：我们将记分卡放置在页面的右上角，并为其提供了合适的背景颜色以使其更具吸引力。其中的文本将以白色显示。
- 障碍物图像样式：我们将障碍物定位在页面的左下角并为其提供动画，使其可以向左移动。
- 龙的造型：我们将龙放置在页面的左下角并为其提供动画，以便它可以跳起来救自己。
- 游戏结束样式：我们将游戏结束部分放置在页面中央，当龙被障碍物击中时它会出现。
样式文件
/* CSS Reset */
*{
margin:0px;
padding:0px;
}
body {
/* Hides the bottom scrollbar */
overflow: hidden;
}
/* Styling of the Game's Name */
#gameName {
position: absolute;
top:30vh;
left:38vw;
}
/* Background image styling */
.container {
background-image: url(cover.png);
background-size: cover;
width:100vw;
height:100vh;
}
/* ScoreCard Styling */
#scorecount {
position: absolute;
top:20px;
right:20px;
background-color: black;
padding: 28px;
border-radius: 20px;
color: white;
}
/* Obstacle image styling and positioning */
.obstacle {
background-image: url(obstacle.png);
background-size: cover;
width:154px;
height: 126px;
position: absolute;
bottom:0px;
right:120px;
}
/* Applying animation to the obstacle
so that it can move towards left */
.animateobstacle {
animation: aniob 5s linear infinite;
}
@keyframes aniob {
0% {
left:100vw;
}
100% {
left:-10vw;
}
}
/* Dragon's styling */
.dragon {
background-image: url(dragon.png);
background-size: cover;
width: 194px;
height: 126px;
position: absolute;
bottom:0px;
left:90px;
}
/* Applying animation to the dragon so
that it can save himself by jumping up */
.animatedragon {
animation: ani 1s linear;
}
@keyframes ani {
0% {
bottom:0px;
}
25% {
bottom:150px;
}
50% {
bottom:300px;
}
75% {
bottom:211px;
}
100% {
bottom:0px;
}
}
/* gameover styling and positioning */
.gameover {
visibility: hidden;
font-family: 'Ubuntu', sans-serif;
position: absolute;
top: 50vh;
left: 35vw;
color: red;
font-weight: bold;
font-size: 6rem;
background-color: firebrick;
border-radius: 20px;
}
JavaScript 代码：
1.龙的移动：这是由onkeydown事件提供的。
- 向上箭头键：按下后，龙会向上跳跃(动画由 CSS 提供)。
- 左箭头键：按下后，龙会向左移动(动画由 CSS 提供)。
- 右箭头键：按下后，龙会向左移动(动画由 CSS 提供)。
document.onkeydown = function(e) {
console.log(e.keyCode);
if (e.keyCode == 38) {
dragon = document.querySelector('.dragon');
dragon.classList.add('animatedragon');
setTimeout(() => {
dragon.classList.remove('animatedragon');
}, 700);
}
if (e.keyCode == 37) {
dragon = document.querySelector('.dragon');
dragonx = parseInt(window.getComputedStyle(dragon, null)
.getPropertyValue('left'));
dragon.style.left = dragonx - 112 + "px";
}
if (e.keyCode == 39) {
dragon = document.querySelector('.dragon');
dragonx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dragon.style.left = dragonx + 112 + "px";
}
}
2.更新分数：只有满足给定的条件才满足分数。我们将计算障碍物和龙的左值和下值，然后根据适当的值增加分数，这表明龙已从障碍物中救出自己。为此，我们采用了“cross”变量并为其分配了“true”。当龙安全越过障碍物时，我们将该值设置为“false”。大约 1 秒后，我们将 cross 的值更改为“true”。我们还让障碍物在每次穿越后跑得更快，从而提高了难度。
setInterval(() => {
dragon = document.querySelector('.dragon');
gameover = document.querySelector('.gameover');
obstacle = document.querySelector('.obstacle');
dx = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('left'));
dy = parseInt(window.getComputedStyle(
dragon, null).getPropertyValue('bottom'));
ox = parseInt(window.getComputedStyle(
obstacle, null).getPropertyValue('left'));
oy = parseInt(window.getComputedStyle(
obstacle, null).getPropertyValue('bottom'));
offsetx = Math.abs(dx - ox);
offsety = Math.abs(dy - oy);
console.log(offsetx, offsety);
if (offsetx < 120 && offsety <= 144) {
gameover.style.visibility = 'visible';
obstacle.classList.remove('animateobstacle');
} else if (offsetx < 125 && cross) {
score += 1;
updateScore(score);
cross = false;
setTimeout(() => {
cross = true;
}, 1000);
setInterval(() => {
obsanidur = parseFloat(window
.getComputedStyle(obstacle, null)
.getPropertyValue('animation-duration'));
obstacle.style.animationDuration
= obsanidur - 0.01 + 's';
}, 500);
}
}, 10);
function updateScore(score) {
scorecount.innerHTML = "Your score : " + score;
}
脚本.js
参考：龙游戏
输出：