个人中心
gpt4 book ai didi

javascript - 选择你自己的冒险作业

转载 作者：行者123 更新时间：2023-11-28 16:32:02 26 4
gpt4 key购买 nike

我必须完成一个选择你自己的冒险游戏，我完全不知道为什么我在浏览器中看不到任何东西。我有一个数据结构，它有一个当前页面的图像，然后有两个选项。除了最后一个选项之外，这两个选项可以让您领先 1 步或领先 2 步。出于某种原因，我无法让它运行，而且我知道这可能只是某个地方的一个小错误。 

    <!doctype html>
        <html>
<head>
    <link rel="stylesheet" type="text/css" href="adventureStylez.css">
    <script type="text/javascript" src="jquery-1.12.0.js">
        var adventureGame = [
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/books.jpg",
                "desc": "You find yourself overwhelmed with homework. You must relieve yourself of stress before you can even begin to accomplish anything. What do you do?",
                "loc": 0,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Attempt some math homework.",
                        "loc": 1
                    },
                    {
                        "desc": "Go for a calming night walk on the dock by the ocean.",
                        "loc": 2
                    }
                ]
            },
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/math.jpg",
                "desc": "The attempt to complete math homework resulted in more stress. Now what do you do?",
                "loc": 1,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Go for a calming night walk on the dock by the ocean.",
                        "loc": 2
                    },
                    {
                        "desc": "Paint a picture.",
                        "loc": 3
                    }
                ]
            },
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/dock.jpg",
                "desc": "The dock is very unstable. You must hold your balance, but you are having trouble with it. What do you do?",
                "loc": 2,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Go back home and paint a picture.",
                        "loc": 3
                    },
                    {
                        "desc": "Use your inner zen energy to persevere and finish the walk on the dock.",
                        "loc": 4
                    }
                ]
            },
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/tree.jpg",
                "desc": "You paint a beautiful of a girl and a tree. Now you feel bored. What do you do?",
                "loc": 3,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Use your inner zen energy to conquer that dock.",
                        "loc": 4
                    },
                    {
                        "desc": "Go beat that metal octopus' ass that has been harassing your dog at night.",
                        "loc": 5
                    }
                ]
            },
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/balance.jpg",
                "desc": "You made that dock your bitch. All of a sudden you feel an intense amount of adrenaline. What do you do?",
                "loc": 4,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Jump in the ocean.",
                        "loc": 6
                    },
                    {
                        "desc": "Go beat that metal octopus' ass that has been harassing your dog at night.",
                        "loc": 5
                    }
                ]
            },
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/metaloctopus.jpg",
                "desc": "That octopus is done for. Congratulations you have won!",
                "loc": 5,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Play again?",
                        "loc": 0
                    }
                ]
            },
            {
                "src": "http://people.emich.edu/egurnee/assets/dixit/sad-bear.jpg",
                "desc": "Oh, no! When you jumped in the ocean you were eaten by a shark. Try again.",
                "loc": 6,
                "type": "choice",
                "choices": [
                    {
                        "desc": "Try again?",
                        "loc": 0
                    }
                ]
            }
        ];

        function add_choice(desc, loc) {
            $("#response").append("<button class=choice data-loc=" + loc + ">" + desc + "</button>");
        }

        function set_page_desc(desc) {
            $("#page_desc").append("<p>" + desc + "</p>");
        }

        function set_page_img(src){
            $("#page_img").append("<img src =\" " + src + "\">")
        }


        function clear_page() {
            $("#page_desc").empty();
            $("#response").empty();
        }
        function load_page(id) {
            // Fetch JSON for page data associated with given ID
            var page_data = adventureGame[id];

            clear_page();
            set_page_img(page_data.src);
            set_page_desc(page_data.desc);
            if (page_data.type === 'choice') {
                for (var choice in page_data.choices) {
                    var choice_data = page_data.choices[choice];
                    add_choice(choice_data.desc, choice_data.loc);
                }
            }
        }


        var current_page = 0;
        $(document).ready(function () {
            load_page(0);
            $('#response').on('click', '.choice', function () {
                var loc = $(this).data('loc');
                load_page(loc);
            });
        });
    </script>
    <title>My Choose Your Own Adventure Game</title>
</head>
<body>
    <script type="text/javascript" src="jquery-1.12.0.js">
        $(document).ready(function () {
            load_page(0);
            $('#response').on('click', '.choice', function () {
                var loc = $(this).data('loc');
                load_page(loc);
            });
        });
    </script>
    <div id="page" class="blockCenter">
    <div id="page_img"></div>
    <div id="page_desc"></div>
    <div id="response"></div>
    </div>
</body>
</html>

最佳答案

您的问题是您的脚本标签设置不正确。

这个脚本标签<script type="text/javascript" src="jquery-1.12.0.js">有您的本地 javascript 和对 jquery 的引用。它应该是其中之一，但不能同时是两者。

所以首先，你会想要这样做。您可以将 src 更改为本地或 CDN，但这将为您包括 jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
    your code goes here
</script>

第二个问题是您有两个文档就绪函数。你应该只有一个；并且它位于何处是有争议的，但它通常位于页面底部，就在您关闭 body 标记之前。

所以你的代码看起来像这样:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="adventureStylez.css">
        <title>My Choose Your Own Adventure Game</title>
    </head>
    <body>
        <div id="page" class="blockCenter">
            <div id="page_img"></div>
            <div id="page_desc"></div>
            <div id="response"></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-1.12.0.js">
            //Other JS Code from top of page

            var current_page = 0;
            $(document).ready(function () {
                load_page(0);
                $('#response').on('click', '.choice', function () {
                   var loc = $(this).data('loc');
                   load_page(loc);
                });
            });
        </script>
    </body>
</html>

关于javascript - 选择你自己的冒险作业，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35301854/

26 4 0
文章推荐： html - 导航栏和图像之间的空间
文章推荐： html - 同级 Flexbox 元素/列中的行高相等
文章推荐： python - 是否可以使用装饰器来猴子修补全局变量？
文章推荐： html - 当绝对的 child 时 Bootstrap 容器不居中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com