蓝旭第四周预习

一、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;
    }
}