2048游戏笔记（2018-07-24）
2018-07-24 本文已影响0人
Allenem
2048游戏笔记
一、要实现的功能
（一）期望
1.4×4格子
2.开始时随机出现两个数2或4，注意不能在同一格；之后每次移动后空白处随机出现一个数
3.移动控制，横或纵数字一样才能合并，判断能否移动
4.分数为合并数值累加
5.颜色变化
6.判败：①无空格②横或纵无相同数值
7.判胜：某格数值为2048
（二）实现
1.事件处理对象EventUtil
- 添加事件addHandler
- 移除事件removeHandler
- 获取事件对象getEvent
2.定义一些Game元素
- tileContainer
- scoreEle
- bestScoreEle
- tiles
3.定义Game的prototype属性向对象添加属性
- initEvent()初始化事件处理
添加键盘谈起事件，防止一直按下重复触发，然后执行方块移动函数 - init()初始化游戏
*创建空白方块坐标数组posArray和数值tiles[i][j]
*清空全部方块
*初始化分数和最佳分数
*随机创建2个方块 - deleteTile(all,tile)清除dom节点
*清除所有
*清除单个 - newTile()创建新方块
*tile对象
*位置
*数值 - setTile(element,num,x,y)设置方块显示数字和类
- randomPos()方块的随机位置
*位置
*从存空白坐标的数组中删除 - moveTile(keyCode)方块移动处理
*leftMove(i,j)或rightMove(i,j)或upMove(i,j)或downMove(i,j)
*merge(i,j)
*若合并了则newTile()；否则判断this.posArray.length==0&&this.gameOverTest()，若真执行gameOverMes() - leftMove(i,j)
*i左一向左到0检测确定移动坐标及移动后数值
*j不变 - rightMove(i,j)
*i右一向右到tiles.length-1检测确定移动坐标及移动后数值
*不变 - upMove(i,j)
*j上一向上到0检测确定移动坐标及移动后数值
*i不变 - downMove(i,j)
*j下一向下到tiles.length-1检测确定移动坐标及移动后数值
*i不变 - merge(i,j)
*this.num的值变化:删除被覆盖的方块;将移到相同值的方块的位置上的方块的原始位置添加到存空白坐标的数组中
*this.num的值不变:只需将空白数组中该空白方块的坐标改为移动的方块的原始坐标
*移动效果
*设置tiles[this.moveI][this.moveJ]（将被覆盖的方块）
*设置tiles[i][j]（将移动的方块） - getScore(score)
*score
*bestScore - gameWin()
*win
*continueBtn - gameOverTest()
*检测this.leftMove(i,j)||this.rightMove(i,j)||this.upMove(i,j)||this.downMove(i,j)，只要有一个方向可以移动即退出return
*否则return true - gameOverMes
创建元素message
（三）2048小游戏思维导图
2048小游戏思维导图.jpg
二、一些笔记
1.EventUtil.addHandler方法
EventUtil.addHandler：
addHandler 方法，职责是分别视情况而定来使用DOM0级方法、DOM2级方法或IE方法来添加事件。
这个方法属于一个名字叫EventUtil的对象，可以使用这个对象来处理浏览器间的差异。
addHandler() 方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。
与addHandler()方法对应的方法是removeHandler()，它也接受相同参数。这个方法的指责是移除之前添加的事件处理程序-------无论该事件处理程序是采取什么方式添加到元素中的。如果其他方法无效，默认采用DOM0级方法。
//EventUtil
var EventUtil = {
//添加事件
addHandler: function (element, type, handler) {
if (element.addEventListener) { //DOM2级
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //DOM1级
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler; //DOM0级
}
},
//移除事件
removeHandler: function (element, type, handler) { //类似addHandler
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
//获取事件对象
getEvent:function(event){
return event?event:window.event;//兼容ie
}
}
var btn1 = document.getElementById("myBtn1");
var handler = function () {
alert("hello handler");
}
EventUtil.addHandler(btn1, "click", handler);//点击id为myBtn1按钮弹出hello handler提示框
用法：
方法中首先检查DOM2级方法，如果DOM2级方法存在，则使用该方法：传入事件类型、事件处理程序、和第三个参数false（表示冒泡阶段）。
如果存在的是IE的方法，则采取第二种方案。（注意，为了在IE8及更早版本中运行，此时的事件类型必须加上“on"前缀。）
最后一种可能就是使用DOM0级方法。此时，我们使用的是括号语法来将属性名指定为事件处理程序，或者将事件设置为null。
2 JavaScript中的appendChild（）方法
appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。
案例一：向节点添加最后一个子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="mylist">
<li>牛奶</li>
<li>橡胶</li>
<li>花生</li>
</ul>
<input type="text" id="listname" name="listname"/>
<input type="button" value="添加列表项" onclick="mylist();"/>
<script type="text/javascript">
function mylist(){
var node=document.createElement("li"); //创建一个li节点
var testnode=document.getElementById("listname").value;//拿到input输入框的值
var asd=document.createTextNode(testnode)//定义创建文本节点
node.appendChild(asd); //把文本节点追加到li节点
document.getElementById("mylist").appendChild(node);//把li节点添加到ul中
}
</script>
</body>
</html>
案例1.1.png
案例1.2.png
案例二：从一个元素向另一个元素移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="mylist1">
<li>牛奶</li>
<li>橡胶</li>
<li>花生</li>
</ul>
<ul id="mylist2">
<li>苹果</li>
<li>梨子</li>
<li>草莓</li>
</ul>
<input type="button" value="点击移动" onclick="mylist();"/>
<script type="text/javascript">
function mylist(){
//定义节点 并把mylist2中的第一子节点赋值给node
var node=document.getElementById("mylist2").firstChild;
//将node里面获取的子节点 添加到mylisf1里面
document.getElementById("mylist1").appendChild(node);
}
</script>
</body>
</html>
案例2.1.png
案例2.2.png
3. JavaScript forEach() 方法
(1)语法
array.forEach(function(currentValue, index, arr), thisValue)
(2)参数
| 参数 | 描述 |
|---|---|
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 |
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值 |
(3)技术细节
返回值: undefined
JavaScript 版本: ECMAScript 3
4.css中@keyframes规则
定义和用法
通过 @keyframes 规则，能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称。 |
| keyframes-selector | 必需。动画时长的百分比。 |
| - | 合法的值：0-100%；from（与 0% 相同）；to（与 100% 相同） |
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
实例 1
在一个动画中添加多个 keyframe 选择器：
试一试
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
5.CSS3 transition 属性
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
| 默认值： | all 0 ease 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
例
<!DOCTYPE html>
<html>
<head>
<style>
/*光标停留时延时1s，宽从100变化为300用时2s，移开时延时1s，从300变为100用时2s*/
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s linear 1s;
-moz-transition:width 2s linear 1s; /* Firefox 4 */
-webkit-transition:width 2s linear 1s; /* Safari and Chrome */
-o-transition:width 2s linear 1s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
6.css媒体类型
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
实例6.1
在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
实例6.2
下面这个例子根据屏幕最大宽度设置显示宽度
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
其他媒体类型
注意：媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
