写代码时发现;JavaScript没有获取id,但却依然能够使用这个id节点进行操作,并且也能正常打印。
<!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>飞机大战</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#outer {
margin: 0 auto;
width: 440px;
height: 660px;
background-image: url(./images/start.png);
background-size: cover;
position: relative;
overflow: hidden;
}
#game {
position: absolute;
top: -660px;
left: 0;
width: 440px;
height: 660px;
/* 在默认状态隐藏 */
display: none;
}
#wx {
width: 180px;
height: 55px;
/* background-color: brown; */
position: absolute;
left: 28px;
bottom: 70px;
cursor: pointer;
border: 1px solid red;
}
#qq {
width: 180px;
height: 55px;
/* background-color: rgb(36, 111, 209); */
position: absolute;
left: 234px;
bottom: 70px;
cursor: pointer;
}
.tx {
position: absolute;
top: 20px;
left: 20px;
user-select: none;
display: none;
}
#fs,
#xl {
position: absolute;
left: 20px;
color: white;
font-size: 18px;
user-select: none;
display: none;
}
#fs {
top: 100px;
}
#xl {
top: 130px;
}
.pause {
font-size: 60px;
display: inline-block;
height: 50px;
line-height: 50px;
color: white;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
user-select: none;
display: none;
}
#zgc {
background-color: rgba(0, 0, 0, 0.5);
width: 440px;
height: 660px;
position: absolute;
top: 0;
left: 0;
/* 默认隐藏 */
display: none;
}
#choose {
position: absolute;
top: 400px;
left: 119px;
color: white;
font-size: 18px;
user-select: none;
}
#choose>div {
height: 50px;
line-height: 50px;
text-align: center;
width: 200px;
border: tomato solid 1px;
cursor: pointer;
user-select: none;
}
.dis {
opacity: 1;
}
#game>img {
display: block;
}
#gameRule {
width: 440px;
height: 660px;
}
#gameRule>img {
position: absolute;
}
</style>
</head>
<body>
<div id="outer">
<!-- 登录界面 -->
<div>
<div id="wx"></div>
<div id="qq"></div>
</div>
<!-- 游戏界面 -->
<!-- 背景图 -->
<div id="game"><img src="./images/bg1.png" alt="">
<img src="./images/bg1.png" alt="">
</div>
<!-- 游戏角色,所有的图片节点,都添加到gameRule中 -->
<div id="gameRule">
<!-- <img src="./images/GreenPlane.png" alt=""> -->
</div>
<!-- 个人信息部分 -->
<div class="tx"><img src="./images/tou.png" alt=""></div>
<div id="fs"> <span>分数:</span><span>0</span></div>
<div id="xl"><span>血量:</span><span>10</span></div>
<!-- 暂停游戏 -->
<div class="pause">
=
</div>
<!-- 继续游戏,新游戏,退出游戏 -->
<div id="zgc">
<div id="choose">
<div>继续游戏</div>
<div>新游戏</div>
<div>退出游戏</div>
</div>
</div>
<div class="a">
</div>
</div>
<!-- <script src="./js/zjx.js"></script> -->
<script src="./js/zjxrulers.js"></script>
<!-- <script>
// let b = new PlayerPlane('images/PaperPlane.png', 100, 100, 10, 170, 500, 5, gameRule)
console.log(gameRule);
</script> -->
</body>
</html>
//此文件主要存放每个角色的构造函数
console.log(gameRule);
let a = new Plane('images/LiPlane.png', 100, 100, 10, 170, 610, 5, gameRule)
function Plane(src, width, height, hp, x, y, speed, parentNode) {
//在实例化时,把形参的值赋值给this指向的对象
this.src = src
this.imgNode = document.createElement('img')
this.width = width
this.height = height
this.hp = hp
this.x = x
this.y = y
this.speed = speed
this.time = 5
this.isDie = false//false表示飞机正常
this.parentNode = parentNode
//一些其他的方法
//飞的方法
this.move = function () {
console.log('飞起来');
}
//创建飞机方法
this.creat = function () {
this.imgNode.src = this.src
this.parentNode.appendChild(this.imgNode)
this.imgNode.style.left = this.x + 'px'
this.imgNode.style.top = this.y + 'px'
}
//自动创建
this.creat()
}
//创建一个玩家飞机的模型
function PlayerPlane(src, width, height, hp, x, y, speed, parentNode) {
Plane.call(this,src, width, height, hp, x, y, speed, parentNode)
}
在网上搜索资料得知,如果dom中的id名称没有与js的变量和属性重名的话,会将id自动设置为window对象的属性,这样就能直接调用他。
如果dom元素的id名称不和js内置属性或全局变量重名的话,该名称自动成为window对象的属性。
不过严谨一点最好还是获取id再使用好。