一、JavaScript对象
对象
对象就是具体的可描述的事物,我们可以用某种特定的方式去操作它。相当于java中的类。
对象是一系列属性和方法的总和。
属性包含属性名和属性值,eg,name:'张三'。属性可以是任意类型,如字符串,甚至可以是数组、对象。
除了字符串、数字、true、false、null和undifined之外,JavaScript中的值都是对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象</title>
</head>
<body>
</body>
<script>
var person;
person={
name:'tom',
age:20,
sex:'male',
university:'东师'/*最后一个属性不需要加逗号*/
}
console.log(person);
</script>
</html>
js还可以直接增加属性/修改属性值。
但要注意的是,在大括号内部定义属性是用冒号,在外部(也就是新建的属性我们用等于号),代码如下:
<script>
var person;
person={
name:'tom',
age:20,
sex:'male',
university:'东师'/*最后一个属性不需要加逗号*/
}
console.log(person);
/*可以直接增加属性/修改属性值*/
person.address='长春';
</script>
我们也可以用类似java中的new来定义一个对象,代码如下:
<script>
var abc=new Object();
abc.name='mq';
abc.age='18';
console.log(abc);
</script>
以下是用构造函数写的代码:
<script>
//构造函数
function Person(){
this.name='tom';
this.age=19;
this.sex='male';
this.university='东师';
//仔细注意这里的代码与前边代码的不同之处
//这里边是赋值语句,所以用等号
//由于是一个语句,所以结尾需要用分号
}
//接下来可以用构造好的函数来生成变量
var person1=new Person();
var person2=new Person();
console.log(person1);
console.log(person2);
</script>
如果是想输出属性,还可以这样:
<script>
function Person(){
this.name='tom';
this.age=19;
this.sex='male';
this.university='东师';
}
//接下来可以用构造好的函数来生成变量
var person1=new Person();
console.log(person1.age);//---------1
console.log(person1["name"]);//-----2
</script>
for in语句对对象的循环操作
<script>
function Person(){
this.name='tom';
this.age=19;
this.sex='male';
this.university='东师';
}
var person1=new Person();
var person2=new Person();
//for in遍历
//a遍历所有属性值
for(var a in person1){
console.log(a);
console.log(a+":"+person1[a]);
}
</script>
<script>
function Person(){
this.name='tom';
this.age=19;
this.sex='male';
this.university='东师';
}
var person1=new Person();
var person2=new Person();
var array=['a','b','c'];
function func(){
console.log('this is a function');
}
person1.arr=array;
person1.fun=func;
console.log(person1.arr);
</script>
此外,属性值还可以是一个对象
<script>
function Person(){
this.name='tom';
this.age=19;
this.sex='male';
this.university='东师';
}
//属性值还可以是一个对象
var son=new Person();
son.name='jim';
son.age=18;
person1.son1=son;
console.log(person1.son1);
</script>
传值
对象在传值时传递的是一个地址。
<script>
function Person(){
this.name='tom';
this.age=19;
this.sex='male';
this.university='东师';
}
var person1=new Person();
console.log(person1.name);//输出tom
var person2=person1;//传值
person2.name='猪八戒';
console.log(person2.name);//输出猪八戒
console.log(person1.name);//也输出猪八戒,因为前边person1把引用给了person2,person2改变person1也改变
</script>
二、JS小游戏制作演示
在网上找了个教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="game">
<!--游戏界面-->
<div id="mario"></div><!--表示马里奥-->
<div id="block"></div><!--用来表示障碍物-->
</div>
</body>
</html>
import './style.css';
const mario=document.querySelector("#mario")
const block=document.querySelector("#block")
window.addEventListener('keydown',event=>{
console.log(event);
if(event.code=='Space'){
console.log('键盘空格按下');
mario.classList.add('jumpClass');
setTimeout(()=>{
mario.classList.remove('jumpClass');
},300);
}
});
setInterval(()=>{
const marioBottom=parseFloat{
getComputedStyle(mario).getPropertyValue('bottom')
};
const blockLeft=parseFloat(
getComputedStyle(block).getPropertyValue('left')
);
if(blockLeft<20&&blockLeft>-20&&marioBottom<=20){
console.log('游戏结束');
}
},10);
body{
padding: 20px;
background-color: white;
}
#game{
width: 500px;
height: 200px;
border: 1px solid black;
position: relative;
}
#mario{
width: 20px;
height: 50px;
background-color: red;
position: absolute;
bottom: 0px;
}
.jumpClass{
animation: jump 0.3s infinite;
}
@keyframes jump{
0%{
bottom: 0px;
}
30%{
bottom: 100px;
}
70%{
bottom: 100px;
}
100%{
bottom: 0px;
}
}
#block{
width: 20px;
height: 20px;
background-color: blue;
position: absolute;
bottom: 0px;
left: 450px;
animation: block 1s linear infinite;
}
@keyframes block{
0%{
left: 450px;
}
100%{
left: -20px;
}
}