JS对象及JS小游戏制作演示（第四周预习案）

最新推荐文章于 2024-08-12 03:46:42 发布

wyhshd

最新推荐文章于 2024-08-12 03:46:42 发布

阅读量983

点赞数 20

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wyhshd/article/details/137680263

版权

本文详细介绍了JavaScript中的对象概念，包括对象的定义、属性与值的存储、对象方法的使用以及this关键字的作用。同时，通过实例展示了如何在实际项目中创建对象和调用对象方法，以及一个简单的猜数游戏示例。

摘要由CSDN通过智能技术生成

1.JS对象

1.什么是对象

JavaScript中，对象是一种拥有属性和方法的数据集合，它是以“key: value”对的形式出现的相关数据的无序集合。对象可以用来存储和组织数据，例如将属性名称和属性值配对存储在一个对象中，以便更方便地访问和处理这些数据。同时，对象也可以作为命名空间来组织和管理代码，将相关的函数和变量存储在一个对象中，以便将其作为一个整体进行处理。此外，对象还可以用作构造函数来创建新的对象实例。

2.对象属性

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

从这一行代码中我们可以看到person就是对象，简单来说这个变量要是存储的非基础类型（number,boolean,null这一类的），引用其他的像数组，函数等等就是属于对象。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 变量</h2>

<p id="demo"></p>

<script>
// 创建并显示变量：
var car = "porsche";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

虽然这个变量car被赋予了值，但是它并不是对象，因为他被赋予的是基础数据类型。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象</h1>

<p id="demo"></p>

<script>
// 创建对象：
var car = {type:"porsche", model:"911", color:"white"};

// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
</script>

</body>
</html>

这个里面的car变量就是一个对象，并且在这个对象里面，我们可以观察一下，就是说type在这里面他就是属于car变量的属性，而后面跟的Porsche就是他的属性值，也就是说明我们通过对后面的属性进行增添，同时将属性值进行改变就会达到自己想要的页面结果。

然后我们说一下访问对象属性的办法，

<p>您可以使用 person.property 或 person["property"]。</p>

<p id="demo"></p>

<script>

// 创建对象：

var person = {

    firstName: "Bill",

    lastName : "Gates",

    id       :  12345

};

// 显示对象中的数据：

document.getElementById("demo").innerHTML =

person["firstName"] + " " + person["lastName"];

</script>

c从这段代码里面我们可以看到 person.firstName就是具体的对象属性值赋给变量，我们就能输出。

3.对象方法

对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

简单来举一个例子

<!DOCTYPE html>  
<html>  
<body>  
  
<h2>JavaScript 对象方法</h2>  
  
<button onclick="displayMessage()">点击我</button>  
  
<p id="demo"></p>  
  
<script>  
// 创建一个对象  
var car = {  
    make: "Porsche",  
    model: "911",  
    year: 1990,  
      
    // 定义一个方法  
    displayDetails: function() {  
        return "这是一辆 " + this.make + " " + this.model + "，生产年份是 " + this.year + "。";  
    }  
};  
  
// 定义一个全局函数来调用对象的方法并显示结果  
function displayMessage() {  
    var details = car.displayDetails(); // 调用对象的方法  
    document.getElementById("demo").innerHTML = details; // 显示结果  
}  
</script>  
  
</body>  
</html>

在这里面当对象里面出现的不是属性。而是方法，也就是函数，然后我们会调用函数里面的定义。

// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName;
</script>

// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName();
</script>

从这两段代码中我们可以看到就是在于person.fullName后面有没有()，当出现()时也就是意味着调用了函数，当没有出现就是意味着只是返回函数定义：

function() { return this.firstName + " " + this.lastName; }。person.fullName();和这个person["fullName"]是等效的，两种表示方法都可以。

4.this

简单来说就是说明当你在对象里面有一个函数，你想要return本函数的值的时候，你需要使用this.属性表明当下的值是在这个对象里面的，所以才能出现值。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

2.JS小游戏制作演示

1.简单制作一个猜数游戏

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>猜数游戏</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <h1>猜数游戏</h1>  
    <p id="gameStatus"></p>  
    <input type="number" id="userGuess" min="1" max="100">  
    <button onclick="checkGuess()">猜一下</button>  
    <script src="script.js"></script>  
</body>  
</html>

body {  
    font-family: Arial, sans-serif;  
    text-align: center;  
    margin-top: 50px;  
}  
  
input[type=number] {  
    width: 100px;  
    padding: 5px;  
    margin: 10px;  
}  
  
button {  
    padding: 10px 20px;  
    margin: 10px;  
}

let secretNumber = Math.floor(Math.random() * 100) + 1;  
let guessCount = 0;  
let isGameOver = false;  
  
function checkGuess() {  
    const userGuess = parseInt(document.getElementById('userGuess').value);  
    guessCount++;  
  
    if (isGameOver) {  
        alert('游戏已经结束!');  
        return;  
    }  
  
    if (isNaN(userGuess)) {  
        alert('请输入一个有效的数字!');  
        return;  
    }  
  
    const gameStatus = document.getElementById('gameStatus');  
  
    if (userGuess === secretNumber) {  
        gameStatus.textContent = `恭喜你，猜对了！数字是 ${secretNumber}。你猜了 ${guessCount} 次。`;  
        isGameOver = true;  
    } else if (userGuess < secretNumber) {  
        gameStatus.textContent = '猜小了，再试一次！';  
    } else {  
        gameStatus.textContent = '猜大了，再试一次！';  
    }  
}