Javascript 选择你自己的冒险作业_Javascript_Jquery_Html_Css

Javascript 选择你自己的冒险作业

javascript jquery html css

Javascript 选择你自己的冒险作业,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我必须完成一个选择你自己的冒险游戏，我完全不知道为什么我的浏览器中没有显示任何东西。我有一个数据结构，它有一个当前页面的图像，然后有两个选项。除最后一个选项外，这两个选项可使您提前1步或提前2步。由于某种原因，我无法让它运行，我知道这可能只是某个地方的一个小错误 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="advent

我必须完成一个选择你自己的冒险游戏，我完全不知道为什么我的浏览器中没有显示任何东西。我有一个数据结构，它有一个当前页面的图像，然后有两个选项。除最后一个选项外，这两个选项可使您提前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>


var adventureGame=[
{
“src”：http://people.emich.edu/egurnee/assets/dixit/books.jpg",
“desc”：“你发现自己被家庭作业压得喘不过气来。你必须在开始完成任何事情之前释放自己的压力。你会做什么？”，
“loc”：0，
“类型”：“选择”，
“选择”：[
{
“描述”：“尝试做一些数学作业。”，
“loc”：1
},
{
“描述”：“在海边的码头上进行一次平静的夜间散步。”，
“loc”：2
}
]
},
{
“src”：http://people.emich.edu/egurnee/assets/dixit/math.jpg",
“描述”：“试图完成数学作业导致了更大的压力。现在你做什么？”，
“loc”：1，
“类型”：“选择”，
“选择”：[
{
“描述”：“在海边的码头上进行一次平静的夜间散步。”，
“loc”：2
},
{
“描述”：“画一幅画。”，
“loc”：3
}
]
},
{
“src”：http://people.emich.edu/egurnee/assets/dixit/dock.jpg",
“描述”：“码头非常不稳定。你必须保持平衡，但你遇到了问题。你怎么办？”，
“loc”：2，
“类型”：“选择”，
“选择”：[
{
“描述”：“回家画一幅画。”，
“loc”：3
},
{
“描述”：“用你内心的禅宗能量坚持下去，完成码头上的行走。”，
“loc”：4
}
]
},
{
“src”：http://people.emich.edu/egurnee/assets/dixit/tree.jpg",
“描述”：“你画了一个漂亮的女孩和一棵树。现在你觉得无聊。你做什么？”，
“loc”：3，
“类型”：“选择”，
“选择”：[
{
“描述”：“用你内心的禅能征服那个码头。”，
“loc”：4
},
{
“描述”：“去打那只晚上骚扰你狗的金属章鱼的屁股。”，
“loc”：5
}
]
},
{
“src”：http://people.emich.edu/egurnee/assets/dixit/balance.jpg",
“描述”：“你把那个码头当成了你的婊子。突然你感到肾上腺素分泌过多。你怎么办？”，
“loc”：4，
“类型”：“选择”，
“选择”：[
{
“描述”：“跳入海洋。”，
“loc”：6
},
{
“描述”：“去打那只晚上骚扰你狗的金属章鱼的屁股。”，
“loc”：5
}
]
},
{
“src”：http://people.emich.edu/egurnee/assets/dixit/metaloctopus.jpg",
“描述”：“那只章鱼完了。恭喜你赢了！”，
“loc”：5，
“类型”：“选择”，
“选择”：[
{
“描述”：“再次播放？”，
“loc”：0
}
]
},
{
“src”：http://people.emich.edu/egurnee/assets/dixit/sad-bear.jpg",
“描述”：“哦，不！当你跳入大海时，你被鲨鱼吃掉了。再试一次。”，
“loc”：6，
“类型”：“选择”，
“选择”：[
{
“描述”：“再试一次？”，
“loc”：0
}
]
}
];
功能添加选项（描述、定位）{
$（“#响应”）.append（“+desc+”）；
}
功能集页面描述（描述）{
$（“#page_desc”）。追加（“”+desc+””；
}
功能集\u页面\u img（src）{
$（“#第#页”）。追加（“”）
}
函数清除页面（）{
$（“#page_desc”）.empty（）；
$（“#响应”）.empty（）；
}
功能加载页面（id）{
//获取与给定ID关联的页面数据的JSON
var page_data=adventureGame[id]；
清除页面（）；
设置页面img（page\u data.src）；
设置页面描述（页面数据描述）；
如果（page_data.type=='choice'）{
for（第_data.choices页中的var选项）{
var choice_data=页面_数据。选项[choice]；
添加选项（choice_data.desc，choice_data.loc）；
}
}
}
var当前页面=0；
$（文档）.ready（函数（）{
加载页面（0）；
$（'#response'）。on（'click'，'choice'，函数（）{
var loc=$（this.data（'loc'）；
加载页面（loc）；
});
});
我选择你自己的冒险游戏
<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>

<!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>

<script type="text/javascript" src="jquery-1.12.0.js">
    // Your code
</script>

<script src="jquery-1.12.0.js"></script>
<script type="text/javascript">
    // Your code
</script>