zoukankan      html  css  js  c++  java
  • 前端小游戏之拼图功夫熊猫

    1)效果图

    2)代码链接:

    3)体会:

      a)学会分析这个游戏的主要问题,也就是需要解决什么问题?可以得出首先是关于如何切图?如何让图片移动?如何只让与深色背景在一起的拼图块移动?

      b)对于第一个问题,切图可以使用background-image和background-position; 第二个问题可以通过设置CSS特性,我们通过设置每个图片position:absolute的,然后来相对其父元素移动,在这里要出现移动效果我们可以使用transfrom:translate来动态改变图块的位置,同时加上transition来实现动画效果,在实现中对于每个位置是用了class来设置,并在js中通过设置className特性;第三个问题可以先找出深色背景的相邻位置(上下左右)的集合,然后判断我们的点击的图块的位置是否在这个集合中,如果是的话就可以交换位置。

    升级版本:

      a)添加了选择图片和显示原图的功能,同时使用了jq和lodash。

      

      b)代码链接:https://github.com/sysuKinthon/Web2.0/tree/master/Web2.0/pandaV2

  • 相关阅读:
    go学习中的零散笔记
    git reset --hard与git reset --soft的区别
    php必学必会
    gdb 解core
    php学习
    高仿京东到家APP引导页炫酷动画效果
    RxHttp
    SVN回滚文件
    遍历枚举
    python3 多线程
  • 原文地址:https://www.cnblogs.com/kinthon/p/4976370.html
Copyright © 2011-2022 走看看