第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-2 开始游戏

最新推荐文章于 2024-07-15 19:48:15 发布

老张谋

最新推荐文章于 2024-07-15 19:48:15 发布

阅读量199

点赞数 1

分类专栏：前端技术文章标签： JavaScript 全民飞机大战

本文链接：https://blog.csdn.net/wgf5845201314/article/details/90600322

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

JavaScript 游戏开发

本节课所讲内容：

JavaScript 游戏开发

主讲教师：Head老师

一. JavaScript 游戏开发

本节课我们串联之前所学内容，使用HTML+JavaScript开发一款游戏（全民飞机大战）

游戏截图：

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全民飞机大战-1</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
    <div id="bg">
        <div class="logoBg">
            <div id="logo">

            </div>
        </div>
        <div name="buttonStart" id="buttonStart">

        </div>
    </div>

    <script>
        
        //开始游戏的页面切换效果
        var opacity = 1.0;
        var bg = document.getElementById("bg");

        // 推荐使用   点击开始游戏的效果
        var buttonStart = document.getElementById("buttonStart");    
        buttonStart.onclick = function(obj){   
                  var handler=setInterval(fadeout,20);
                  obj.style.width="200px";
                   
                }   
        //页面跳转     
        function fadeout(){
                    opacity-=0.2;
                    if(opacity>=0){
                        bg.style.opacity=opacity;
                    }else{
                        document.location="game.html";
                        clearInterval(handler);
                    }
                }                            
    </script>
</body>
</html>