第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-4 页面开发--游戏主图移动（背景图，飞机）

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

JavaScript 游戏开发

本节课所讲内容：

JavaScript 游戏开发

主讲教师：Head老师

一. JavaScript 游戏开发

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

游戏截图：

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 0 -77px;
            overflow: hidden;
        }
        #player{
            position: absolute;
            top: 372px;
            left: 158px;
        }
    </style>
</head>
<body>
    <!-- 背景主图 -->
    <div id="game">
        <!-- 玩家的飞机 -->
        <img src="./img/16.png" alt="" id="player">
    </div>

    <script>
    // 背景地图移动
       var game = document.getElementById("game");
       var bg_m = -77;
    //通过setInterval 设置地图循环  if 判断地图的位置
       setInterval(function(){
            bg_m+=2;
            if(bg_m>=187){
                bg_m=-77;
            }
            game.style.backgroundPosition="0px"+" "+bg_m+"px";
       },50)

    //    飞机的移动
    //    键盘事件 w a s d 上下左右
    //    飞机向上走    w/向上的箭头  飞机距离屏幕顶部的位置
    //    relative   改变top 的相对位置
       var player = document.getElementById("player");
       //为当前网页添加键盘事件
       window.document.onkeydown = function(ent){
           //兼容火狐和IE
           var event = ent || window.event;
           //获取键盘
           //  alert(event.keyCode);
           //  w 87   上 38
           switch(event.keyCode){
               case 87:
               case 37:
               // offsetTop 获取飞机到屏幕顶部的距离
               // 飞机不能超出屏幕的顶部  top值不能小于0
               player.style.top = Math.max(0,(player.offsetTop-10))+"px";
           }
       }


       
    </script>
</body>
</html>