用blockly制作诗词学习游戏

文章目录

用blockly制作诗词学习游戏
- 引言
- 效果预览
- 制作流程
- - 具体效果实现原理
  - - 一打开网页音乐就循环播放的原理
    - 检查按钮工作原理
    - "标准答案"按钮的实现原理
- 代码展示
- 资源
- - blockly master
  - 诗词游戏的文件夹
  - 推荐关于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

用blockly制作诗词学习游戏相关推荐

制作滚球游戏学习Unity3D
从创建项目开始创建一个项目打开unity,在Projects中可以查看当前的本地项目或者云端项目,点击New project或者右上角的New都可以新建项目. 然后在1处填写创建项目的名称,2处选 ...
网络上游戏制作相关学习站点的网址
棋牌类游戏客户端结构分析编辑 2008-04-18 09:57:00 标签:游戏大厅结构 it 在这里所讨论的棋牌类游戏并不是所有的平台类型,而是通常的表现形式即游戏广场-游戏大厅-游戏房间的类型 ...
网络上游戏制作相关学习站点的网址!
[转载] 服务器端编程类: 1. http://www.kegel.com/c10k.html 说明:一个介绍各种网络服务端编程方法的网页 2. http://www-cs-students.stan ...
网络上游戏制作相关学习站点的网址! 1
[转载] 服务器端编程类: 1.http://www.kegel.com/c10k.html 说明:一个介绍各种网络服务端编程方法的网页 2.http://www-cs-students.stanfo ...
python应用学习（六）——tkinter制作连连看小游戏
python 制作连连看小游戏前言一.准备二.游戏简单介绍 1.游戏规则 2.游戏设计所需的图片库: 三.游戏设计 I.创建Point点类 II.定义函数 III.游戏的主函数逻辑 IV.完整代 ...
【UE5实战】菜猫如我竟也能做游戏~保龄球小游戏手把手制作—UE5学习笔记(15)
前言今天开始跟着教程,制作我的第一个UE5游戏. 游戏的原教程引用自一本教程书,这本书会在这篇教程完成之后介绍给大家. 游戏十分简单,但是我在原教程看完之后还是有些蒙圈,因为讲解的方式比较程序化,难 ...
[python教程入门学习]使用Python六步制作小鸟管道游戏（附源码）
现在用Python来制作游戏越来越方便,虽然某些方面有所限制.但是利用Pygame工具包基本能制作所有的2D游戏在制作的同时对游戏的理解也会更加深刻,因为本质上都是对图片的定位和图片碰撞的判断,从而 ...
虚幻4学习笔记（8）动手制作一个小游戏
动手制作一个小游戏新节点介绍前期准备搭建场景门蓝图灯蓝图创建关卡蓝图 B站UP谌嘉诚课程:https://www.bilibili.com/video/BV164411Y732 新节点介绍 ...
python猜数字1001untitled_如何利用Matlab GUI制作猜数字游戏
第二堂课布置了一个Mission Impossible:如何利用Matlab GUI制作猜数字游戏这个任务对很多人来说会非常困难,首先要面对的是 Matlab GUI的机制,这是完全未知的机制,在面 ...

用blockly制作诗词学习游戏

用blockly制作诗词学习游戏

文章目录

引言

效果预览

制作流程

具体效果实现原理

一打开网页音乐就循环播放的原理

检查按钮工作原理

"标准答案"按钮的实现原理

代码展示

资源

blockly master

诗词游戏的文件夹

推荐关于blockly的博客

用blockly制作诗词学习游戏相关推荐

最新文章

热门文章