jquery简单问答游戏

css代码

 body,html{margin: 0;padding: 0;width: 100%;height: 100%;position: relative;overflow: hidden;}body{background: url(./bg.jpg) 0 -1108px;text-align: center;}.box{position: relative;overflow: hidden;top: 0;left: 0;width: 100%;height: 180px;}.con{position: absolute;left: 0;top: 0;text-align: center;}.item{width: 100%;height: 180px;}.check{margin: 6px 100px 6px 100px;background: blue;padding: 5px 0;border-radius: 10px;color: #fff;font-weight: 600;}

HTML代码

<div class="box"><div class="con"></div>
</div>
<button>重新答题</button>

js 代码

//渲染页面
function showPage(){var str = ``;for(let i = 0;i < obj.length;i++){str += `<div class="item"><h3 class="title">${obj[i].title}</h3><div class="check" answer=${obj[i].answer}>${obj[i].data.a}</div><div class="check" answer=${obj[i].answer}>${obj[i].data.b}</div><div class="check" answer=${obj[i].answer}>${obj[i].data.c}</div></div>`;$(".con").html(str);}};showPage();var num = 0;//点击答案$(".check").on("click",function (){if($(this).html() == $(this).attr("answer")){num += 1;$(".con").css("top", parseInt($(".con").css("top")) - 200 + "px");console.log("num:",num);if(num == 11){$(".con").css("top", "-2000px");alert("答題完成,遊戲結束");}}else{$(".con").css("top", "0px");alert("答錯重新開始！");}});//重新开始$("button").on("click",function(){console.log(typeof num)var r = confirm("您已經答到第" + (parseInt(num) + 1) + "題,確定重新開始嗎？");if(r){$(".con").css("top", "0px");num = 0}else{}});

json对象

var obj = [{"title":"1、悟空姓什么？","answer":"c、孙","data":{"a":"a、赵","b":"b、钱","c":"c、孙"}},{"title":"2、下面哪个不是鸟山明创作的饭","answer":"c、蛋炒饭","data":{"a":"a、天津饭","b":"b、孙悟饭","c":"c、蛋炒饭"}},{"title":"3、哪个角色是女性","answer":"a、18号","data":{"a":"a、16号","b":"a、17号","c":"a、18号"}},{"title":"4、龙珠一共有几颗？","answer":"a、7颗","data":{"a":"a、5颗","b":"a、6颗","c":"a、7颗"}},{"title":"5、悟空的爷爷留给悟空的龙珠有几颗星？","answer":"c、四颗星","data":{"a":"a、一颗都没有","b":"b、八颗星","c":"c、四颗星"}},{"title":"6、悟空的岳父是谁？","answer":"c、牛魔王","data":{"a":"a、金角","b":"b、鹿角大仙","c":"c、牛魔王"}},{"title":"7、下面哪个是悟空的儿子？","answer":"a、悟天","data":{"a":"a、悟天","b":"b、悟地","c":"c、悟人"}},{"title":"8、被封印在电饭锅内的大魔王叫什么？","answer":"a、比克","data":{"a":"a、比克","b":"b、比两","c":"c、比斤"}},{"title":"9、下面哪个是悟空的招式？","answer":"c、龟派气功","data":{"a":"a、鳖派气功","b":"b、王八派气功","c":"c、龟派气功"}},{"title":"10、悟空他哥是谁？","answer":"c、贝吉塔","data":{"a":"a、贝吉房","b":"b、贝吉楼","c":"c、贝吉塔"}},{"title":"11、A419号星球中枢计算机的密码是什么？","answer":"c、15314","data":{"a":"a、73482","b":"b、13524","c":"c、15314"}}
];

jquery简单问答游戏相关推荐

想搞一套AI问答游戏系统？简单，Google又开源了
本文来自AI新媒体量子位(QbitAI) 刚刚,Google开源了一套问答游戏App系统. 通过一套模板工具可以,你只要给出问题和答案,就能搞出一套功能齐备的AI问答游戏.这套问答系统基于Google ...
c语言游戏总出bug,C语言编写的简单移动游戏出现bug?_编程_游戏设计_C语言_天涯问答_天涯社区...
C语言编写的简单移动游戏出现bug? 第一次按上下左右没什么问题,之后就会卡住..不知道出了什么错源码如下:(用vc++的win32 console程序编写) #include #include ...
Python编程基础：第三十八节问答游戏Quiz Game
第三十八节问答游戏Quiz Game 前言实践前言我们这一节还是对之前学习内容的一个综合运用,主要涉及到函数编程.字典以及列表的使用.条件语句.循环结构等等.通过本节的学习读者可以检验之前内容 ...
php手游管理系统,搭建简单的游戏管理系统
这次给大家带来搭建简单的游戏管理系统,搭建简单游戏管理系统的注意事项有哪些,下面就是实战案例,一起来看一下. 一. 分析&布局设计当前我们项目的界面是这样的: 简单来说,看不出一点管理系统的 ...
百度DuerOS联手蓝港发布“小青智趣”，布局AI语音问答游戏
李根发自凹非寺量子位报道 | 公众号 QbitAI AI语音问答游戏也有来了,这次是百度度秘与蓝港科技走到了一起. 百度度秘与蓝港科技共同宣布"小青智趣计划",联手布局语 ...
php 列表收缩展示插件,可展开和收缩的jquery FAQ问答列表特效
这是一款简单的jquery FAQ问答列表特效.该FAQ问答列表可以通过点击问题的标题来展开或收缩列表,它使用简单,方便实用. 使用方法在页面中引入jquery. HTML结构该FAQ问答列表采用 ...
python智力问答游戏_Python语言编写智力问答小游戏功能
本篇博文将使用Python代码语言简单编写一个轻松益智的小游戏,效果如下所示: 1.设计思路本项目使用SQLite建立问答题库,每道题包括4个选项答案(3个正确答案,1个错误答案).每道题都有一定分 ...
unity快速开发问答游戏
最近又赶上做毕设的时间了,很多同学都在网上找人做毕设.作为一个勤奋自强的好青年,我才不会做那种花钱买毕设的事,当然是要自己做毕设了. 用unity做毕设实际上很简单,我们也不是做多复杂的项目.只要把基 ...
用python3.7.3编写一个问答游戏
我们先来看一下效果: 代码如下: import random,time #首先初始化 number1 = 0 number2 = 0 answer1 = 0 answer2 = 0 score = 0 ...

jquery简单问答游戏

css代码

HTML代码

js 代码

json对象

jquery简单问答游戏相关推荐

最新文章

热门文章