请叫我安利小能手

Leave a comment

前天做了消消乐的游戏,背景音乐暗戳戳放上了水月洞天的bgm安利,其实也没有想到安利那么久远,在找2分以内合适时长的纯音乐时,就这么映入眼帘了

然后,我的日饭朋友因为玩了太多遍,bgm在脑海中盘旋不去,主动跑来问我这是什么bgm!?我么当然是要安利了,说这剧近十年最佳不为过吧,毕竟陈情令故事虽好,武打真是辣眼睛。于是人家跑到油管看水月洞天了,已经看到第二集了,噗

请叫我安利小能手,谢谢。

之前说要做抽卡模拟系统,是项大工程。昨天捣鼓了一下,发现,意外的简单!?技术难题已经克服,我现在唯一要做的就是:做立绘,做出场动画。

那么问题来了,为数众多的R卡怎么办?想到两个法子。

1,把剧里各种路人角色一并抠了,做立绘。包括江澄,师姐,范闲,王爷的小跟班,etc  收回前言,不可。我现在看其他人的剧还是看不下去,哪怕水月洞天都要靠过往回忆支撑。我现在真没工夫给其他人眼神,尤其是,我难道还要给蓝忘机抠图?哦,不可能,绝无可能。我还不信光靠他本人凑不出r卡来,唯一可以剪的,大概只有绵绵。

2,学恋与,叠叠乐,给王爷做个红衣版,蓝衣版,紫衣版,绿衣版。。。

最后决定还是采取1方案。一来,我毕竟用的是阴阳师的抽卡系统,不是恋与的。2来,路人角色先抠了,将来其他游戏(看图猜谜系列)一定用得上,有备无患。

本来还想做导航呢,得了,把这个做了再说吧。我现在觉得以往砸了那么多648的自己宛如智障,我不会自己做卡,自己抽吗?

【自制小游戏】肖战历年角色消消乐

Leave a comment

这个可以和最早那个历年角色连连看配成对

我本来想继续做导航来着,结果被我发现一个绝佳可供改造的消消乐游戏,那当然是扒了代码拿来用了

游戏链接:戳这里

捣鼓了一天终于完工。横版游戏,手机党请自觉横过来。

消消乐玩法:选中图标可移动位置,横排or竖行 相同图标大于等于三个可消除,视分数决定各角色排名顺序(咦?)

最后选出第一名就是你最爱的角色啦

我连标题页都给做了,标题就叫“谁是你的最爱”(噗)

目前一共出场7名人物

虽然号称历代角色,但其实混入了两个现代人物凑数(我姑且一个命名演员,一个命名歌手

等以后唐三和顾魏出来再加入吧,一次最多出场6名,但后台可以无限加人物。

背景音乐用了水月洞天的bgm(暴露年龄)

游戏时长故意设置了100秒,正好把音乐听完。

一切大功告成后,我用手机试了一下,发现一个悲剧,PC端是没什么问题,可手机无法拖曳??

。。。遇事不决查百度

原来是jQuery UI draggable不适配移动端

那就没有解决办法了么?怎么可能

发动我引以为傲的搜索大法查找,虽然有诸如jquery.ui.touch-punch所谓的插件,其实根本没什么用,最后还是靠代码解决,代码万岁

这里也一并记录一下

  1. // This is a fix for mobile devices 
  2.   
  3. /iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) { 
  4.   
  5. var proto =  $.ui.mouse.prototype, 
  6. _mouseInit = proto._mouseInit; 
  7.   
  8. $.extend( proto, { 
  9.     _mouseInit: function() { 
  10.         this.element 
  11.         .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) ); 
  12.         _mouseInit.apply( this, arguments ); 
  13.     }, 
  14.   
  15.     _touchStart: function( event ) { 
  16.          this.element 
  17.         .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) ) 
  18.         .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) ); 
  19.   
  20.         this._modifyEvent( event ); 
  21.   
  22.         $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse 
  23.         this._mouseDown( event ); 
  24.   
  25.         //return false;            
  26.     }, 
  27.   
  28.     _touchMove: function( event ) { 
  29.         this._modifyEvent( event ); 
  30.         this._mouseMove( event );    
  31.     }, 
  32.   
  33.     _touchEnd: function( event ) { 
  34.         this.element 
  35.         .unbind( "touchmove." + this.widgetName ) 
  36.         .unbind( "touchend." + this.widgetName ); 
  37.         this._mouseUp( event );  
  38.     }, 
  39.   
  40.     _modifyEvent: function( event ) { 
  41.         event.which = 1
  42.         var target = event.originalEvent.targetTouches[0]; 
  43.         event.pageX = target.clientX; 
  44.         event.pageY = target.clientY; 
  45.     } 
  46.   
  47. }); 
  48.   
  49. })( jQuery ); 

