这个星期尝试着做一个2048的小游戏,就是有一个大的div里面包裹着横四竖四共16个小的div,曹总键盘上下左右使得数字相加或者移动,从而使数字最终达到2048即为游戏结束,或者当格子移动不了了之后也是游戏结束。
我们首先建立基本的模型,div建好之后我们去给它一个class和id,然后在css里面给边框选择长度和宽度,里面16个小框之间的内部距离大小,字体的颜色和字体的尺寸,还有数字在小框之间的位置用text-align:center;line-height:50px(这个数字根据自己选择的高度来决定)来让他们居中。
还有就是不同数字之中的background-color颜色的选择也很重要,好的颜色是可以让玩家更沉浸在游戏中,有着更好的游戏体验。例如#eee3da,#ede0c8,#f2b179这几个颜色我就非常喜欢。例如微信主题的那个绿色,就是莫名其妙的好看。
在操作css的选择器的时候要注意类选择器和id选择器的小区别,类选择是“.”加上类名,而id选择器是#加上id名,这个很容易发生小失误。
重点就在javascript里面了,因为javascript是用来操作这个游戏运行的最主要最核心的部分。首先建立一个对象game,在里面建立一个保存游戏的二维数组data,总行数用RN表示,总列数用CN表示。
初始化start就是用start(){}来完成;
for(var r=0;r<this.RN;r++){
this.data[r]=[]
for(var c=0;c<this.CN;c++){
this.data[r][c]=0
}
}
在随机的二维数组中添加两个数2或者4的话就用
this.randomNum();和this.randomNum()
console.log(this.data.join("\n"))将data数组中的数据展示到页面的div中去this.updateView(),在设置上下左右就可以完成基本的操作了。
2048小游戏
最新推荐文章于 2023-12-25 16:51:42 发布