蓝旭第四周预习（JavaScript对象，JS小游戏制作演示（综合复习））

2301_80325289

已于 2024-04-12 12:02:09 修改

阅读量257

点赞数 4

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

于 2024-04-11 23:34:46 首次发布

本文链接：https://blog.csdn.net/2301_80325289/article/details/137495930

版权

本文详细介绍了JavaScript中的对象概念，包括对象的定义、创建和操作，以及如何在实际场景中使用对象实现一个简单的数字猜测游戏。通过实例展示了变量的声明、对象属性的访问和自定义方法的应用。

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

一.JavaScript对象

定义：

对象是一种复合数据类型，它将许多值（原始值或其他对象）聚集在一起，可以通过名称访问这些值。对象可以被看作是属性的无序集合，每个属性都是一个键值对。（上一个博客中有关于对象的知识点）

示例如下：


<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>1.JavaScript 变量</h2>
<p id="demo">meihe simayi</p>

<script>
//1.创建并显示变量：
var car = "porsche";
document.getElementById("demo").innerHTML = car;
//2.创建对象：
var car = {type:"porsche", model:"987", color:"red"};

// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
//3.创建对象
var person={
    firstName:"Bill",
    lastName:"Gates",
    age: 45,
    eyeColor:"blue"
};
//显示对象中的数据
document.getElementById("demo").innerHTML = person.firstName+"已经"+person.age+"岁了。";
//4.创建对象
var person={
    firstName:"meihe",
    lastName:"simayi",
    id:2023010084
};
document.getElementById("demo").innerHTML=person["firstName"]+" "+person["lastName"];
//5.创建对象：
var person={
    firstName: "meihe",
    lastName : "simayi",
    id       : 2023010084,
    fullName: function(){
        return this.firstName+" "+this.lastName;
    }
};
//显示对象中的数据；
document.getElementById("demo").innerHTML=person.fullName();
//6.创建对象：
var person={
    firstName:"meihe",
    lastName:"simayi",
    id:123456,
    fullName: function(){
        return this.firstName + " " + this.lastName;
    }
    };
    //显示对象中的数据：
    document.getElementById("demo").innerHTML=person.fullName;(没有括号)
    

</script>

</body></html>

结果如下：

二.JS小游戏制作

游戏名称：

数字猜测

游戏的流程如下：

系统生成一个1-100之间的随机数作为正确答案。
用户输入一个数字并提交。
系统根据用户输入的数字给出提示（太高、太低或正确）。
如果用户猜测正确，游戏结束；如果用户猜测失败，回到步骤2。

示例如下：

//html和js部分
<!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="style.css">
</head>
<body><div>
    <h1>猜数字游戏</h1>
    <input type="number" id="guess" placeholder="输入一个1-100的数字">
    <button id="submit">提交</button>
    <p id="hint"></p></div>
    //js内嵌样式
    <script>let target = Math.floor(Math.random() * 100) + 1;//使用math.random函数生成1~100的随机数；变量值取整给target变量，这个数字是玩儿家需要猜测的数组；
        document.getElementById('submit').onclick = function() {//给提交按钮添加一个点击事件监听器；点击按钮会调到checkGuess函数；
            let guess = document.getElementById('guess').value;
            let hint = document.getElementById('hint');
            //判断输入的是否对的
            if (guess < target) {
                hint.innerHTML = '太低了，你再想想呗';
            } else if (guess > target) {
                hint.innerHTML = '太高了，你再想想呗';
            } else {
                hint.innerHTML = '恭喜你，猜对了！';
                document.getElementById('submit').disabled = true;
            }
        }</script>
</body>

</html>

//css外样式
body {
    font-family: Arial, sans-serif;
    color: deeppink;
    font-size: xx-large;
    text-align: center;
}
*{
    background-color: cyan;
}
div{
    width: 400px;
    height: 400PX;
    border-style: outset;
    margin: 100PX 500PX;
    outline:thick ridge rgb(255, 60, 174);
}
#submit {
    font-size: xx-large;
    font-style:unset;
    margin-top: 10px;
}

运行结果如下: