飞机大战--简单js游戏

最新推荐文章于 2024-05-05 21:20:57 发布

洛洛_0-0

最新推荐文章于 2024-05-05 21:20:57 发布

阅读量784

点赞数 4

文章标签：游戏 html javascript

本文链接：https://blog.csdn.net/m0_59791864/article/details/126837525

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .plane-area {
            width: 400px;
            height: 600px;
            position: relative;
            margin: 0 auto;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div id="planeArea" class="plane-area">

    </div>

    <script src="./js/Background.js"></script>
    <script src="./js/Bullet.js"></script>
    <script src="./js/Plane.js"></script>
    <script src="./js/Enemy.js"></script>
    <script src="./js/Game.js"></script>
    <script>
        // 我们现在通过面向对象书写飞机大战游戏 
        // 该游戏有许多角色组成 每一个角色应当划分成一个单独的class 
        // 飞机： Plane 
        // 敌机： Enemy
        // 背景： Background
        // 整个算是一个游戏   Game
        // Game的组成是由 Plane的实例 Enemy的实例 Background的实例组成的


        // var bg = new Background(400, 600, "./images/bg.png");
        // // 渲染
        // bg.render();
        // // 上树
        // bg.appear(document.body);
        // // 背景应该能移动
        // bg.move();




        // var plane = new Plane(100, 80, 150, 400, "./images/plane.png")
        // plane.render();
        // plane.appear(planeArea);



        // document.onkeydown = function (e) {
        //     switch (e.keyCode) {
        //         case 37:
        //             plane.moveLeft();
        //             break;
        //         case 38:
        //             plane.moveUp();
        //             break;
        //         case 39:
        //             plane.moveRight();
        //             break;
        //         case 40:
        //             plane.moveDown();
        //             break;
        //     }
        //     plane.update();
        // }





        // var b = new Bullet(30, 60, 50, 50, 40, true, './images/bullet.png')
        // b.render();
        // b.appear(planeArea);








        // var e = new Enemy(100, 80, 0, 0, './images/diji.png')

        // e.render();
        // e.appear(planeArea)

        // e.moveDown();



       

        // 初始化
        var g = new Game(Plane, Enemy, Bullet, Background, planeArea);
        // 调用方法 
        g.init();
        // 开始游戏
        g.start();


        // 获取游戏区域到页面的左边距离
        var left = planeArea.offsetLeft;
        // 鼠标移动事件
        document.onmousemove = function (e) {
            console.log(e.clientX - left)
            console.log(e.clientY)
            // 根据鼠标位置 设置飞机的位置
            g.plane.x = e.clientX - left - g.plane.width / 2; 
            g.plane.y = e.clientY - g.plane.height / 2;
            // 更新
            g.plane.update();
        }



    </script>
</body>

</html>