📜  使用 HTML CSS 和 JavaScript 设计龙的世界游戏

📅  最后修改于: 2021-11-07 08:04:32             🧑  作者: Mango

项目介绍: 《龙之世界》是一款游戏,其中一条龙试图通过跳过挡路的龙来从另一条龙中拯救自己。当一条龙从另一条龙中救出自己时,分数会更新。

该项目将包含 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


参考:龙游戏

输出: