网络知识 娱乐 你知道chrome小恐龙游戏吗?3分钟使用JavaScript实现

你知道chrome小恐龙游戏吗?3分钟使用JavaScript实现

在这里插入图片描述

作者:大二计算机学生
主页:点击关注
关键字:游戏JS可莉chrome
内容:使用JavaScript防chrome的小游戏,并在完成简能之外,扩展了可爱的可莉音频播放,以及游戏体验优化

文章目录

  • 1.0 简洁版效果演示
  • 2.0 高级版效果演示
  • 1.0 版本 HTML
  • 1.0 版本 CSS
  • 1.0 版本 JavaScript ⌈核心知识⌋
  • 源代码下载
  • 写在最后

1.0 简洁版效果演示

在这里插入图片描述
本文将带大家实现 1.0 版本的小游戏,2.0 就是花里胡哨,1版本是核心,也很简单,是模仿chrome浏览器的小游戏写的,如果你还不知道chrome浏览器的小游戏,那么你可以在chrome浏览器地址栏输入chrome://dino回车即可进入

2.0 高级版效果演示

2.0 就是增强了,添加了一些用户友好的界面处理和样式美化,最棒的是添加了音效,而且还是原神中 可莉 的配音,嘿嘿,看看视频听听就知道了

3分钟使用JavaScript写一个谷歌的小恐龙游戏

在这里插入图片描述

1.0 版本 HTML

这里使用 game 表示最外层容器,其中包裹着两张图片,就是我们的小熊猫了,最后分别引入JavaScript脚本css样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫快跑1.0</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="game">
        <img src="../role.gif" class="role">
        <img src="../tree.png" class="tree">
    </div>
    <script src="./index.js"></script>
</body>

</html>

1.0 版本 CSS

首先清除默认边距

使用 flex布局 在body中使得game内容水平垂直居中

game整个游戏区域长度为600px,使用 overflow: hidden; ,进行溢出隐藏的操作

然后就是对熊猫和树的定位了,让他们出现在合适的位置,等待添加动画

最关键的是两个动画了,为了使得熊猫在空中停留时间久一点,使用了 30% {bottom: 75px;} 70% {bottom: 75px;},小细节,最后就是把关键的熊猫跳的动画分离出一个类名,因为我们需要通过js控制类名的添加,就等于是控制了动画的添加,进而控制了熊猫的跳

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
#game {
    width: 600px;
    height: 200px;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}
.role {
    width: 70px;
    position: absolute;
    bottom: 0;
}
.tree {
    height: 25px;
    width: 25px;
    position: absolute;
    right: 0;
    bottom: 0;
    animation: stop 1s infinite;
}
.animate {
    animation: jump 500ms infinite;
}
@keyframes stop {
    0% {right: 0;}
    100% {right: 630px;}
}
@keyframes jump {
    0% {bottom: 0;}
    30% {bottom: 75px;}
    70% {bottom: 75px;}
    100% {bottom: 0;}
}

1.0 版本 JavaScript ⌈核心知识⌋

JavaScript 所有代码全部写好注释

// 获取主角熊猫
let role = document.querySelector('.role');
// 获取配角大树
let tree = document.querySelector('.tree');
// 全局添加键盘按下事件,触发jump函数
document.body.addEventListener('keydown', jump);
// jump函数,见名知意,一看就是处理熊猫跳的,参数event
function jump(event) {
    // 32 代表键盘空格键
    if (event.keyCode == 32) {
        // 添加类名animate,即添加跳的动画
        if (role.classList != "animate") {
            role.classList.add("animate");
        }
        // 添加类之后,下次就跳不起来了,因为已经添加了
        // 所以正确的做法是,使用定时器,设置和动画一样的时间,并在回调中移除类名
        setTimeout(function () {
            role.classList.remove("animate");
        }, 500);
    }
}
// 每个十毫秒检查一次,是不是撞到了
var check = setInterval(function () {
    // 动态获取熊猫距离下方距离
    let blockButtom = parseInt(window.getComputedStyle(role)
        .getPropertyValue("bottom"));
    // 动态获取树离开右方的距离 
    let stopRight = parseInt(window.getComputedStyle(tree)
        .getPropertyValue("right"));
    // 因为总长600 熊猫70 自身20 所以树的坐标范围如果大于510小于600就是在熊猫脚下
    // 此时还要判断熊猫的脚丫是不是踩到了树,即距离底部小于25,如果都成立就是碰撞了,over 
    if (stopRight > 510 && stopRight < 600 && blockButtom < 25) {
        // 清空动画
        tree.style.animation = "none";
        role.style.animation = "none";
        // 清除定时器
        clearInterval(check);
    }
}, 10)

源代码下载

1.0 版本源代码蓝奏云

2.0 版本源代码蓝奏云

写在最后

希望大家能够喜欢,我会继续努力创作,如果觉得文章写的不错,还请点赞支持博主呀

在这里插入图片描述