JS+H5flappybird游戏

最新推荐文章于 2024-08-27 17:25:23 发布
最新推荐文章于 2024-08-27 17:25:23 发布
阅读量465 收藏 9
点赞数 8
文章标签： html 前端 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w11111xxxl/article/details/140711305
版权

效果图  （无素材贴图）

e3c7a19887f64363a6c102690df616ed.jpg

 源代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>小鸟游戏</title>

    <style>

        body {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

            background-color: #f0f0f0;

        }

        #gameCanvas {

            border: 1px solid #000;

        }

        #controlButton {

            position: absolute;

            bottom: 20px;

            padding: 10px 20px;

            font-size: 16px;

            color: #fff;

            background-color: #ff4d4d;

            border: none;

            border-radius: 20px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            cursor: pointer;

        }

    </style>

</head>

<body>

    <canvas id="gameCanvas" width="400" height="600"></canvas>

    <button id="controlButton">点击飞起</button>

 

    <script>

        const canvas = document.getElementById('gameCanvas');

        const ctx = canvas.getContext('2d');

        const button = document.getElementById('controlButton');

 

        let bird = {

            x: 50,

            y: canvas.height / 2,

            radius: 15,

            gravity: 0.1,

            lift: -15,

            velocity: -1

        };

 

        let pipes = [];

        let score = 0;

        let frame = 0;

        let gameOver = false;

 

        function drawBird() {

            ctx.beginPath();

            ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);

            ctx.fillStyle = 'red';

            ctx.fill();

            ctx.closePath();

        }

 

        function drawPipe(pipe) {

            ctx.fillStyle = 'green';

            ctx.fillRect(pipe.x, 0, pipe.width, pipe.top);

            ctx.fillRect(pipe.x, canvas.height - pipe.bottom, pipe.width, pipe.bottom);

        }

 

        function updateBird() {

            bird.velocity += bird.gravity;

            bird.y += bird.velocity;

 

            if (bird.y + bird.radius > canvas.height) {

                bird.y = canvas.height - bird.radius;

                bird.velocity = 0;

            }

 

            if (bird.y - bird.radius < 0) {

                bird.y = bird.radius;

                bird.velocity = 0;

            }

        }

 

        function updatePipes() {

            frame++;

            if (frame % 100 === 0) {

                let gap = 150;

                let top = Math.random() * (canvas.height - gap);

                let bottom = canvas.height - top - gap;

                pipes.push({ x: canvas.width, width: 50, top: top, bottom: bottom });

            }

 

            for (let i = pipes.length - 1; i >= 0; i--) {

                pipes[i].x -= 2;

 

                if (pipes[i].x + pipes[i].width < 0) {

                    pipes.splice(i, 1);

                    score++;

                }

 

                if (bird.x + bird.radius > pipes[i].x && bird.x - bird.radius < pipes[i].x + pipes[i].width) {

                    if (bird.y - bird.radius < pipes[i].top || bird.y + bird.radius > canvas.height - pipes[i].bottom) {

                        gameOver = true;

                    }

                }

            }

        }

 

        function resetGame() {

            bird.y = canvas.height / 2;

            bird.velocity = 0;

            pipes = [];

            score = 0;

            frame = 0;

            gameOver = false;

        }

 

        function drawScore() {

            ctx.font = '20px Arial';

            ctx.fillStyle = 'black';

            ctx.fillText('Score: ' + score, 10, 30);

        }

 

        function gameLoop() {

            if (!gameOver) {

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                drawBird();

                pipes.forEach(drawPipe);

                drawScore();

                updateBird();

                updatePipes();

                requestAnimationFrame(gameLoop);

            } else {

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.font = '30px Arial';

                ctx.fillStyle = 'black';

                ctx.fillText('Game Over', canvas.width / 2 - 70, canvas.height / 2 - 30);

                ctx.fillText('Final Score: ' + score, canvas.width / 2 - 90, canvas.height / 2 + 30);

            }

        }

 

        button.addEventListener('click', () => {

            if (!gameOver) {

                bird.velocity += bird.lift;

                bird.lift *= 1; // 每次弹起距离降低一点

            }

        });

 

        gameLoop();

    </script>

</body>

</html>

 