于是手机端也可以玩了,我可真是搜索小天才

迄今为止做过的游戏:

1.历年角色连连看

2.硬核拼图

3.竞速拼图

4.看图猜谜

5.趣味问答

6.神经衰弱

7.打鼹鼠(这个没用他的图,我只是纯粹不爽新浪,遂做了个大眼怪版本,没事上去锤两下= =)

加上这个消消乐就是第八个了,开的新坑越来越多

能想到的小游戏都囊括了吧。。大概只剩下抽王八了吧(喂)

不可思议,我明明离开微博才半个多月,如果不离开那里,这些我根本想都没想过去做。。。

人生真是不可思议

【自制小游戏】神经衰弱初级篇

Leave a comment

之前还说要做马里奥呢,可能要花很久呢。事实证明,找对模板方法,分分钟的事。

我感觉可以把能想到的小游戏都给做了。我连阴阳师的抽卡界面都下载好了,ssr的语音都想好了。不过这个是个大工程,以后再说。

先丢个小游戏上来。

游戏链接:戳这里

选图和icon直接沿用以前做过的游戏里的素材,循环利用,挺好的

这个是最简单的版本,回头再做个可调难度的,最高翻转100枚,真・神经衰弱

导航界面

Leave a comment

其实wordpress有一个导航栏来着。。。就是杵在最上面那一行。但是我嫌弃它功能不够,于是另做了一个

那么问题来了,我明明可以换个模板

哦不,还有什么模板可以拥有如此大的版头让我放图?坚决不换!

新捣鼓了一个专门的导航界面,可是在如何“点击左面菜单,跳转至右边框架内显示内容”上费了一番功夫

在查找了div,css,js,ajax等诸多方法后,我最终决定,还是用iframe省事得了

事实证明,即便你没上过什么java课,只要掌握基本搜索能力,没有什么是办不到的!

放一下我辛苦搜寻的代码,全部在html页面修改即可

首先在</head>前面添加这一段

  1. <script type="text/javascript">   
  2. function showConent(url) {   
  3.     var p = document.getElementById("right_content");   
  4.     p.src=url;   
  5. }   
  6. </script> 

左侧菜单栏,链接url地址更改为

  1. <a href="javascript:void(0);" onmousedown="showConent('url')"></a> 

右侧显示内容区,更改如下

  1. <div class="body_right"> 
  2. <iframe src=""  id="right_content" scrolling="yes"  style="width:100%;height:100%"></iframe>  
  3.    </div> 

大功告成!

好了,我继续捣鼓去了

自制小游戏【看图猜谜系列】陈情令第一话

Leave a comment

终于完工了,做的时候是很快乐,但测试的时候很痛苦

一不留神一个文件命名错了,排查就花了N久的时间。

虽然细节有些地方还待改进,不过我已经懒得再改了。修正等到下一话再说吧。我也懒得再做日文版了,直接附在中文后面了。

铛铛铛~~目前为止的最高杰作出炉了!

游戏链接:戳这里

基本构思就是每一话中,截取一些片段猜谜,魏无羡中心向。其他人?不好意思,我现在不想给其他任何人一个眼神。

图片比较多,开头需要loading一会

一话设置十问,基本一话就耗掉我6M容量=v=,图片40张以上。。。如果是50话,那就是300M,2000张图。。OMG,这个先不去想它了。

话又说回来,这个就和做菜一样。做要几小时,吃光几分钟。最大的乐趣,果然还是进行中的时候啊。

介绍一下背景音乐:幻想水浒传5的Harmony

暗戳戳的安利一下,不喜欢可以直接右上角音乐符号关掉。

愿你涅槃重生,归来仍是肖战

我可能只是为了打这段话,才做的这个游戏。

以上