JS初学者___窗口宠物游戏

最新推荐文章于 2023-03-02 22:34:04 发布
Et2nity
最新推荐文章于 2023-03-02 22:34:04 发布
阅读量477
点赞数
分类专栏： JS/JavaScript 文章标签： js javascript 游戏前端 html5
本文链接：https://blog.csdn.net/Eternity_matt/article/details/108637966
版权
JS/JavaScript 专栏收录该内容
24 篇文章 0 订阅
订阅专栏
这个是在学习过js初级知识之后，对Javascript 知识的各级应用，让大家可以更加熟悉JavaScript中的一些细小的知识的应用。
在小程序中用到了：
1. 循环
2. 函数
3. 对象
4. 封装函数
5. 节流
6. 正则表达式
等，这几个最基本最常用的JavaScript知识，初步应用到实践中去。
下面直接贴已经写完并可以正常运行的窗口程序，并在程序之后作出分步讲解：
一. 程序源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function throttle(callback, wait) {
            let endTime = 0
            return function () {
                if (new Date() - endTime < wait) return console.log('您的钱太多了，请稍后再付');;
                callback.apply(this, arguments)
                endTime = new Date()

            }
        }

        function User(username, password) {
            this.username = username
            this.password = password
        }

        function Pet(petname, gender, type, master) {
            this.name = petname
            this.gender = gender
            this.type = type
            this.master = master
            this.state = 80

            this.play = throttle(function () {
                console.log(this.name + '做游戏咯~');
                this.state += 5
                if (this.state > 100) this.state = 100
            }, 60000)

            this.eat = throttle(function () {
                console.log(this.name + '吃东西咯~');
                this.state += 10
                if (this.state > 100) this.state = 100
            }, 120000)

            //封装自我介绍
            this.introduce = function () {
                console.log(`你好，
                    我是${this.name},
                    我是只${this.gender === '1' ?'公':'母' }${this.type === '1'? '狗' :'猫'}
                    我的主人是${this.master},
                    状态：${this.state}
                    `)

            }

        }

        function mytrim(str) {
            if (!str) {
                return ''
            } else {
                return str.trim()
            }
        }

        let _ = {
            trim(str) {
                return !str ? '' : str.trim()
            }
        }
        //等同于上一个去空格功能
        let game = {
            //当前登录用户
            currentUser: null,
            sensitiveWord: ['cnm', 'qnm', 'sb'], //定义敏感词

            userlist: [{
                username: 'a',
                password: '123123'
            }],

            petList: [{

            }],
            loginPage() {

                console.log('欢迎登录');
                let usernameIsOk = true,
                    passwordIsOk = true
                let password = '',
                    username = ''

                do {
                    username = prompt('请输入用户名：')
                    if (!username) {
                        usernameIsOk = false
                        console.log('用户名不能为空');
                    } else {
                        usernameIsOk = true
                    }
                } while (!usernameIsOk);

                do {
                    password = prompt('请输入密码：')
                    if (!password) {
                        passwordIsOk = false
                        console.log('密码不能为空');
                    } else if (password.length < 6) {
                        passwordIsOk = false
                        console.log('密码至少大于6位');
                    } else {
                        passwordIsOk = true
                    }
                } while (!passwordIsOk);

                //拿用户输入的用户名和密码，判断是否存在
                let user = this.userlist.find(function (item) {
                    return item.username === username
                })

                if (!user) {
                    console.log('此用户不存在！');
                    this.loginPage()
                } else {
                    //用户存在，则判断密码对不对
                    if (user.password !== password) {
                        console.log('密码错误');
                        //有错则再次输入
                        this.loginPage()
                    } else {
                        //找到用户，登录成功
                        this.currentUser = username
                        console.log('login success');
                        this.mainPage()
                    }
                }

            },

            getPetPage() {
                let currentUser = this.currentUser
                let hasPet = this.petList.some(function (item) {
                    return item.master === currentUser

                })
                if (hasPet) {
                    console.log('你已有宠物，不能重复领养！');
                    return this.mainPage()
                }


                let petnameIsok = true,
                    typeIsok = true,
                    genderIsok = true

                let petname = ' ',
                    type = ' ',
                    gender = ' '
                do {
                    type = mytrim(prompt('请选择宠物类型：1.狗， 2.猫'))
                    if (!['1', '2'].includes(type)) {
                        typeIsok = false
                        console.log('宠物类型不正确')

                    } else {
                        typeIsok = true
                    }
                }
                while (!typeIsok)

                do {
                    gender = mytrim(prompt('请选择宠物的性别：1.GG， 2.MM'))
                    if (!['1', '2'].includes(gender)) {
                        genderIsok = false
                        console.log('宠物类型不正确')

                    } else {
                        genderIsok = true
                    }

                }
                while (!genderIsok)
                do {
                    petname = mytrim(prompt('请输入宠物昵称：'))
                    //username = mytrim(username) //调用mytrim函数
                    if (!petname) {
                        petnameIsok = false
                        console.log(' n昵称不能为空！');
                    } else {
                        let isSensitive = this.sensitiveWord.some(function (item) {
                            return petname.toUpperCase().includes(item.toUpperCase())
                        })

                        if (isSensitive) {
                            petnameIsok = false
                            console.log('用户名不合法！');
                        } else {
                            petnameIsok = true
                        }
                    }
                } while (!petnameIsok)


                console.log(petname + type + gender);
                //注册————密码
                let pet = new Pet(petname,gender,type,this.currentUser)
                //加入数组
                this.petList.push(pet)
                console.log(this.petList);

                this.mainPage()
            },

            petInfoPage() {
                console.log('查看宠物');
                let currentUser = this.currentUser
                let mypet = this.petList.find(function (item) {
                    return item.master === currentUser
                })
                if (!mypet) {
                    console.log('你还没有宠物');
                    return this.mainPage()

                };
                //找到宠物自我介绍板块
                mypet.introduce()

                let type = prompt('请选择互动方式： 1.喂食 2.逗TA玩  3.返回主菜单')

                switch (type) {
                    case '1':
                        mypet.eat()
                        break;
                    case '2':
                        mypet.play()
                        break;
                    case '3':
                        return this.mainPage()
                        break;
                    default:
                        console.log('输入有误，重新操作')
                        break;
                }
                arguments.callee.call(this)

            },

            mainPage() {
                let type = prompt('欢迎来到宠物世界，请选择操作： 1.领养宠物  2.查看宠物   3.注销')

                switch (type) {
                    case '1':
                        this.getPetPage()
                        break;
                    case '2':
                        this.petInfoPage()
                        break;
                    case '3':
                        this.welcomePage()
                        this.currentUser = null
                        break;
                    default:
                        console.log('输入有误，请重新操作');
                        this.mainPage()
                        break;
                }
            },

            registerPage() {

                // 注册页面开始
                console.log('欢迎注册');
                let usernameIsok = true,
                    passwordIsok = true,
                    password_cIsok = true
                let username, password, password_c
                do {

                    username = mytrim(prompt('欢迎注册，请输入用户名：'))
                    //username = mytrim(username) //调用mytrim函数
                    if (!username) {
                        usernameIsok = false
                        console.log('用户名不能为空！');
                    } else {
                        let isSensitive = this.sensitiveWord.some(function (item) {
                            return username.toUpperCase().includes(item.toUpperCase())
                        })

                        if (isSensitive) {
                            usernameIsok = false
                            console.log('用户名不合法！');
                        } else {

                            let isRepeat = this.userlist.some(function (item) {
                                return item.username === username
                            })
                            //判断用户数组中是否存在重复名字
                            if (isRepeat) {
                                usernameIsok = false
                                console.log('用户名已存在');
                            } else {
                                usernameIsok = true
                            }
                        }
                    }
                }
                while (!usernameIsok);
                //注册————密码
                do {

                    password = mytrim(prompt('欢迎注册，请输密码：'))
                    // password =(password) //调用mytrim函数
                    if (!password) {
                        passwordIsok = false
                        console.log('用户名不能为空！');
                    } else if (password.length < 6 || password.length > 12) {
                        console.log('请输入6- 12位的密码');
                        passwordIsok = false
                    } else {
                        console.log('注册成功');
                        passwordIsok = true
                    }

                } while (!passwordIsok);


                do {

                    password_c = prompt('欢迎注册，请再次输密码：')
                    password_c = mytrim(password_c) //调用mytrim函数
                    if (password_c !== password) {
                        password_cIsok = false
                        console.log('两次密码输入不一致！');
                    } else {
                        password_cIsok = true

                    }

                } while (!password_cIsok) {

                };

                console.log('注册成功，' + username + '您的密码是：' + password);

                let newUser = {
                    username,
                    password
                }
                this.userlist.push(newUser)
                console.log('当前已注册用户', this.userlist)
                this.welcomePage() //注册完成回到欢迎页

            },

            welcomePage() {
                let type = prompt('欢迎，请选择： 1.登录   2.注册   3.退出')

                switch (type) {
                    case '1':
                        this.loginPage()
                        break;
                    case '2':
                        this.registerPage()
                        break;
                    case '3':
                        console.log('退出成功，欢迎再来！');
                        break;
                    default:
                        console.log('输入有误，请重新操作');
                        // this.welcomePage()
                        break;

                        arguments.callee.call() //指向本函数   当指向是this. 的时候就无法使用了

                }
            }
        }
        game.welcomePage()
    </script>
</body>

</html>