睿智的海鸥
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
JavaScript操作canvas制作前端H5小游戏——Flappy Bird
kang921022的博客
02-08 1万+
游戏查看源码和素材下载博主学习前端一年多一点，还是个新手，不过勇于尝试，才能不断进步，如果代码质量不好，欢迎提意见，下面开始讲解，首先贴张游戏界面图：游戏使用canvas画图制作，分析游戏确定有这几个元素： 天空背景不动 小鸟上下移动，左右不动 地板和水管向左移动（造成小鸟向前移动的错觉） canvas画图是覆盖画图，所以画图顺序很重要，它的api我就不多说了，只有用到以下内容：<!-- html代
初学JS，使用JavaScript和HTML5画布编写游戏Flappy Bird简易版
weixin_39369911的博客
03-07 1514
用js和H5&lt;canvas&gt;标签编写经典游戏：Flappy Bird 简易版声明：本人初学JS和H5，本文涉及编写方式以及算法如有更好地改进，请各位大佬提出建议~一.能力要求：JavaScript相关知识，HTML5&lt;canvas&gt;，json，面向对象思想等。二.需要完成以下工作：1.设计游戏（包括小鸟、柱子等，我们必须遵循一条清晰的逻辑：鸟是在做竖直上抛和自由落体运动，柱...
原生js html5 canvas制作flappy bird压扁小鸟游戏
二当家的
03-14 347
游戏运用了Canvas的drawImage，translate，rotate，save，restore，fillRect等API。enter方法由业务来调用，比如用户点击了按钮，此时就进入场景2，鸟撞到了管子，就进入场景3。分数的计算与碰撞检测类似，设置一个开关，当管子重新出现时，设置为true。当分值加1时，设置为false。小鸟的最左边的x坐标如果超出了管子的x+width，就认为成功通过。因此小鸟的图片其实是一个长方形，而且角度又不断变化导致中心点难于掌握，因此很难判断小鸟与管子的碰撞。
原生JS实现——flappy bird 像素小鸟 项目总结
chenyu-max
10-09 1721
项目展示 项目准备 images中所用到的图片 index.html 用一个 div 来 包裹游戏内容区域 <div id="game"> <!-- 小鸟div --> <div class="bird"></div> <!-- 开始游戏按钮 --> <div class="start start-white">开始游戏</div> <!-- 最上层分数 --> <di
html5 FlappyBird手机游戏源码下载
11-03
例如，Flappy Bird中的碰撞检测、得分计算、游戏重置等功能都是由JavaScript代码实现的。同时，游戏的物理模拟，如小鸟的飞行高度和速度，也需要JavaScript来精确控制。 CSS3（层叠样式表第三版）在Flappy Bird中...
Flappybird经典小游戏小鸟得游戏源码js版本
11-19
《Flappybird经典小游戏小鸟得游戏源码js版本》 Flappybird是一款在全球范围内广受欢迎的像素风格休闲游戏，以其简单却又极具挑战性的玩法吸引了无数玩家。本篇将深入探讨这款小游戏的JavaScript版本源码，解析其...
canvas-flappybird
01-15
在canvas-flappybird项目中，开发者通过JavaScript实现了这一游戏逻辑，使得游戏可以在网页上运行。 首先，canvas是一个二维绘图上下文，允许开发者使用JavaScript命令进行像素级别的操作。在这个项目中，开发者...
html文本文字中保留空格和换行
qq_41985405的博客
08-26 305
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
html快速入门
m0_52049533的博客
08-22 727
/
你没有使用过（但应该使用）的前 5 个 HTML 功能
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
08-26 556
TML 已经有了很大的发展，这些特性展示了它已经变得多么强大和灵活。通过将这些鲜为人知的元素合并到你的项目中，你可以创建响应速度更快、动态更动态且用户友好的网页，同时减少对外部库和框架的依赖。因此，请尝试这些 HTML 功能 — 你可能会惊讶于它们可以在多大程度上增强你的开发过程。
使用HTML实现贪吃蛇游戏
Do my best!
08-26 321
上述代码实现了一个基本的贪吃蛇游戏，包括蛇的移动、食物的生成、碰撞检测和游戏循环。你可以通过方向键来控制蛇的移动。游戏会在蛇撞到墙壁或自身时结束，并提示“游戏结束”。
[vue] jszip html-docx-js file-saver 图片，纯文本 ，打包压缩，下载跨域问题
qq_14993591的博客
08-27 367
创建文件：支持导出纯文本。
Java学习Day33：HTML 第四章：大战虎先锋（js）
weixin_51721783的博客
08-24 979
JS语句;
传统前端入门 HTML
2301_78270736的博客
08-24 761
HTML（HyperText Markup Language）是一种标记语言，用于创建和结构化网页及其内容。它是构建网页的基础标准语言。
HTML实现俄罗斯方块
m0_65134936的博客
08-21 957
这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。这段代码使用HTML、CSS和JavaScript实现了一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。本篇文章有用到ChatGPT-4o代码纠错，国内可稳定使用，感兴趣的大佬试试。
WHAT - Typescript 中 Window | Document | HTMLElement | EventTarget
最新发布
weixin_58540586的博客
08-27 836
In the context of web development, , , , and are important interfaces provided by the browser’s DOM (Document Object Model) and event handling systems. Each of these interfaces serves a distinct purpose and has its own role in interacting with web pages.H
HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)
2301_78945238的博客
08-26 521
HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)
【HTML】模拟二级菜单【附源代码】
Young_Pro的博客
08-25 931
通过 Html 搭配 CSS 模拟二级菜单的实现
css+js+h5 实现环形进度条的完整代码
05-22
HTML部分： ```html <div class="progress-ring"> <div class="progress-bar"></div> <div class="progress-value">0%</div> </div> ``` CSS部分： ```css .progress-ring { position: relative; width: 200px; height: 200px; } .progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); } .progress-bar:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #1abc9c; transform: rotate(-90deg); transform-origin: center; } .progress-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: bold; color: #1abc9c; } ``` JavaScript部分： ```javascript const progressBar = document.querySelector(".progress-bar"); const progressValue = document.querySelector(".progress-value"); let progress = 0; const interval = setInterval(() => { progress += 1; progressBar.style.backgroundImage = "linear-gradient(" + (90 + (progress / 100) * 360) + "deg, transparent 50%, #1abc9c 50%), linear-gradient(90deg, #1abc9c 50%, transparent 50%)"; progressValue.textContent = progress + "%"; if (progress >= 100) { clearInterval(interval); } }, 50); ``` 这段 JavaScript 代码会使进度条的进度从 0% 逐渐增加到 100%。具体实现方式是通过设置 `progressBar` 元素的背景图片，利用 `linear-gradient` 渐变来实现环形进度条的效果。同时，也会动态更新进度值，将其显示在 `progressValue` 元素中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

睿智的海鸥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值