零、资源
一、前端web
1.1 网页的组成
1.html 通过标签的方式描述一定的页面内容
2.css 层叠样式表：美化标签，让页面看起来特别好看
3.JS 将页面活起来，添加交互事件
1.2 游戏分析
1.图片显示（背景图片、飞机图片）
2.键盘事件：点击键盘获取上下左右
3.移动图片
4.永远滚动不会结束的背景
二、图片的显示（html初识）
2.1 标签
在html中， 通过标签的方式描述一定的页面内容。
一些标签具有特殊的涵义。
2.1.1 什么是标签
<p id="p1">这个是是P，代表的是段落标签</p>
1. 它分为开始标签<p>
2.结束标签</p>
3.标签正文
4.标签的属性id='p1'
2.2 快速生成html模板
！+ tab键
<title>图片的展示</title>
代表的是标题
2.3 img标签
<img src="bg2.png">展示图片
三、键盘事件的获取(JS)
3.1 JS是什么？
JavaScript是JS的全程，他跟java的语法很像，但是不是java语言。
JS主要做的事情就是处理各种动态事件
3.2 alert弹出框
<script>
alert('123');
</script>
3.3 事件（方法function）
事件其实在我们专门的角度叫法叫方法，代表我们要做的事情。
3.3.1 简单的方法
m1代表的是给这个事情起个名字
function m1(){
alert('123');
}
3.3.2 键盘点击绑定事件
<body onkeydown="m1()" >
在body标签中写上，onkeydown键盘按下触发事件m1
3.3.3 获取键盘点击的key
<body onkeydown="planMove(event)" >
<script>
function planMove(event){
alert(event.key);
}
</script>
</body>
event.key代表的是按下的是哪个键
四、飞机的移动
4.1 指定飞机的位置
4.1.1 id属性
<img id="plan" src="plan3.png" width="100">
给飞机图片起个名字，方便找到他
4.1.2 css指定飞机的位置
<style>
#plan{
position: relative;//相对定位
left: 100px;//左边的距离
top: 100px;//右边的距离
}
</style>
4.1.3 JS指定飞机的位置
<body onkeydown="planMove(event)">
<img id="plan" src="plan3.png" width="100">
<script>
function planMove(event){
plan.style.left = "100px";
plan.style.top = "100px";
}
</script>
</body>
4.1.4 根据按键飞机移动
<body onkeydown="planMove(event)">
<img id="plan" src="plan3.png" width="100">
<script>
var x = 0;
var y = 0;
function planMove(event){
if(event.key == 'ArrowDown'){
y = y + 10;
}
if(event.key == 'ArrowUp'){
y = y - 10;
}
if(event.key == 'ArrowRight'){
x = x + 10;
}
if(event.key == 'ArrowLeft'){
x = x - 10;
}
plan.style.left = x+"px";
plan.style.top = y+"px";
}
</script>
</body>
五、背景的移动
5.1 定时器
不断的调用固定的事件
<script>
function bgMove(){
alert('123')
}
//每过3秒，执行bgMove方法
setInterval(bgMove ,3000);
</script>
5.2 图片不断移动
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bg1{
position: relative;
}
</style>
</head>
<body>
<img id="bg1" src="bg2.png">
<script>
var bgY = 0;
function bgMove(){
bgY -= 10;
bg1.style.top =bgY+"px";
}
setInterval(bgMove ,100);
</script>
</body>
5.3 无限滚动
我们放2张图片，第2张在第1张的下面，当滚动到第2张的时候瞬间移动到第1张，
人眼根本反应不过来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bg1{
position: relative;
font-size: 0px;
}
</style>
</head>
<body>
<!-- 相当于袋子，把俩张图片都放进行 -->
<!-- 移动袋子就可以了 -->
<div id="bg1">
<img src="bg2.png">
<!-- br作用是让背景图片换行 -->
<br>
<img src="bg2.png">
</div>
<script>
var bgY = 0;
function bgMove(){
bgY -= 10;
//移动一张图片后
if(bgY == -2660){
//回到初始位置
bgY = 0;
}
bg1.style.top =bgY+"px";
}
setInterval(bgMove ,50);
</script>
</body>
</html>
5.3 设置背景的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bg1{
position: relative;
font-size: 0px;
}
#bg2{
/* 设置最外层的袋子宽高 */
width: 400px;
height: 600px;
/* 超出部分隐藏 */
overflow: hidden;
}
</style>
</head>
<body>
<!-- 再来个袋子，限制里面的宽度 -->
<div id="bg2">
<!-- 相当于袋子，把俩张图片都放进行 -->
<!-- 移动袋子就可以了 -->
<div id="bg1">
<img src="bg2.png">
<!-- br作用是让背景图片换行 -->
<br>
<img src="bg2.png">
</div>
</div>
<script>
var bgY = 0;
function bgMove(){
bgY -= 10;
//移动一张图片后
if(bgY == -2660){
//回到初始位置
bgY = 0;
}
bg1.style.top =bgY+"px";
}
setInterval(bgMove ,50);
</script>
</body>
</html>
六、飞机移动代码合并(完结)
将俩个代码合并为同一个页面上，然后添加限制的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bg1{
position: relative;
font-size: 0px;
}
#bg2{
/* 设置最外层的袋子宽高 */
width: 400px;
height: 600px;
/* 超出部分隐藏 */
overflow: hidden;
}
#plan{
position: absolute;
left: 130px;
top: 520px;
}
</style>
</head>
<body onkeydown="planMove(event)">
<!-- 再来个袋子，限制里面的宽度 -->
<div id="bg2">
<!-- 相当于袋子，把俩张图片都放进行 -->
<!-- 移动袋子就可以了 -->
<div id="bg1">
<img src="bg2.png">
<!-- br作用是让背景图片换行 -->
<br>
<img src="bg2.png">
</div>
</div>
<img id="plan" src="plan3.png" width="100">
<script>
var bgY = 0;
function bgMove(){
bgY -= 10;
//移动一张图片后
if(bgY == -2660){
//回到初始位置
bgY = 0;
}
bg1.style.top =bgY+"px";
}
setInterval(bgMove ,50);
var x = 130;
var y = 520;
function planMove(event){
if(event.key == 'ArrowDown'){
y = y + 10;
}
if(event.key == 'ArrowUp'){
y = y - 10;
}
if(event.key == 'ArrowRight'){
x = x + 10;
}
if(event.key == 'ArrowLeft'){
x = x - 10;
}
if(x < 5){
x = 5;
}
if(x > 300){
x = 300;
}
if(y < 5){
y = 5;
}
plan.style.left = x+"px";
plan.style.top = y+"px";
}
</script>
</body>
</html>
七、作业
限制飞机不能向下移动超出
