h5小游戏的index.html解析

最新推荐文章于 2024-04-02 18:46:41 发布

这一生只吹边疆的风

最新推荐文章于 2024-04-02 18:46:41 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/HzjCsdn/article/details/108461128

版权

每一个h5小游戏都有一个启动文件html
index.html

<html>

<head>
    <title>www.caoyaohero.com</title>
    <meta charset='utf-8' />
    <meta name='renderer' content='webkit' />
    <meta name='viewport'
        content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />
    <meta name='apple-mobile-web-app-capable' content='yes' />
    <meta name='full-screen' content='true' />
    <meta name='x5-fullscreen' content='true' />
    <meta name='360-fullscreen' content='true' />
    <meta name='laya' screenorientation='landscape' />
    <meta http-equiv='expires' content='0' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta http-equiv='expires' content='0' />
    <meta http-equiv='Cache-Control' content='no-siteapp' />

    <!-- <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" /> -->
</head>

<body>
    <canvas id="myCanvas" width="720" height="1080" style="border: 1px solid red"></canvas>

    <!-- <div id="uiContainer">
        <div id="ui">
          <div id="fRotation"></div>
        </div>
    </div> -->

    <script type="text/javascript">
        //获取到画布
        var canvas = document.getElementById('myCanvas');
        //将画布挂在到全局表上
        window.canvas = canvas;
        window.document = document;
        window.requestAnimFrame = (function () {
            return (
                window.requestAnimationFrame ||
                function (callback, element) {
                    setTimeout(callback, 1000 / 60);
                }
            )
        })
        function loadLib(url) {
            var script = document.createElement("script");
            script.async = false;
            script.src = url;
            document.body.appendChild(script);
        }
    </script>
    <script type="text/javascript" src="index.js"></script>
</body>

</html>

结构

<html>
     <head>
          //头部内容
     </head>
     <body>
          //身体内容
     </body>
</html>

页签tag的标题

<title>www.caoyaohero.com</title>

canvas
定义画布的名字，画布的宽高
通过名字获取到画布
通过画布拿到画笔

<canvas id="myCanvas" width="720" height="1080" style="border: 1px solid red"></canvas>

脚本执行
在html中以下面的格式定义一个元素，html启动的时候，就会被执行，而且如果是多个的话，会顺序被执行

<script type="text/javascript">
    ........
</script>

<script type="text/javascript">
    ........
</script>

<script type="text/javascript">
    ........
</script>

我在上面的例子中使用了两个脚本
第一个脚本是设置一些全局变量和函数，并且将他们挂在到全局表window上，在js的世界里要么是局部变量，要么是全局变量
全局变量则通过window就可以访问到
第二个脚本是index.js，这个文件是重点，我们可以把所有的游戏代码的引入写在这个文件里
index.js

window.screenOrientation = "sensor_landscape";
loadLib("./libs/three.js")
loadLib("./libs/WebGLDebugUtils.js")
loadLib("./libs/glMatrix.js")

loadLib("./libs/webgl-lessons-ui.js")

loadLib("./libs/m4.js");
loadLib("./libs/webgl-utils.js");
loadLib("./libs/primitives.js");
loadLib("./js/bundle.js")

这一生只吹边疆的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
h5小游戏的index.html解析

每一个h5小游戏都有一个启动文件htmlindex.html<html><head> <title>www.caoyaohero.com</title> <meta charset='utf-8' /> <meta name='renderer' content='webkit' /> <meta name='viewport' content='width=device-w
复制链接

扫一扫