CSS 艺术进阶：绘制会眨眼的像素恐龙（支持键盘跳跃）

于 2025-05-06 08:30:00 发布
阅读量864 收藏 7
点赞数 8
文章标签： css 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76277481/article/details/147706011
版权

引言

在当今的网页设计领域，CSS 早已不仅仅局限于简单的页面布局和样式设置，它正以强大的表现力不断突破边界，开启一个充满创意的艺术世界。今天，我们将踏上 CSS 艺术的进阶之旅，一同探索如何用 CSS 绘制一只会眨眼的像素恐龙，并且让它支持通过键盘控制进行跳跃，为你的网页增添独特而有趣的交互元素。

实现思路

要实现会眨眼的像素恐龙并支持键盘跳跃，我们可以把整个过程拆分为以下几个关键步骤：

  1. HTML 结构搭建：创建一个基本的 HTML 结构，为恐龙和它所处的环境提供容器。
  2. CSS 绘制恐龙：利用 CSS 的 div 元素和 border、background-color 等属性，将恐龙以像素风格绘制出来，同时添加眨眼动画。
  3. JavaScript 实现键盘交互：监听键盘事件，当用户按下特定按键时，让恐龙执行跳跃动作。

代码实现

1. HTML 结构搭建

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会眨眼的像素恐龙</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="game-container">
        <div class="dinosaur" id="dinosaur">
            <!-- 这里是恐龙的像素块 -->
            <div class="pixel pixel-1"></div>
            <div class="pixel pixel-2"></div>
            <!-- 可以根据需要添加更多像素块 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

在上述代码中，我们创建了一个 game-container 作为整个游戏场景的容器，内部的 dinosaur 类 div 用于包裹恐龙的各个像素块。每个像素块通过 pixel 类和具体的编号类（如 pixel-1、pixel-2）来标识。

2. CSS 绘制恐龙与眨眼动画

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.game-container {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #a8e6cf;
    border: 2px solid #333;
    overflow: hidden;
}

.dinosaur {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 50px;
    height: 50px;
}

.pixel {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffd3b6;
}

/* 定义每个像素块的位置 */
.pixel-1 {
    top: 0;
    left: 0;
}

.pixel-2 {
    top: 0;
    left: 10px;
}

/* 眨眼动画 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* 为眼睛像素块添加眨眼动画 */
.pixel-eye {
    animation: blink 2s infinite;
}
代码解释
  • 全局样式：使用 Flexbox 布局让 body 内容在页面中垂直和水平居中显示，设置背景颜色。
  • 游戏容器样式：game-container 类设置了游戏场景的宽度、高度、背景颜色和边框，同时使用 overflow: hidden 隐藏溢出内容。
  • 恐龙样式：dinosaur 类将恐龙定位在游戏容器底部左侧。
  • 像素块样式：pixel 类定义了每个像素块的基本样式，通过具体的编号类（如 pixel-1、pixel-2）来确定每个像素块的位置。
  • 眨眼动画：@keyframes blink 定义了眨眼动画，通过改变像素块的透明度实现眨眼效果，然后为眼睛像素块添加该动画。

3. JavaScript 实现键盘交互

const dinosaur = document.getElementById('dinosaur');
let isJumping = false;
let jumpHeight = 100;
let jumpDuration = 500;

document.addEventListener('keydown', function (event) {
    if (event.key === ' ' && !isJumping) {
        isJumping = true;
        dinosaur.style.transition = `bottom ${jumpDuration}ms ease-in-out`;
        dinosaur.style.bottom = `${parseInt(getComputedStyle(dinosaur).bottom) + jumpHeight}px`;

        setTimeout(() => {
            dinosaur.style.bottom = '0px';
            setTimeout(() => {
                isJumping = false;
            }, jumpDuration);
        }, jumpDuration);
    }
});
代码解释
  • 首先获取恐龙元素，同时定义两个变量 isJumping 用于判断恐龙是否正在跳跃，jumpHeight 表示跳跃高度，jumpDuration 表示跳跃持续时间。
  • 监听 keydown 事件，当用户按下空格键且恐龙不在跳跃状态时，将 isJumping 设为 true。
  • 通过修改恐龙的 bottom 样式属性实现跳跃动作，同时添加过渡效果。
  • 使用 setTimeout 函数在跳跃持续时间后让恐龙回到初始位置，并将 isJumping 设为 false，以便下次跳跃。

完整代码

HTML 代码（index.html）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会眨眼的像素恐龙</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="game-container">
        <div class="dinosaur" id="dinosaur">
            <!-- 这里是恐龙的像素块 -->
            <div class="pixel pixel-1"></div>
            <div class="pixel pixel-2"></div>
            <!-- 可以根据需要添加更多像素块 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS 代码（styles.css）

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.game-container {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #a8e6cf;
    border: 2px solid #333;
    overflow: hidden;
}

.dinosaur {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 50px;
    height: 50px;
}

.pixel {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffd3b6;
}

/* 定义每个像素块的位置 */
.pixel-1 {
    top: 0;
    left: 0;
}

.pixel-2 {
    top: 0;
    left: 10px;
}

/* 眨眼动画 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* 为眼睛像素块添加眨眼动画 */
.pixel-eye {
    animation: blink 2s infinite;
}

JavaScript 代码（script.js）

const dinosaur = document.getElementById('dinosaur');
let isJumping = false;
let jumpHeight = 100;
let jumpDuration = 500;

document.addEventListener('keydown', function (event) {
    if (event.key === ' ' && !isJumping) {
        isJumping = true;
        dinosaur.style.transition = `bottom ${jumpDuration}ms ease-in-out`;
        dinosaur.style.bottom = `${parseInt(getComputedStyle(dinosaur).bottom) + jumpHeight}px`;

        setTimeout(() => {
            dinosaur.style.bottom = '0px';
            setTimeout(() => {
                isJumping = false;
            }, jumpDuration);
        }, jumpDuration);
    }
});

总结

通过结合 HTML、CSS 和 JavaScript，我们成功实现了一个会眨眼的像素恐龙，并且支持通过键盘控制进行跳跃。这个项目不仅展示了 CSS 在图形绘制和动画方面的强大能力，还体现了 JavaScript 在实现交互功能上的重要作用。你可以根据自己的喜好对恐龙的样式、跳跃高度和眨眼频率等进行调整，进一步拓展这个项目的功能，比如添加障碍物、计分系统等，让它成为一个完整的小游戏。希望这篇文章能为你的 CSS 艺术创作带来新的灵感和思路！

将上述代码分别保存为 index.html、styles.css 和 script.js 文件，确保它们在同一目录下，然后在浏览器中打开 index.html 文件，你就能看到会眨眼且能跳跃的像素恐龙啦！

谷雪_658
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值