18--JavaScript 游戏开发 --页面开发

JavaScript游戏开发本节课所讲内容:JavaScript游戏开发主讲教师:Head老师一.JavaScript游戏开发本节课我们串联之前所学内容,使用HTML JavaScript开发一款游戏(全民飞机大战)游戏截图:全民飞机大战-开始游戏页面布局index.html文件<!DOCTYPEhtml><htmllang="en"><head><met...

18--JavaScript 游戏开发 --页面开发

JavaScript 游戏开发

本节课所讲内容:

  • JavaScript 游戏开发
  • 主讲教师:Head老师

    一. JavaScript 游戏开发

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

    游戏截图:

    全民飞机大战-开始游戏

    页面布局� index.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 buttonStart = document.getElementById("buttonStart");  buttonStart.onclick = function gameStart(){alert(1);  } </script></body></html>

    css文件

    *{ padding: 0; margin: 0;}#bg{ width: 394px; height: 706px; background: url(../img/6.png);}.logoBg{ width: 394px; height: 340px; /* border: 1px solid red; */ padding-top: 50px;}#logo{ width: 360px; height: 200px; background: url(../img/7.png) no-repeat; background-size: 100%; /* 图片居中 */ margin: 0 auto;  }#buttonStart{ width: 200px; height: 111px; background: url(../img/5.png) no-repeat; background-size: 100%; margin: 0 auto;}#buttonStart:hover{ margin: auto; padding-top: 20px; width: 230px; height: 111px; background: url(../img/5.png) no-repeat; background-size: 100%; cursor: pointer;}

    效果:

    源文地址:https://www.guoxiongfei.cn/csdn/4621.html