选择您自己的冒险作业
Choose your own adventure homework assignment
我必须完成一个选择你自己的冒险游戏，我完全不知道为什么我的浏览器中没有出现任何内容。我有一个数据结构，其中包含当前页面的图像，然后是两个选项。除了最后一个选项之外，这两个选项需要您提前 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>
第二个问题是您有两个文档就绪函数。 你应该只有一个;它的位置是有争议的，但它通常位于页面底部，就在你关闭正文标签之前。
所以你的代码看起来像这样：
<!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>
你的问题是这个。你已经编写了一个脚本标记，在其中src jquery，但你也编写了自己的代码。改为写这个：
<script src="jquery-1.12.0.js"></script>
<script type="text/javascript">
// Your code
</script>
相关文章：
- cron作业与Javascript计时事件
- 与运行长作业(javascript，node.js）的第三方API同步的最佳实践
- MobileFirst:在客户端运行计时器作业-最佳选项
- 解析云代码作业:删除在数据库中已经存在一个小时的行
- 如何将所有作业自定义到window.location.href
- jQuery在$.get数据完成后执行作业
- 如何在解析服务器上用kue调度作业
- 在一个JavaScript文件中解析云代码定义和作业
- 在 parse.com 中保存对象后计划后台作业
- node.js中的低优先级作业
- 赢得的活动't Codecademy's日历AngularJS作业
- MEANIO群集(共4个）对于计划作业仅运行一次
- 在nodeJS中每小时运行一次调度作业
- kue-处理不同文件中的作业
- 在Jenkins作业配置页面中，当我的自定义构建步骤添加到作业配置页面时，如何调用JavaScript函数
- 陷入因果报应验证作业(nodejs，angularjs）
- 无法部署分析后台作业
- 我想在客户端单击中生成作业序列号.如果有任何建议，请提供帮助
- 使用节点计划计划作业
- 选择您自己的冒险作业
