第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-3 游戏页面制作

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

javaScript 游戏开发

本节课所讲内容：

JavaScript 游戏开发

主讲教师：Head老师

一. JavaScript 游戏开发

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

游戏截图：

1.飞机的上下左右移动

2.对面敌机的产生

3.子弹的发射

4.击中敌机产生的爆炸效果

game.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>游戏开发-主游戏区域</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #game{
            width: 400px;
            height: 600px;
            position: relative;
            background: url("./img/10.png") no-repeat;
            overflow: hidden;
        }
        #player{
            position: absolute;
            top: 372px;
            left: 158px;
        }
    </style>
</head>
<body>
    <!-- 背景主图 -->
    <div id="game">
        <!-- 玩家的飞机 -->
        <img src="./img/16.png" alt="" id="player">
    </div>
</body>
</html>