js开发bird小鸟

最新推荐文章于 2024-09-11 15:33:18 发布

那谁呀撒

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量4.9k

点赞数 2

文章标签： javascript 游戏 js

本文链接：https://blog.csdn.net/jvhbi/article/details/107127041

版权

本文介绍了使用JavaScript实现的一款小鸟飞行游戏的开发过程。游戏中包括鸟、天空和柱子等元素，采用面向对象编程思想。鸟有飞行速度和坐标，天空背景会持续滚动，柱子会从屏幕右侧进入左侧并回收。当鸟与柱子位置重叠时，游戏结束。游戏的核心机制涉及DOM操作、定时器以及对象存储数据。文章还讨论了定时器的工作原理，包括setTimeout和setInterval的区别，以及如何避免可能出现的问题。下篇将深入探讨JavaScript的运行原理和机制。

摘要由CSDN通过智能技术生成

15分钟上手前端小游戏开发

演示效果

在这里插入图片描述

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            background-color: #00ff94;
        }
        
        .sky {
            width: 100%;
            height: 100%;
            border: 1px solid black;
            position: relative;
            background-image: url(./哦哦哦哦哦.png);
        }
        
        .bird {
            position: absolute;
            left: 20px;
            top: 35%;
            width: 30px;
            height: 30px;
            background-color: #f40;
        }
        
        .up,
        .down {
            background-color: yellowgreen;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="sky">
        <div class="bird"></div>
    </div>
    <script>
        var g = 1;
        var arr = [];

最低0.47元/天解锁文章

那谁呀撒

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js开发bird小鸟

js可以写小游戏，今天开发一个bird，这个比较容易，比较友好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body, html { margin: 0; padding: 0;
复制链接

扫一扫