大鱼吃小鱼游戏-index.html -来源慕课网

最新推荐文章于 2021-06-10 12:00:54 发布

湖上的桃花鱼

最新推荐文章于 2021-06-10 12:00:54 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5+js 文章标签： H5

本文链接：https://blog.youkuaiyun.com/zendan/article/details/49814329

H5+js 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了tinyHeart游戏开发过程中的HTML、CSS、JavaScript等核心技术应用，通过多个js文件的引入，展示了如何构建游戏场景、实现动画效果及碰撞检测等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
    <meta charset = "utf-8">
    <title>tinyHeart</title>
    <style type="text/css">
    body {
        padding-top: 10px;
    }

    .all_bg{
        width: 800px;
        height: 600px;
        margin: 0px auto;
    }
    #allcanvas{
        position: relative;
        width: 800px;
        height: 600px;
        margin: 0px;        
    }
    #canvas1{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
    #canvas2{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }

    </style>
</head>

<body>
    <div class = "all_bg">
        <div id= "allcanvas">
            <canvas id ="canvas1" width = "800" height = "600"></canvas>
            <canvas id ="canvas2" width = "800" height = "600"></canvas>
        </div>
    </div>  
    <!-- 引入js文件 -->
    <script type= "text/javascript" src= "js/main.js"></script>
    <script type= "text/javascript" src= "js/commonFunctions.js"></script>
    <script type= "text/javascript" src= "js/background.js"></script>
    <script type= "text/javascript" src= "js/ane.js"></script>
    <script type= "text/javascript" src= "js/fruit.js"></script>
    <script type= "text/javascript" src= "js/mom.js"></script>
    <script type= "text/javascript" src= "js/collision.js"></script>
    <script type= "text/javascript" src= "js/baby.js"></script>
    <script type= "text/javascript" src= "js/data.js"></script>
    <script type= "text/javascript" src= "js/wave.js"></script>
</body
</html>