81款国学游戏开发教程第一篇（诗词拼图）

关于写81款国学游戏的初衷，一是为了传承国学，因为那是我们的根，也是未来人们可以创新和革命的根本。革命就是革新，革命的基础就是有命可以革。二是为了让那些想学习游戏开发的人提供参考，三是为了让自己写的游戏更有价值，我的目标就是写够81款和国学相关的游戏。四是计划写完81款就不再写游戏了。

闲话不说了，开始我们的国学游戏之旅，第一篇，我选择做拼图游戏，游戏算法不是太复杂，适合入门。古诗词也是我们的国粹，这两者结合应该不错，所以就开始诗词拼图创作。

先看游戏截图

游戏说明

将诗句随机打乱然后让玩家拼图，玩家可以点击五角星查看提示，也可以点击绿色喇叭听诗词朗读。拼图成功也可以进入下一首诗，当然也可以直接进入下一首诗词的拼图。当然你也可以配置其他类型的拼图，游戏代码是可拓展的。

游戏代码说明

游戏采用phaser开发，当然你也可以采用egret和layabox开发。换汤不换药，核心算法不变即可。

游戏代码展示

(function(){var game;
window.onload = function() {   var w=window.innerWidth;var h=window.innerHeight;var config=null;if(w>h){config = {"width": 640,"height": 1136,"renderer": Phaser.CANVAS,"parent": '',"resolution": 4};}else{config = {"width": w,"height": h,"renderer": Phaser.CANVAS,"parent": '',"resolution": 4};}game = new Phaser.Game(config);game.state.add("PlayGame", playGame);game.state.start("PlayGame");}var shiku=[{index:0,name:"登鹳雀楼",cd:"唐代",author:"王之涣",kind:5,sj:"白日依山尽黄河入海流欲穷千里目更上一层楼",audio_key:"dgql_mp3"},{index:1,name:"池上",cd:"唐代",author:"白居易",kind:5,sj:"小娃撑小艇偷采白莲回不解藏踪迹浮萍一道开",audio_key:"chishang_mp3"},{index:2,name:"静夜思",cd:"唐代",author:"李白",kind:5,sj:"床前明月光疑是地上霜举头望明月低头思故乡",audio_key:"jys_mp3"},{index:6,name:"江雪",cd:"唐代",author:"柳宗元",kind:5,sj:"千山鸟飞绝万径人踪灭孤舟蓑笠翁独钓寒江雪",audio_key:"jiangxue_mp3"},{index:7,name:"夏日绝句",cd:"宋代",author:"李清照",kind:5,sj:"生当作人杰死亦为鬼雄至今思项羽不肯过江东",audio_key:"xrjj_mp3"},{index:8,name:"春晓",cd:"唐代",author:"孟浩然",kind:5,sj:"春眠不觉晓处处闻啼鸟夜来风雨声花落知多少",audio_key:"chunxiao_mp3"},{index:3,name:"清明",cd:"唐代",author:"杜牧",kind:7,sj:"清明时节雨纷纷路上行人欲断魂借问酒家何处有牧童遥指杏花村",audio_key:"qingming_mp3"},{index:4,name:"咏柳",cd:"唐代",author:"贺知章",kind:7,sj:"碧玉妆成一树高万条垂下绿丝绦不知细叶谁裁出二月春风似剪刀",audio_key:"yongliu_mp3"},{index:5,name:"小池",cd:"宋代",author:"杨万里",kind:7,sj:"泉眼无声惜细流树阴照水爱晴柔小荷才露尖尖角早有蜻蜓立上头",audio_key:"xiaochi_mp3"},];var playGame = function(game){};
playGame.prototype = {preload: function(){game.load.image("ks", "res/ks.png");game.load.image("lb", "res/lb.png");game.load.image("lz", "res/lz.png");game.load.image("bg", "res/bg2.jpg");game.load.audio("dgql_mp3", "res/dgql.mp3");game.load.audio("jys_mp3", "res/jys.mp3");game.load.audio("yongliu_mp3","res/yongliu.mp3");game.load.audio("qingming_mp3", "res/qingming.mp3");game.load.audio("chishang_mp3", "res/chishang.mp3");game.load.audio("xiaochi_mp3", "res/xiaochi.mp3");game.load.audio("jiangxue_mp3", "res/jiangxue.mp3");game.load.audio("xrjj_mp3", "res/xrjj.mp3");game.load.audio("chunxiao_mp3", "res/chunxiao.mp3");game.stage.backgroundColor=0xffc773;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;},create: function(){this.game_init();var me=this;var ks=game.add.button(this.w/2,this.h/2,'ks',function(){ks.destroy();me.game_start();});ks.anchor.set(0.5,0.5);//ks.rotation=0.5*Math.PI;},game_start:function(){var me=this;this.sk_index=0;this.si=shiku[this.sk_index];//创建方块this.fk_gs=5;this.create_kk(this.fk_gs);game.input.onUp.add(function(){me.fx=me.fx_pd();me.can_mv(me.fx);},this);},create_kk:function(k){var k_w=this.w*0.9/k;this.border.clear();this.border.beginFill(0xfffffb,0.15);this.border.drawRoundedRect(this.w*0.05,this.h*0.05,this.w*0.9,this.h*0.9,10);this.border.endFill();this.fk_group.removeAll();this.sz=[];var jsq=0;;var sjz=this.get_sjz((k*k));for(var j=0;j<k;j++){var sza=[];for(var i=0;i<k;i++){var kk=game.make.graphics();kk.beginFill(0x123,0.55);kk.drawRect(0,0, k_w-2, k_w-2);kk.endFill();jsq=sjz[Math.floor(Math.random()*sjz.length)];if(jsq!=(k*k)){var fk=this.fk_group.create(game.world.centerX-(k/2)*k_w+i* k_w,j* k_w+this.h*0.1,kk.generateTexture());fk.name="fk"+i+"n"+j;var wz=game.make.text( k_w/4, k_w/4,""+jsq,{ font: "bold 10px Arial", fill: "#00ff00"});wz.anchor.set(0.5,0.5);fk.addChild(wz);var wzs=game.make.text( k_w/2, k_w/2,""+this.si.sj.charAt(jsq-1),{ font: "bold 20px Arial", fill: "#fff"});wzs.anchor.set(0.5,0.5);fk.addChild(wzs);fk.i=i;fk.j=j;fk.val=jsq;sza.push(jsq);}else{sza.push(0);}sjz.splice(sjz.indexOf(jsq),1)}this.sz.push(sza);}jsq=null;sjz=null;var me=this;this.psp=null;this.get_szm();//为判断胜负做准备this.fk_group.setAll('inputEnabled', true);  this.fk_group.callAll('events.onInputDown.add', 'events.onInputDown', function(e){me.psp=e;});var name=game.make.text(this.w/2,this.h*0.05,this.si.name,{ font: "bold 22px Arial", fill: "#fff"});name.anchor.set(0.5,0.5);this.fk_group.addChild(name);var author=game.make.text(this.w/2,k_w*(this.fk_gs+1.8),this.si.cd+":"+this.si.author,{ font: "bold 16px Arial", fill: "#fff"});author.anchor.set(0.5,0.5);this.fk_group.addChild(author);//语音this.bf_mp3=game.add.audio(this.si.audio_key);var lb=game.make.button(this.w*0.8,this.h*0.05,'lb',function(){if(!me.bf_mp3.isPlaying){me.bf_mp3.play();lb.tint=0xff0000;me.bf_mp3.onStop.add(function(){lb.tint=0x00ff00;},me);}});lb.tint=0x00ff00lb.anchor.set(0.5,0.5);lb.scale.set(3,3);this.fk_group.addChild(lb);//作者//文字var tip=game.make.button(this.w*0.2,this.h*0.05,'lz',function(){if(me.can_dj){me.draw_sj();me.can_dj=false;}});tip.anchor.set(0.5,0.5);tip.scale.set(3,3);this.fk_group.addChild(tip);//作者var pre_t=game.make.text(this.w*0.2,this.h*0.9,"上一首",{font: "bold 18px Arial", fill: "#fff"});pre_t.anchor.set(0.5,0.5);pre_t.inputEnabled=true;pre_t.events.onInputDown.add(function(){me.pre_lv();},this);var next_t=game.make.text(this.w*0.8,this.h*0.9,"下一首",{font: "bold 18px Arial", fill: "#fff"});next_t.anchor.set(0.5,0.5);next_t.inputEnabled=true;next_t.events.onInputDown.add(function(){me.next_lv();},this);this.fk_group.addChild(pre_t);  this.fk_group.addChild(next_t);},get_sjz:function(a){var sj=[];for(var i=1;i<=a;i++){ sj.push(i);}sj.sort(function(a, b){ return Math.random() > 0.5 ? -1 : 1;});return sj; },pd_win:function(){if(this.yssj.toString()==this.sz.toString()){this.next_lv();return true;}else{return false;}},get_szm:function(){this.yssj=[];var jsq=0;for(var i=0;i<this.fk_gs;i++){var sza=[];for(var j=0;j<this.fk_gs;j++){jsq++;if(jsq!=(this.fk_gs*this.fk_gs)){sza.push(jsq);}else{sza.push(0);}}this.yssj.push(sza);}jsq=null;},next_lv:function(){//下一关if(this.sk_index<shiku.length){this.sk_index++;this.si=shiku[this.sk_index];this.fk_gs=this.si.kind;this.create_kk(this.fk_gs);}else{this.sk_index=0;this.si=shiku[this.sk_index];this.fk_gs=this.si.kind;this.create_kk(this.fk_gs);}},pre_lv:function(){//上一关if(this.sk_index>0){this.sk_index--;this.si=shiku[this.sk_index];this.fk_gs=this.si.kind;this.create_kk(this.fk_gs);}else{this.sk_index=shiku.length-1;this.si=shiku[this.sk_index];this.fk_gs=this.si.kind;this.create_kk(this.fk_gs);}},fg_zfc:function(str,num){if(str == null || str == undefined) return null;if(!(/^[0-9]*[1-9][0-9]*$/.test(num))) return null;var array = new Array();var len = str.length;for(var i=0;i<(len/num);i++){if((i+1)*num > len){array.push(str.substring(i*num,len));}else{array.push(str.substring(i*num,(i+1)*num));}}return array;},draw_sj:function(){var me=this;var gra=game.make.graphics();gra.beginFill(0xffffff,0.95);gra.drawRoundedRect(0,0,this.w*0.9,this.h*0.8,20);var namea=game.make.text(0,-this.h*0.3,this.si.name,{ font: "bold 25px Arial", fill: "#000000"})namea.anchor.set(0.5,0.5);var nb=game.make.text(0,-this.h*0.3+50,this.si.cd+":"+this.si.author,{ font: "bold 15px Arial", fill: "green"})nb.anchor.set(0.5,0.5);var ju=this.fg_zfc(this.si.sj,this.si.kind);var sjy="";for(var i=0;i<ju.length;i++){sjy+=(ju[i]+"\n");}var siju=game.make.text(0,-this.h*0.3+150,sjy,{ font: "bold 20px Arial", fill: "orange"});siju.anchor.set(0.5,0.5);var bt=game.make.button(this.w/2,this.h/2,gra.generateTexture(),function(){bt.destroy(true);me.can_dj=true;});bt.anchor.set(0.5,0.5);bt.addChild(namea);bt.addChild(nb);bt.addChild(siju);this.fk_group.addChild(bt);},game_init:function(){this.w=game.world.width;this.h=game.world.height;this.bg=game.add.sprite(this.w/2,this.h/2,'bg');this.bg.rotation=0.5*Math.PI;this.bg.anchor.set(0.5,0.5);this.bg.width=this.h*4;this.bg.height=this.w*4;this.border=game.add.graphics();this.fk_group=game.add.group();this.fx=null;this.bf_mp3=null;this.can_dj=true;},fx_pd:function(){var x =game.input.activePointer.position.x -game.input.activePointer.positionDown.x;var y =game.input.activePointer.position.y -game.input.activePointer.positionDown.ythis.du=Math.atan2(x,y);x=null;y=null;if(this.du>-Math.PI/4&&this.du<=Math.PI/4){return "down"}else if(this.du>Math.PI/4&&this.du<=Math.PI*3/4){return "right"}else if(this.du>Math.PI*3/4&&this.du<=Math.PI){return "up"}else if(this.du>-Math.PI&&this.du<=-Math.PI*3/4){return "up"}else if(this.du>-Math.PI*3/4&&this.du<=-Math.PI/4){return "left"}},can_mv:function(fx){if(this.psp){if(fx=="down"){if(this.have_k(this.psp.j+1,this.psp.i)){console.log("can down");var j=this.psp.j;var i=this.psp.i;var val=this.psp.val;this.sz[j][i]=0;this.sz[j+1][i]=val;var p=this.fk_group.getByName("fk"+i+"n"+j);if(p){p.y+=this.w*0.9/this.fk_gs;p.j+=1;p.name="fk"+i+"n"+(j+1);}i=null;j=null;}}else if(fx=="up"){if(this.have_k(this.psp.j-1,this.psp.i)){console.log("can up");var j=this.psp.j;var i=this.psp.i;var val=this.psp.val;this.sz[j][i]=0;this.sz[j-1][i]=val;var p=this.fk_group.getByName("fk"+i+"n"+j);if(p){p.y+=-this.w*0.9/this.fk_gs;p.j+=-1;p.name="fk"+i+"n"+(j-1);}i=null;j=null;}}else if(fx=="left"){if(this.have_k(this.psp.j,this.psp.i-1)){console.log("can left");var j=this.psp.j;var i=this.psp.i;var val=this.psp.val;this.sz[j][i]=0;this.sz[j][i-1]=val;var p=this.fk_group.getByName("fk"+i+"n"+j);if(p){p.x+=-this.w*0.9/this.fk_gs;p.i+=-1;p.name="fk"+(i-1)+"n"+j;}i=null;j=null;}}else if(fx=="right"){if(this.have_k(this.psp.j,this.psp.i+1)){console.log("can right");var j=this.psp.j;var i=this.psp.i;var val=this.psp.val;this.sz[j][i]=0;this.sz[j][i+1]=val;var p=this.fk_group.getByName("fk"+i+"n"+j);if(p){p.x+=this.w*0.9/this.fk_gs;p.i+=1;p.name="fk"+(i+1)+"n"+j;}i=null;j=null;}}this.pd_win();}},have_k:function(j,i){if(i>=0&&i<this.fk_gs&&j>=0&&j<this.fk_gs){if(this.sz[j][i]==0){return true}else{return false;}}else {return false;}}}})()

游戏代码量不是太大，代码结构开始使用的是闭包，(function(){ 代码 })()当然也可以不用，但是如果遇到有数据交互的，为了数据安全必须采用，闭包的使用是因为js没有类似Java的package的概念，如果没有闭包的话，你定义的变量，可以在控制台上访问修改，特别不安全。

游戏结构比较简单 preload依旧是加载资源，create中创建游戏，重点关注fx_pd这个方法，里边主要是手势滑动判断的算法。

还有就是group的callAll的使用。可以让group内所有的sprite都被调用。我们拼图的所有图块都放在group中，图块都有编号。

游戏中将诗句分割的方法重点看一下 fg_zfc。对于学习js很有帮助。欢迎留言或探讨，为国学游戏开发助力。

81款国学游戏开发教程第一篇（诗词拼图）相关推荐

81款国学游戏开发教程第二篇（飞刀问答）
本篇讲述的是将飞刀游戏和问答游戏结合到一块的一款国学游戏.本文要注意的知识点有粒子效果的使用以及文字格式的使用,比如文字左对齐和换行的代码,要多多留心. 先看截图下面是代码 (function(){ ...
PPC扑克牌游戏开发实录第一篇之全屏
前言一些资格较老的CE软件开发师应该还记得CE2.11版的系统界面吧.那时,系统界面比较忠实于PC版的WINDOWS系统界面,导航栏在最下方,"开始"菜单在导航栏的左侧, ...
EnjoyingSoft之Mule ESB开发教程第二篇：Mule ESB基本概念
目录 1. 使用Anypoint Studio开发 2. Mule ESB Application Structure - Mule ESB应用程序结构 3. Mule ESB Application ...
微信公众号开发入门教程第一篇
微信公众号开发入门教程第一篇关键字:微信公众平台开发作者:方倍工作室在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/ ...
Python 打字小游戏开发，来体验不一样的打字游戏乐趣（第一篇）
Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第一篇) 前言游戏素材准备游戏项目结构项目里面的类说明 Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第二篇) Python ...
2D平台类游戏开发教程（翻译）
这是一篇实现2D平台类游戏的技术指导文章,原文地址:http://higherorderfun.com/blog/2012/05/20/the-guide-to-implementing-2d-pla ...
Cocos2D手机游戏开发之优化篇
Cocos2D手机游戏开发之优化篇在这个手机游戏盛行已久的年代,一款产品想要博得更多用户的喜爱就要在细节上做得更加到位.而游戏的优化在这里面起到了非常关键的作用.试想下,一款画面和玩法都深受用户喜欢 ...
游戏开发心得——书籍篇——《游戏引擎框架》-导论
游戏开发心得--书籍篇--<游戏引擎框架>-导论 FOR THE SIGMA FOR THE GTINDER FOR THE ROBOMASTER 简介: 学习<游戏引擎框架> ...
游戏开发心得——书籍篇——《游戏引擎框架》-专业工具
游戏开发心得--书籍篇--<游戏引擎框架>-专业工具 FOR THE SIGMA FOR THE GTINDER FOR THE ROBOMASTER 简介: 学习<游戏引擎框架&g ...

81款国学游戏开发教程第一篇（诗词拼图）

81款国学游戏开发教程第一篇（诗词拼图）相关推荐

最新文章

热门文章