[swift实战入门]手把手教你编写2048(一)
来源:互联网 发布:wm软件下载 编辑:程序博客网 时间:2024/04/29 12:08
苹果设备越来越普及,拿着个手机就想捣鼓点啥,于是乎就有了这个系列,会一步一步教大家学习swift编程,学会自己做一个自己的app,github地址:https://github.com/scarlettbai/2048.git。
这篇文章需要大家了解一些swift基本语法,这里注重实践,就不讲太多基本语法了,不懂的大家可以Google一下,swift开发环境也很简单,直接在mac上安装一个XCode即可,首先我们来看下最终我们要实现的效果:
当然你也可以将其中的数字换成文字给你女票安手机上,还可以给个小惊喜,效果如下:
从上图可以看出来,最终效果其实主要分为计分板和游戏面板,游戏面板里是一个背景和很多的小块,小块中间有间隔,今天先教大家编写出游戏面板。
首先新建一个swift工程,这里就不多说了,然后新建文件NumbertailGameController.swift,这个文件主要处理游戏的初始化等逻辑
新建一个NumbertailGameController类继承UIViewController,其中包含如下属性:
class NumbertailGameController : UIViewController { var demension : Int //2048游戏中每行每列含有多少个块 var threshold : Int //最高分数,判断输赢时使用,今天暂时不会用到,预留 let boardWidth: CGFloat = 260.0 //游戏区域的长度和高度 let thinPadding: CGFloat = 3.0 //游戏区里面小块间的间距 let viewPadding: CGFloat = 10.0 //计分板和游戏区块的间距 let verticalViewOffset: CGFloat = 0.0 //一个初始化属性,后面会有地方用到}
接下来给NumbertailGameController添加init方法
init(demension d : Int , threshold t : Int) { demension = d < 2 ? 2 : d threshold = t < 8 ? 8 : t super.init(nibName: nil, bundle: nil) view.backgroundColor = UIColor(red : 0xE6/255, green : 0xE2/255, blue : 0xD4/255, alpha : 1)}
这里主要是限制了最少两个块以及最低分数为8分,另外设置了整个面板的背景色,关于颜色,大家可以取自己喜欢的色和直接换掉上面的十六进制数值即可。
接下来我们在Main.storyboard里添加一个开始游戏的按钮,然后在默认的ViewController.swift中添加如下响应方法:
@IBAction func setupGame(sender: UIButton) { let game = NumbertailGameController(demension: 4 , threshold: 2048) self.presentViewController(game, animated: true , completion: nil)}
然后我们点击XCode中的运行,就可以看到效果了,点击开始游戏,效果如下:
大家可以看到此处出现了背景色为我们设置的背景色的视图,下面我们来添加游戏区块:
新建GamebordView.swift文件,这个文件就是我们游戏区块的视图文件,在文件中添加如下代码:
import UIKitclass GamebordView : UIView { var demension : Int //每行(列)区块个数 var tileWidth : CGFloat //每个小块的宽度 var tilePadding : CGFloat //每个小块间的间距 //初始化,其中backgroundColor是游戏区块的背景色,foregroundColor是小块的颜色 init(demension d : Int, titleWidth width : CGFloat, titlePadding padding : CGFloat, backgroundColor : UIColor, foregroundColor : UIColor ) { demension = d tileWidth = width tilePadding = padding let totalWidth = tilePadding + CGFloat(demension)*(tilePadding + tileWidth) super.init(frame : CGRectMake(0, 0, totalWidth, totalWidth)) self.backgroundColor = backgroundColor }}
在这里我们是创建了一个游戏区块的模板,接下来我们在游戏的主控制器NumbertailGameController中添加如下代码来初始化一个游戏区块对象并添加到我们的面板中:
override func viewDidLoad() { super.viewDidLoad() setupGame()}func setupGame(){ let viewWidth = view.bounds.size.width let viewHeight = view.bounds.size.height //获取游戏区域左上角那个点的x坐标 func xposition2Center(view v : UIView) -> CGFloat{ let vWidth = v.bounds.size.width return 0.5*(viewWidth - vWidth) } //获取游戏区域左上角那个点的y坐标 func yposition2Center(order : Int , views : [UIView]) -> CGFloat { assert(views.count > 0) let totalViewHeigth = CGFloat(views.count - 1)*viewPadding + views.map({$0.bounds.size.height}).reduce(verticalViewOffset, combine: {$0 + $1}) let firstY = 0.5*(viewHeight - totalViewHeigth) var acc : CGFloat = 0 for i in 0..<order{ acc += viewPadding + views[i].bounds.size.height } return acc + firstY } //获取具体每一个区块的边长,即:(游戏区块长度-间隙总和)/块数 let width = (boardWidth - thinPadding*CGFloat(demension + 1))/CGFloat(demension) //初始化一个游戏区块对象 let gamebord = GamebordView( demension : demension, titleWidth: width, titlePadding: thinPadding, backgroundColor: UIColor(red : 0x90/255, green : 0x8D/255, blue : 0x80/255, alpha : 1), foregroundColor:UIColor(red : 0xF9/255, green : 0xF9/255, blue : 0xE3/255, alpha : 0.5) ) //现在面板中所有的视图对象,目前只有游戏区块,后续加入计分板 let views = [gamebord] //设置游戏区块在整个面板中的的绝对位置,即左上角第一个点 var f = gamebord.frame f.origin.x = xposition2Center(view: gamebord) f.origin.y = yposition2Center(0, views: views) gamebord.frame = f //将游戏对象加入当前面板中 view.addSubview(gamebord)}
上面的代码中注释已经很详细了,大家可能疑问的就是x和y坐标的计算,x坐标很简单,其实就是:当前面板总宽度减去游戏区块宽度,剩下的就是空余的宽度,再除以2就是x点的坐标了。y坐标稍微复杂点在于,以后会加入计分面板,所以他的值应该是:当前面板总高度减去所有视图的总高度除以2然后在加上在游戏区块之前的视图的总高度,就是游戏区域的y坐标值。
其他地方都很简单,其中的foregroundColor是注释中有,是下面给游戏区块添加默认小方块时用的颜色。
我们来运行看效果:
可以看到面板已经有了,接下来我们要给面板中加入初始化的半透明小方块,我们在GamebordView中添加如下方法:
func setColor(backgroundColor bgcolor : UIColor, foregroundColor forecolor : UIColor){ self.backgroundColor = bgcolor var xCursor = tilePadding var yCursor : CGFloat for _ in 0..<demension{ yCursor = tilePadding for _ in 0..<demension { let tileFrame = UIView(frame : CGRect(x: xCursor, y: yCursor, width: tileWidth, height: tileWidth)) tileFrame.backgroundColor = forecolor tileFrame.layer.cornerRadius = 8 addSubview(tileFrame) yCursor += tilePadding + tileWidth } xCursor += tilePadding + tileWidth }}
这个方法其实就是在游戏区块中添加了demension*demension个小块,每个小块的颜色是我们传入的foregroundColor
来运行下看效果:
可以看到基本的游戏面板已经有了,今天先讲到这里,大家可以尝试自己把计分板添加进来,当然后续我也会讲到。
我的博客:blog.scarlettbai.com
我的微信公众号:读书健身编程
欢迎扫码关注我的公众号查看更多文章
- [swift实战入门]手把手教你编写2048(一)
- [swift实战入门]手把手教你编写2048(二)
- [swift实战入门]手把手教你编写2048(三)
- 手把手教你编写入门级redis客户端
- 手把手教你安卓入门(一)
- 手把手教你安卓入门(一)
- 手把手教你Dojo入门
- 手把手教你入门--Pycharm
- 手把手教你入门--Pycharm
- 手把手教你给VC++编写插件
- 手把手教你编写Linux设备驱动程序
- 手把手教你如何编写、编译汇编程序
- 手把手教你编写XML配置
- 手把手教你JNI接口编写流程
- 手把手教你编写-微信机器人
- 手把手教你编写游戏模拟器
- 手把手教你编写游戏模拟器
- 手把手教你编写游戏模拟器
- LintCode_35_翻转链表
- 队列的应用——打印二项展开式(a+b)^k的系数(杨辉三角)
- JavaScript语言精粹之函数篇(一)
- hdoj--1251 统计难题(Trie树)
- u3d 性能优化
- [swift实战入门]手把手教你编写2048(一)
- Android开发,java开发程序员常见基础面试题,更换两个变量的值,java逻辑代码
- 宏和函数的区别
- 使用Bitmap实现排序
- beaglebone black xenomai移植 ---fwqlzz love is for ever
- LeetCode 20 Valid Parentheses
- HTML其实就是把页面的数据封装并加上标签
- 《JAVA源码分析》:ArrayList
- Jenkins的安装和配置