分享创作 如何写个拼图游戏

熊熊燃烧的叉烧包 · 2019年02月27日 · 88 次阅读
本帖已被设为精华帖!

大家好,我还是包子。第二次发社区,还请多多指教。

前言

死线前摸鱼是第一生产力。——by 包子

为了增进解密游戏的乐趣,我想到了做个拼图游戏。就是额,沿途按线索搜集碎片,然后拼出下一个线索。

是不是很无聊?

但是当你连续打了24小时的Python后!你会觉得js是那!么!可!爱!

抱歉我遇到bug就会脾气暴躁,这两年越来越暴躁了。

这几次做的几个游戏,都是在为最后的解密游戏做准备。大概还要做7个左右的js解密,其他我都丢给剧情了。

游戏链接:拼图游戏——by 包子 (我懒得创建新游戏了,直接拿章节玩玩好了)

我很懒,不喜欢仔仔细细排版,你们随便看看就好。排版和UI图标设计都是忽悠甲方的,设计背后的代码逻辑才是王道!

废话不多说直接上框架

p.s. 我自己没有服务器,所有就传到了lof上,然后打开原图地址,你就可以拥有一个速度不快的免费在线服务器,图片小的话,加载很快的。

阿拉框架依然很简单,比贪吃蛇还简单:

  • 把一个图裁成9份,再加一份原图
  • 用蝶梦做好的按钮+表格,输出图片
  • 一个随机打乱数组的方法 (参考:JS随机打乱数组的方法小结
  • 一个比较函数,几个变量存一下状态

好了,没了就这么多。在编辑器里一共写了23行。

废话不多说直接上代码

自己看注释哈,我就不在框外叨叨了。'''用的时候,请删掉所有注释!'''

=: // 九张图片地址,我本来都缩图了,但还是太大,好在网易可以自由调缩略图大小,我就调了个60px
=: var picture = ['http://imglf4.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xUlNJbWVTMTlFUEFvUDJXelQ3Z1NDcmw2UWViMzJvYmNRPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf6.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xWWhOWUdKSkpnRUYxa0IzN2kreEtNTm1zd05RNHEzYnlnPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf3.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xUU9mc2tOVVYzYnRVQUNiUGl6eEZrWWhqandvMEJRY2JBPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf5.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xVlBEclVXSHdRZXU3eUU2YjJSWTU1cHVrNW1paUs5Umt3PT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf3.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xWWg1dk1KL3J6UkNjV2dod2FaSFdWTU9oQ2J5SWNVRWtRPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf4.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xYjZ0R0NUVFc3VGgvMkcyZ1J0ajlmUk1ZbWJTQXhOdk5RPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf5.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xY0ovOTFocWtpd3BaUUJKZmFjUWZHWFE4anRpUlJya0JBPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf3.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xV0EyaXo3RVFVNndRR0Z1cElJc0lzMFRoNzltU1F6TFRBPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg','http://imglf3.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xZHNSM01lZDVncXhBdUtYTGRvU0xPNXBQNVdmL1M3UkVnPT0.jpg?imageView&thumbnail=60x0&quality=96&stripmeta=0&type=jpg']

=: function randomsort(a, b) {    return Math.random()>.5 ? -1 : 1; } // 随机打乱数组,请参考框架里的链接

=: function compare(a, b) {    for (var i = 0; i < a.length; ++i) {     if (a[i] !== b[i]) {return false;}   } return true;} // 比较打乱前后的两个数组是否相同

=: var index = [0,1,2,3,4,5,6,7,8]; var move = [0,1,2,3,4,5,6,7,8]; var first = -1; var second = -1; // 设置正确顺序,用于判断;设置需要被打乱的数组;设置需要交换和被交换的图片位置,初始化-1

=: while (compare(index, move)) {move.sort(randomsort);} // 随机打乱数组,如果打乱后的数组还是跟原来一样,那么继续打,直到它打乱为止

=: function exchange(data) {if (first == -1) { first = parseInt(data.replace("gtBtn",""));} else { second = parseInt(data.replace("gtBtn","")); var temp = move[first]; move[first] = move[second]; move[second] = temp; first = -1; second = -1;}} // 交换图片数组,其实只是修改了move的值。当要换的图片为-1时,设置被点的图片为需要交换的图片;当已经选好需要交换的图片时,把单击取到的图片id给second,然后move数组,在这俩index上的值。换好后,初始化first和second。

请点击交换以下碎片,使图片成为一张完整的图案:

[开头]
=: // 一个无聊的表格,可以直接用,二哈。想进一步了解的话,可以去w3school上学HTML5

<table align = "center"><tr><th><span id="gtBtn0" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_0" style="padding: 1px;"><img src=(j)picture[move[0]](/j)></a></span></th><th><span id="gtBtn1" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_1" style="padding: 1px;"><img src=(j)picture[move[1]](/j)></a></span></th><th><span id="gtBtn2" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_2" style="padding: 1px;"><img src=(j)picture[move[2]](/j)></a></a></th></tr><tr><th><span id="gtBtn3" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_3" style="padding: 1px;"><img src=(j)picture[move[3]](/j)></a></span></th><th><span id="gtBtn4" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_4" style="padding: 1px;"><img src=(j)picture[move[4]](/j)></a></span></th><th><span id="gtBtn5" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_5" style="padding: 1px;"><img src=(j)picture[move[5]](/j)></a></a></th></tr><tr><th><span id="gtBtn6" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_6" style="padding: 1px;"><img src=(j)picture[move[6]](/j)></a></span></th><th><span id="gtBtn7" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_7" style="padding: 1px;"><img src=(j)picture[move[7]](/j)></a></span></th><th><span id="gtBtn8" data-tp="b" onclick="exchange(this.id)"><a class="btn btn-default" id="b_8" style="padding: 1px;"><img src=(j)picture[move[8]](/j)></a></a></th></tr></table>

=: if(compare(index, move)) {game_jumpto("结束");} else {game_jumpto("开头");} // 如果当前9张图片,已经移动到它们本来的位置,那么跳至游戏结束。

[结束]
(m)http://imglf6.nosdn0.126.net/img/UEZVTWtYOFhUWlRjbTRTS1JqOC9xYmJqb3hwRUkzcTBiSmMrOFhlUjlrQTRaakwxSHYyTlhnPT0.jpg?imageView&thumbnail=300x0&quality=96&stripmeta=0&type=jpg(/m) // 第十张完整图片,打印出来,结束游戏

恭喜您成功完成拼图!

总结

好了,就这些。希望可以帮到你!我真的真的要刷题去了!不能再再摸鱼了!再摸鱼就打死自己!

祝玩得愉快~

共收到 0 条回复
adminer 将本帖设为了精华贴 02月27日 18:55
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册