用blockly制作诗词学习游戏
文章目录
引言
为了弘扬中国传统诗词文化，我们小组特地制作了这样的小游戏……
效果预览
话不多说，先看看效果
初始页面。
音乐自动循环播放
进行诗词作者流派配对
点击“检查答案”按钮后
若配对错了
点击“标准答案”按钮
再点击一次，答案隐藏
下方是各诗词百度百科的链接
点进去的页面
制作流程
制作这小游戏需要有些入门级别的前端知识，和blockly的了解
- 在blockly-master文件夹里打开第六个文件夹demo,再blockly factory，再打开index.html会出现这样的页面
- 构建诗词等拼图块
- 在Block Exporter里导出文件
这里我命名为poem_b.js
- 将所需要的代码块拉到workspace处，然后再按export按钮导出Start Code和Workspace Block
这里我将workspace.js改名为poem.js
- 在任意的编辑器里创建html文档，这里我是在vscode里编写的
- 将该文档和blockly_compressed.js,poems_b.js,javascript_compressed,poem_js等所有的东西都放在同一个文件夹下
- 编写html文档
规定语言和类型
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
- 设置标题
<title>
Poems Puzzle
</title>
- 引用文件
<script src='blockly_compressed.js'></script>
<script src='poems_b.js'></script>
<script src='javascript_compressed.js'></script>
- 设置背景图片
body{
background-image: url("bgp.jpg");
}
- 建立一个区域
<div id="blockDiv"></div>
PS：注意这里的id要和poem.js中的id要相同
12. 将上面导出的XML文件复制粘贴到body中
13. 下方附上诗词对应的百度百科链接
<a href="https://baike.baidu.com/item/%E8%A1%8C%E8%B7%AF%E9%9A%BE%E4%B8%89%E9%A6%96%EF%BC%88%E5%85%B6%E4%B8%80%EF%BC%89/15885066?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《行路难（其一）》讲解</p></pre></a>
具体效果实现原理
一打开网页音乐就循环播放的原理
var bgAudio = new Audio();
bgAudio.setAttribute("src","wzsh.mp3");
bgAudio.loop = true;
bgAudio.play()
$(".btn").on("click",function(){
bgAudio.pause();
bgAudio.currentTime = 0;
})
检查按钮工作原理
每个代码块都附上特定的值，如配对成功则返回yes否则放回no
Blockly.JavaScript['question1'] = function(block) {
var value_question1_image = Blockly.JavaScript.valueToCode(block, 'question1_image', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question1_statement = Blockly.JavaScript.statementToCode(block, 'question1_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question1_image=='(#lun)'&&statements_question1_statement==1)
if(code){
return "yes";
}
else {return "no";}
};
建立一个函数
function button_click(){
var code = Blockly.JavaScript.workspaceToCode(workspace);
var a=strCharPosition(code, 'yes')
if(code.match('no')== null){
alert("恭喜，全对");
}else{
alert("你共做对了"+a+'题'+" "+"做错了"+(7-a)+"题。继续加油哦！！！");
}
}
那如何判断a为多少呢？
function strCharPosition(str, char) {
var pos;
var arr = [];
pos = str.indexOf(char);
while (pos > -1) {
arr.push(pos);
pos = str.indexOf(char, pos + 1);
}
return arr.length;
};
这个函数用于判断“yes"的个数
再加个事件监听
<button id="check" onclick="button_click()">
检查答案
</button>
"标准答案"按钮的实现原理
<script>
var c=1;
function btnRst_Click() {
if(c) {document.getElementById('demo').innerHTML=("屈原——路漫漫其修远兮，吾将上下而求索——骚体诗 陶渊明——采菊东篱下，悠然见南山——山水田园诗派 岑参——马上相逢无纸笔，凭君传语报平安——边塞诗派 李白——长风破浪会有时，直挂云帆济沧海——浪漫主义诗派 杜甫——安得广厦千万间，大庇天下寒士俱欢颜——现实主义诗派 李清照——寻寻觅觅，冷冷清清，凄凄惨惨戚戚——婉约派 苏轼——大江东去浪淘尽，千古风流人物——豪放派");
window.c=0;
}
else {document.getElementById('demo').innerHTML="";window.c=1;}
}
</script>
代码展示
这是总的代码
html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src='blockly_compressed.js'></script>
<script src='poems_b.js'></script>
<script src='javascript_compressed.js'></script>
<title>
Poems Puzzle
</title>
<style>
body{
background-image: url("bgp.jpg");
}
</style>
</head>
<body>
<h1 style="text-align:center;font-size: 250%;">中华古典文化博大精深，让我们开启中国古典诗词的探险之旅吧！</h1>
<div id="blockDiv"></div>
<?xml version='1.0'?>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
<block type="question1" id="9L)OXGty;c3p=t)DDXfu" x="-137" y="63">
<field name="NAME">4</field>
</block>
<block type="question3" id="C.uRyf}XCey2abR.Zck]" x="1100" y="62">
<field name="NAME">4</field>
</block>
<block type="answer2_img_caijudong" id="87A#])tkH[bj!sVY=eVv" x="262" y="112"></block>
<block type="answer5_img_andeguang" id="G}c#-v3Y@dv$fr;eSL%_" x="737" y="113"></block>
<block type="question2" id="g8q;`IX5,jjgl1NSVC3O" x="-137" y="188">
<field name="NAME">4</field>
</block>
<block type="question6" id=",-w[c[p)zH+N[wxcL`t`" x="1100" y="187">
<field name="NAME">4</field>
</block>
<block type="answer2_statement" id="Z|DoC)p]|1=WuCCUSyM0" x="438" y="187"></block>
<block type="answer6_statement" id="SK1c$F.K)mavBA}yRhT^" x="612" y="213"></block>
<block type="answer1_statement" id="1Gs:@+0HZEF}:j[.9WL+" x="338" y="237"></block>
<block type="answer7_img_dajiangdong" id="_,.eVlUSAp1xvaAp1aqR" x="262" y="287"></block>
<block type="question4" id="zFn#BfGYqellYmt!i_ca" x="-137" y="313">
<field name="NAME">4</field>
</block>
<block type="answer7_statement" id="5{w(}U;;Y5jR|iMuyE~Y" x="513" y="287"></block>
<block type="question5" id="RbV5oon0.~~$EUp-#e8Z" x="1100" y="313">
<field name="NAME">4</field>
</block>
<block type="answer3_statement" id="C~u]NYjvU{S+7T.%6.?m" x="387" y="313"></block>
<block type="answer5_statement" id="3Fc8-n3zV@KQ]vSu2dO]" x="612" y="337"></block>
<block type="answer4_statement" id="n53tZc#YI$q+0UP(vhu1" x="463" y="387"></block>
<block type="answer4_img_changfengpo" id="Fu!lghc|QR(n08p0=-5P" x="737" y="387"></block>
<block type="question7" id="Dzb%nF6YLW#vvc7GJ_m)" x="-137" y="438">
<field name="NAME">4</field>
</block>
<block type="answer3_img_mashangxiang" id="pZVh#=kEiJz0}[cxLVzB" x="413" y="438"></block>
<block type="answer1_img_lumanman" id="Y!3yeL7TLa7e?aF3J.d:" x="1100" y="450"></block>
<block type="answer6_img_xunxunmi" id="T_,;SrZdM(djQ/JYF|HO" x="737" y="538"></block>
</xml>
<script src='poems.js'></script>
<button id="check" onclick="button_click()">
检查答案
</button>
<input type = "button" onclick = "btnRst_Click()" value = "标准答案" >
<br>
<p id="demo"></p>
<script>
var c=1;
function btnRst_Click() {
if(c) {document.getElementById('demo').innerHTML=("屈原——路漫漫其修远兮，吾将上下而求索——骚体诗 陶渊明——采菊东篱下，悠然见南山——山水田园诗派 岑参——马上相逢无纸笔，凭君传语报平安——边塞诗派 李白——长风破浪会有时，直挂云帆济沧海——浪漫主义诗派 杜甫——安得广厦千万间，大庇天下寒士俱欢颜——现实主义诗派 李清照——寻寻觅觅，冷冷清清，凄凄惨惨戚戚——婉约派 苏轼——大江东去浪淘尽，千古风流人物——豪放派");
window.c=0;
}
else {document.getElementById('demo').innerHTML="";window.c=1;}
}
</script>
</input>
<a href="https://baike.baidu.com/item/%E7%A6%BB%E9%AA%9A/1045?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《离骚》讲解</p></pre></a>
<a href="https://baike.baidu.com/item/%E9%A5%AE%E9%85%92%C2%B7%E7%BB%93%E5%BA%90%E5%9C%A8%E4%BA%BA%E5%A2%83/2041475?fromtitle=%E9%A5%AE%E9%85%92%E5%85%B6%E4%BA%94&fromid=2628924&fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《饮酒（其五）》讲解</p></pre></a>
<a href="https://baike.baidu.com/item/%E9%80%A2%E5%85%A5%E4%BA%AC%E4%BD%BF/2802929?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《逢入京使》讲解</p></pre></a>
<a href="https://baike.baidu.com/item/%E8%A1%8C%E8%B7%AF%E9%9A%BE%E4%B8%89%E9%A6%96%EF%BC%88%E5%85%B6%E4%B8%80%EF%BC%89/15885066?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《行路难（其一）》讲解</p></pre></a>
<a href="https://baike.baidu.com/item/%E8%8C%85%E5%B1%8B%E4%B8%BA%E7%A7%8B%E9%A3%8E%E6%89%80%E7%A0%B4%E6%AD%8C/2813957?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《茅屋为秋风所破歌》讲解</p></pre></a>
<a href="https://baike.baidu.com/item/%E5%A3%B0%E5%A3%B0%E6%85%A2%C2%B7%E5%AF%BB%E5%AF%BB%E8%A7%85%E8%A7%85/10912390?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《声声慢》讲解</p></pre></a>
<a href="https://baike.baidu.com/item/%E5%BF%B5%E5%A5%B4%E5%A8%87%C2%B7%E8%B5%A4%E5%A3%81%E6%80%80%E5%8F%A4/847153?fr=aladdin"><pre><p style="font-family:verdana;font-size:200%;color:red">《念奴娇.赤壁怀古》讲解</p></pre></a>
<script>
Blockly.JavaScript['answer1_img_lumanman'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#lun';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer1_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '1';
return code;
};
Blockly.JavaScript['question1'] = function(block) {
var value_question1_image = Blockly.JavaScript.valueToCode(block, 'question1_image', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question1_statement = Blockly.JavaScript.statementToCode(block, 'question1_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question1_image=='(#lun)'&&statements_question1_statement==1)
if(code){
return "yes";
}
else {return "no";}
};
Blockly.JavaScript['answer2_img_caijudong'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#cai';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer2_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '2';
return code;
};
Blockly.JavaScript['question3'] = function(block) {
var value_question3_img = Blockly.JavaScript.valueToCode(block, 'question3_img', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question3_statement = Blockly.JavaScript.statementToCode(block, 'question3_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question3_img=='(#ma)'&&statements_question3_statement==3)
if(code){
return "yes";
}
else {return "no"};
};
Blockly.JavaScript['question2'] = function(block) {
var value_question2_img = Blockly.JavaScript.valueToCode(block, 'question2_img', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question2_statement = Blockly.JavaScript.statementToCode(block, 'question2_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question2_img=='(#cai)'&&statements_question2_statement==2)
if(code){
return "yes";
}
else {return "no"};
};
Blockly.JavaScript['answer3_img_mashangxiang'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#ma';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer3_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '3';
return code;
};
Blockly.JavaScript['question4'] = function(block) {
var value_question4_img = Blockly.JavaScript.valueToCode(block, 'question4_img', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question4_statement = Blockly.JavaScript.statementToCode(block, 'question4_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question4_img=='(#chang)'&&statements_question4_statement==4)
if(code){
return "yes";
}
else {return "no"; }
};
Blockly.JavaScript['answer4_img_changfengpo'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#chang';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer4_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '4';
return code;
};
Blockly.JavaScript['question5'] = function(block) {
var value_question5_img = Blockly.JavaScript.valueToCode(block, 'question5_img', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question5_statement = Blockly.JavaScript.statementToCode(block, 'question5_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question5_img=='(#an)'&&statements_question5_statement==5)
if(code){
return "yes";
}
else {return "no"; }
};
Blockly.JavaScript['answer5_img_andeguang'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#an';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer5_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '5';
return code;
};
Blockly.JavaScript['question6'] = function(block) {
var value_question6_img = Blockly.JavaScript.valueToCode(block, 'question6_img', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question_statement = Blockly.JavaScript.statementToCode(block, 'question_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question6_img=='(#xun)'&&statements_question_statement==6)
if(code){
return "yes";
}
else {return "no";}
};
Blockly.JavaScript['answer6_img_xunxunmi'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#xun';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer6_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '6';
return code;
};
Blockly.JavaScript['question7'] = function(block) {
var value_question7_img = Blockly.JavaScript.valueToCode(block, 'question7_img', Blockly.JavaScript.ORDER_ATOMIC);
var dropdown_name = block.getFieldValue('NAME');
var statements_question7_statement = Blockly.JavaScript.statementToCode(block, 'question7_statement');
// TODO: Assemble JavaScript into code variable.
var code =(value_question7_img=='(#da)'&&statements_question7_statement==7)
if(code){
return "yes";
}
else {return "no";}
};
Blockly.JavaScript['answer7_img_dajiangdong'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '#da';
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
Blockly.JavaScript['answer7_statement'] = function(block) {
// TODO: Assemble JavaScript into code variable.
var code = '7';
return code;
};
function button_click(){
var code = Blockly.JavaScript.workspaceToCode(workspace);
var a=strCharPosition(code, 'yes')
if(code.match('no')== null){
alert("恭喜，全对");
}else{
alert("你共做对了"+a+'题'+" "+"做错了"+(7-a)+"题。继续加油哦！！！");
}
}
function strCharPosition(str, char) {
var pos;
var arr = [];
pos = str.indexOf(char);
while (pos > -1) {
arr.push(pos);
pos = str.indexOf(char, pos + 1);
}
return arr.length;
};
var bgAudio = new Audio();
bgAudio.setAttribute("src","wzsh.mp3");
bgAudio.loop = true;
bgAudio.play()
$(".btn").on("click",function(){
bgAudio.pause();
bgAudio.currentTime = 0;
})
</script>
<a href="poem_world_study.html" target="top">诗词小帮手</a>
</body>
</html>
poem.js代码
/* TODO: Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */
var toolbox = document.getElementById("toolbox");
var options = {
toolbox : toolbox,
collapse : false,
comments : false,
disable : false,
maxBlocks : Infinity,
trashcan : false,
horizontalLayout : false,
toolboxPosition : 'start',
css : true,
media : 'https://blockly-demo.appspot.com/static/media/',
rtl : false,
scrollbars : false,
sounds : true,
oneBasedIndex : true
};
/* Inject your workspace */
var workspace = Blockly.inject('blockDiv',options);
/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
var workspaceBlocks = document.getElementById("workspaceBlocks");
/* Load blocks to workspace. */
Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
资源
blockly master
链接:https://caiyun.139.com/m/i?1B5CwEa1vFXml提取码:S8pt
诗词游戏的文件夹
链接:https://caiyun.139.com/m/i?1B5CvGeFvrz1r
提取码:DsQR
1176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
