JS寵物遊戲源碼

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<button type="button" id="btn">啓動寵物遊戲</button>
<script>

    var mybtn = document.querySelector("#btn");
    mybtn.onclick = function () {
        petGame.welcome();
    };

    // 貓,狗,魚 ,三種寵物的屬性:都有 名字,性別,主人,狀態,類型
    // 三種寵物的共有的方法:介紹,餵食
    // 父類:定義三種寵物的共性
    function Pet(name, gender, owner) {
        this.name = name;
        this.gender = gender;
        this.owner = owner;
        this.healthy = 80;
        this.lastEatTime = new Date() - 10 * 1000;
    }
    Pet.prototype.introduceSelf = function () {
        console.log(`
        大家好,我是一隻叫${this.name}的 ${this.type},
                    我是個${this.gender === "1" ? "男生" : '女生'},
                    我的主人是${this.owner},
                    我的狀態是${this.healthy}
        `);
    };
    Pet.prototype.eat = function () {
        var now = new Date();
        if (now - this.lastEatTime < 1000 * 10) {
            console.log("我吃的太頻繁啦,目前不需要吃東西哦!");
        } else {
            this.healthy += 20;
            console.log(`嘻嘻,${this.name}吃飯了,當前狀態${this.healthy},今天也要衝呀`);
            this.lastEatTime = new Date();
        }
    }

    // 定義子類:狗
    function Dog() {
        Pet.apply(this, arguments);
        this.type = "狗狗";
    }
    Dog.prototype = new Pet();
    Dog.prototype.constructor = Dog;
    Dog.prototype.play = function () {
        this.healthy += 10;
        console.log(`${this.name}最喜歡玩飛盤了,當前健康值${this.healthy}`);
    };
    // var dog1 = new Dog("旺財","男生","大明")

    // 定義子類:貓
    function Cat() {
        Pet.apply(this, arguments);
        this.type = "貓咪";
    }
    Cat.prototype = new Pet();
    Cat.prototype.constructor = Cat;
    Cat.prototype.play = function () {
        this.healthy += 10;
        console.log(`${this.name}最喜歡玩毛線球了,當前健康值${this.healthy}`);
    };

    // 定義子類:魚
    function Fish() {
        Pet.apply(this, arguments);
        this.type = "魚";
    }
    Fish.prototype = new Pet();
    Fish.prototype.constructor = Fish;
    Fish.prototype.play = function () {
        this.healthy += 10;
        console.log(`${this.name}最喜歡吐泡泡了,當前健康值${this.healthy}`);
    };

    var petGame = {
        loginedName: "",
        // 本地模擬的一個數據庫,用戶列表
        userList: [
            { nickname: "aaa", password: "123123" },
            { nickname: "張三", password: "abc8888" }
        ],
        // 寵物列表
        petList: [],
        welcome: function () { // 歡迎界面
            var result = prompt("歡迎來到寵物遊戲,請選擇:1,登錄  2,註冊  3,退出遊戲");
            switch (result) {
                case '1':
                    this.login();
                    break;
                case '2':
                    this.register();
                    break;
                case '3':
                    console.log("歡迎下次再來")
                    break;
                default:
                    console.log("輸入有誤,請重新輸入!");
                    // this.welcome();
                    arguments.callee.call(this);
                    break;
            }
        },
        register: function () {

            // 驗證註冊暱稱
            do {
                var isError = true;
                var registerName = prompt("註冊--請輸入暱稱:");

                // 判斷暱稱是否存在
                var result = this.userList.some(function (item) {
                    return item.nickname === registerName;
                });
                if (registerName === null) {
                    this.welcome();
                    return;
                } else if (registerName.trim() === "") {
                    console.log("暱稱不能爲空");
                } else {
                    if (result) {
                        console.log("暱稱已存在");
                    } else {
                        console.log("暱稱OK");
                        isError = false;
                    }
                }
            } while (isError);

            // 驗證註冊密碼
            do {
                var isPwdError = true;
                var registerPwd = prompt("註冊--請輸入密碼:");
                if (registerPwd === null || registerPwd.trim() === "" || registerPwd.trim().length < 6 || registerPwd.trim().length > 12) {
                    console.log("密碼輸入有誤,請輸入長度爲6-12之間的密碼");
                } else {
                    console.log("註冊密碼OK");
                    isPwdError = false;
                }
            } while (isPwdError);

            // 確認密碼
            do {
                var isError3 = true;
                var confirmPwd = prompt("註冊--請確認密碼:");
                if (confirmPwd === registerPwd) {
                    console.log("註冊密碼OK");
                    isError3 = false;
                } else {
                    console.log("兩次密碼不一致!");
                }
            } while (isError3);

            this.userList.push({ nickname: registerName, password: registerPwd });
            console.log("恭喜,註冊成功!");
            this.welcome();
        },

        login() {

            // 驗證登錄暱稱
            do {
                var isError = true;
                var loginName = prompt("登錄--請輸入暱稱:");
                if (loginName === "") {
                    console.log("暱稱不能爲空");
                } else if (loginName === null) {
                    this.welcome();
                    return;
                } else {
                    var result = this.userList.some(function (user) {
                        return user.nickname === loginName;
                    });
                    if (result) {
                        console.log("登錄暱稱OK");
                        isError = false;
                    } else {
                        console.log("暱稱不存在!");
                    }
                }
            } while (isError);

            // 驗證登錄密碼
            do {
                var isError2 = true;
                var loginPwd = prompt("登錄--請輸入密碼:");
                if (loginPwd === null || loginPwd.trim() === "" || loginPwd.trim().length < 6 || loginPwd.trim().length > 12) {
                    console.log("登錄密碼輸入有誤,請輸入長度爲6-12之間的密碼");
                } else {
                    isError2 = false;
                }
            } while (isError2);

            // 驗證登錄暱稱和密碼是否都匹配
            var isAlive = this.userList.some(function (item) {
                return item.nickname === loginName && item.password === loginPwd;
            });

            if (isAlive) {
                console.log(`歡迎您,${loginName},登錄成功`);
                this.loginedName = loginName;
                this.petMain(); // 寵物遊戲界面
            } else {
                console.log("暱稱或密碼錯誤!請重新登錄!");
                arguments.callee.call(this);
            }
        },
        petMain() {
            var result = prompt("歡迎來到寵物遊戲,請操作:1、購買寵物 2、查看我的寵物 3、註銷");
            switch (result) {
                case '1':
                    this.buyPet();
                    break;
                case '2':
                    this.showPet();
                    break;
                case null:
                case '3':
                    this.welcome();
                    break;
                default:
                    console.log("輸入有誤");
                    arguments.callee.call(this);
                    break;
            }
        },
        buyPet() {

            // var that = this;
            var result = this.petList.find(item => item.owner === this.loginedName);

            if (result) {
                console.log("你已經有寵物了,請好好對待" + (result.gender === '1' ? "他" : "她"))
                this.petMain();
                return;
            }

            // 選擇寵物類型
            do {
                var isTypeError = true;
                var petType = prompt("請選擇寵物類型:1:狗狗 2:貓咪 3:魚");
                if (['1', '2', '3'].includes(petType)) {
                    console.log("寵物類型OK");
                    isTypeError = false;
                } else {
                    console.log("寵物類型輸入有誤");
                }
            } while (isTypeError);

            // 輸入寵物暱稱
            do {
                var isNameError = true;
                var petName = prompt("請輸入寵物暱稱:");
                if (petName === null || petName.trim() === "") {
                    console.log("暱稱有誤,請重新輸入!");
                } else {
                    console.log("寵物暱稱OK");
                    isNameError = false;
                }
            } while (isNameError);

            // 選擇寵物性別
            do {
                var isGenderError = true;
                var petGender = prompt("請輸入寵物的性別:1.GG  2.MM");
                if (['1', '2'].includes(petGender)) {
                    console.log("寵物性別OK");
                    isGenderError = false;
                } else {
                    console.log("寵物性別輸入有誤");
                }
            } while (isGenderError);

            // 根據用戶所選寵物類型,創建寵物對象
            var mypet = null;
            switch (petType) {
                case "1":
                    mypet = new Dog(petName, petGender, this.loginedName);
                    break;
                case "2":
                    mypet = new Cat(petName, petGender, this.loginedName);
                    break;
                case "3":
                    mypet = new Fish(petName, petGender, this.loginedName);
                    break;
            }
            console.log("領養成功!");
            this.petList.push(mypet);
            this.petMain();

        },

        // 查看寵物
        showPet() {
            var result = this.petList.find(item => item.owner === this.loginedName);

            if (!result) {
                console.log("你還沒有領養寵物,快去領養一隻吧!")
                this.petMain();
                return;
            }

            // console.log(result);
            result.introduceSelf(); // 介紹自己

            var doSomething = prompt("請操作:1,餵食  2,玩耍  3,回到主菜單");
            switch (doSomething) {
                case "1":
                    result.eat();
                    break;
                case "2":
                    result.play();
                    break;
                case "3":
                    this.petMain();
                    return false;
                    break;
                default:
                    console.log("輸入有誤");
                    break;
            }

            arguments.callee.call(this);
        }
    }
</script>

</body>

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章