前端本地文件操作与上传

2017/12/07 · JavaScript
· 1 评论 ·
文件

原文出处:
人人网FED博客   

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:

  1. 通过input type=”file” 选择本地文件
  2. 通过拖拽的方式把文件拖过来
  3. 在编辑框里面复制粘贴

第一种是最常用的手段,通常还会自定义一个按钮,然后盖在它上面,因为type=”file”的input不好改变样式。如下代码写一个选择控件,并放在form里面:

JavaScript

<form> <input type=”file” id=”file-input”
name=”fileContent”> </form>

1
2
3
<form>
    <input type="file" id="file-input" name="fileContent">
</form>

然后就可以用FormData获取整个表单的内容:

把input的value和formData打印出来是这样的:

澳门微尼斯人手机版 1

可以看到文件的路径是一个假的路径,也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的Objet,但并不是说它的内容是空的,只是它对前端开发人员是透明的,无法查看、修改、删除里面的内容,只能append添加字段。

FormData无法得到文件的内容,而使用FileReader可以读取整个文件的内容。用户选择文件之后,input.files就可以得到用户选中的文件,如下代码:

JavaScript

$(“#file-input”).on(“change”, function() { let fileReader = new
FileReader(), fileType = this.files[0].type; fileReader.onload =
function() { if (/^image/.test(fileType)) { //
读取结果在fileReader.result里面 $(`<img
src=”${this.result}”>`).appendTo(“body”); } } // 打印原始File对象
console.log(this.files[0]); // base64方式读取
fileReader.readAsDataURL(this.files[0]); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#file-input").on("change", function() {
    let fileReader = new FileReader(),
        fileType = this.files[0].type;
    fileReader.onload = function() {
        if (/^image/.test(fileType)) {
            // 读取结果在fileReader.result里面
            $(`<img src="${this.result}">`).appendTo("body");
        }
    }
    // 打印原始File对象
    console.log(this.files[0]);
    // base64方式读取
    fileReader.readAsDataURL(this.files[0]);    
});

把原始的File对象打印出来是这样的:

澳门微尼斯人手机版 2

它是一个window.File的实例,包含了文件的修改时间、文件名、文件的大小、文件的mime类型等。如果需要限制上传文件的大小就可以通过判断size属性有没有超,单位是字节,而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名的后缀可能会不准,而通过这种判断会比较准。上面的代码使用了一个正则判断,如果是一张图片的话就把它赋值给img的src,并添加到dom里面,但其实这段代码有点问题,就是web不是所有的图片都能通过img标签展示出来,通常是jpg/png/gif这三种,所以你应该需要再判断一下图片格式,如可以把判断改成:

JavaScript

/^image\/[jpeg|png|gif]/.test(this.type)

1
/^image\/[jpeg|png|gif]/.test(this.type)

然后实例化一个FileReader,调它的readAsDataURL并把File对象传给它,监听它的onload事件,load完读取的结果就在它的result属性里了。它是一个base64格式的,可直接赋值给一个img的src.

使用FileReader除了可读取为base64之外,还能读取为以下格式:

JavaScript

fileReader.readAsDataURL(this.files[0]); //
以二进制字符串方式读取,结果是二进制内容的utf-8形式,已被废弃了
fileReader.readAsBinaryString(this.files[0]); //
以原始二进制方式读取,读取结果可直接转成整数数组
fileReader.readAsArrayBuffer(this.files[0]);

1
2
3
4
5
6
7
fileReader.readAsDataURL(this.files[0]);
// 以二进制字符串方式读取,结果是二进制内容的utf-8形式,已被废弃了
fileReader.readAsBinaryString(this.files[0]);
// 以原始二进制方式读取,读取结果可直接转成整数数组
fileReader.readAsArrayBuffer(this.files[0]);

其它的主要是能读取为ArrayBuffer,它是一个原始二进制格式的结果。把ArrayBuffer打印出来是这样的:

澳门微尼斯人手机版 3

可以看到,它对前端开发人员也是透明的,不能够直接读取里面的内容,但可以通过ArrayBuffer.length得到长度,还能转成整型数组,就能知道文件的原始二进制内容了:

JavaScript

let buffer = this.result; // 依次每字节8位读取,放到一个整数数组 let
view = new Uint8Array(buffer); console.log(view);

1
2
3
4
let buffer = this.result;
// 依次每字节8位读取,放到一个整数数组
let view = new Uint8Array(buffer);
console.log(view);

如果是通过第二种拖拽的方式,应该怎么读取文件呢?如下html(样式略):

JavaScript

<div class=”img-container”> drop your image here </div>

1
2
3
<div class="img-container">
    drop your image here
</div>

这将在页面显示一个框:

澳门微尼斯人手机版 4

然后监听它的拖拽事件:

JavaScript

$(“.img-container”).on(“dragover”, function (event) {
event.preventDefault(); }) .on(“drop”, function(event) {
event.preventDefault(); // 数据在event的dataTransfer对象里 let file =
event.originalEvent.dataTransfer.files[0]; //
然后就可以使用FileReader进行操作 fileReader.readAsDataURL(file); //
或者是添加到一个FormData let formData = new FormData();
formData.append(“fileContent”, file); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(".img-container").on("dragover", function (event) {
    event.preventDefault();
})
 
.on("drop", function(event) {
    event.preventDefault();
    // 数据在event的dataTransfer对象里
    let file = event.originalEvent.dataTransfer.files[0];
 
    // 然后就可以使用FileReader进行操作
    fileReader.readAsDataURL(file);
 
    // 或者是添加到一个FormData
    let formData = new FormData();
    formData.append("fileContent", file);
})

数据在drop事件的event.dataTransfer.files里面,拿到这个File对象之后就可以和输入框进行一样的操作了,即使用FileReader读取,或者是新建一个空的formData,然后把它append到formData里面。

第三种粘贴的方式,通常是在一个编辑框里操作,如把div的contenteditable设置为true:

JavaScript

<div contenteditable=”true”> hello, paste your image here
</div>

1
2
3
<div contenteditable="true">
      hello, paste your image here
</div>

粘贴的数据是在event.clipboardData.files里面:

JavaScript

$(“#editor”).on(“paste”, function(event) { let file =
event.originalEvent.clipboardData.files[0]; });

1
2
3
$("#editor").on("paste", function(event) {
    let file = event.originalEvent.clipboardData.files[0];
});

但是Safari的粘贴不是通过event传递的,它是直接在输入框里面添加一张图片,如下图所示:

澳门微尼斯人手机版 5

它新建了一个img标签,并把img的src指向一个blob的本地数据。什么是blob呢,如何读取blob的内容呢?

blob是一种类文件的存储格式,它可以存储几乎任何格式的内容,如json:

JavaScript

let data = {hello: “world”}; let blob = new
Blob([JSON.stringify(data)], {type : ‘application/json’});

1
2
3
let data = {hello: "world"};
let blob = new Blob([JSON.stringify(data)],
  {type : ‘application/json’});

为了获取本地的blob数据,我们可以用ajax发个本地的请求:

JavaScript

$(“#editor”).on(“paste”, function(event) { // 需要setTimeout
0等图片出来了再处理 setTimeout(() => { let img =
$(this).find(“img[src^=’blob’]”)[0]; console.log(img.src); //
用一个xhr获取blob数据 let xhr = new XMLHttpRequest(); xhr.open(“GET”,
img.src); // 改变mime类型 xhr.responseType = “blob”; xhr.onload =
function () { // response就是一个Blob对象 console.log(this.response); };
xhr.send(); }, 0); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#editor").on("paste", function(event) {
    // 需要setTimeout 0等图片出来了再处理
    setTimeout(() => {
        let img = $(this).find("img[src^=’blob’]")[0];
        console.log(img.src);
        // 用一个xhr获取blob数据
        let xhr = new XMLHttpRequest();
        xhr.open("GET", img.src);
        // 改变mime类型
        xhr.responseType = "blob";
        xhr.onload = function () {
            // response就是一个Blob对象
            console.log(this.response);
        };
        xhr.send();
    }, 0);
});

上面代码把blob打印出来是这样的:

澳门微尼斯人手机版 6

能得到它的大小和类型,但是具体内容也是不可见的,它有一个slice的方法,可用于切割大文件。和File一样,可以使用FileReader读取它的内容:

JavaScript

function readBlob(blobImg) { let fileReader = new FileReader();
fileReader.onload = function() { console.log(this.result); }
fileReader.onerror = function(err) { console.log(err); }
fileReader.readAsDataURL(blobImg); } readBlob(this.response);

1
2
3
4
5
6
7
8
9
10
11
12
function readBlob(blobImg) {
    let fileReader = new FileReader();
    fileReader.onload = function() {
        console.log(this.result);
    }
    fileReader.onerror = function(err) {
        console.log(err);
    }
    fileReader.readAsDataURL(blobImg);
}
 
readBlob(this.response);

除此,还能使用window.URL读取,这是一个新的API,经常和Service
Worker配套使用,因为SW里面常常要解析url。如下代码:

JavaScript

function readBlob(blobImg) { let urlCreator = window.URL ||
window.webkitURL; // 得到base64结果 let imageUrl =
urlCreator.createObjectURL(this.response); return imageUrl; }
readBlob(this.response);

1
2
3
4
5
6
7
8
function readBlob(blobImg) {
    let urlCreator = window.URL || window.webkitURL;
    // 得到base64结果
    let imageUrl = urlCreator.createObjectURL(this.response);
    return imageUrl;
}
 
readBlob(this.response);

关于src使用的是blob链接的,除了上面提到的img之外,另外一个很常见的是video标签,如youtobe的视频就是使用的blob:

澳门微尼斯人手机版 7

这种数据不是直接在本地的,而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video里面,它也是通过URL的API创建的:

JavaScript

let mediaSource = new MediaSource(); video.src =
URL.createObjectURL(mediaSource); let sourceBuffer =
mediaSource.addSourceBuffer(‘video/mp4; codecs=”avc1.42E01E,
mp4a.40.2″‘); sourceBuffer.appendBuffer(buf);

1
2
3
4
let mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
let sourceBuffer = mediaSource.addSourceBuffer(‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"’);
sourceBuffer.appendBuffer(buf);

具体我也没实践过,不再展开讨论。

上面,我们使用了三种方式获取文件内容,最后得到:

  1. FormData格式
  2. FileReader读取得到的base64或者ArrayBuffer二进制格式

如果直接就是一个FormData了,那么直接用ajax发出去就行了,不用做任何处理:

JavaScript

let form = document.querySelector(“form”), formData = new
FormData(form), formData.append(“fileName”, “photo.png”); let xhr = new
XMLHttpRequest(); // 假设上传文件的接口叫upload xhr.open(“POST”,
“/upload”); xhr.send(formData);

1
2
3
4
5
6
7
8
let form = document.querySelector("form"),
    formData = new FormData(form),
formData.append("fileName", "photo.png");
 
let xhr = new XMLHttpRequest();
// 假设上传文件的接口叫upload
xhr.open("POST", "/upload");
xhr.send(formData);

如果用jQuery的话,要设置两个属性为false:

JavaScript

$.ajax({ url: “/upload”, type: “POST”, data: formData, processData:
false, // 不处理数据 contentType: false // 不设置内容类型 });

1
2
3
4
5
6
7
$.ajax({
    url: "/upload",
    type: "POST",
    data: formData,
    processData: false,  // 不处理数据
    contentType: false   // 不设置内容类型
});

因为jQuery会自动把内容做一些转义,并且根据data自动设置请求mime类型,这里告诉jQuery直接用xhr.send发出去就行了。

观察控制台发请求的数据:

澳门微尼斯人手机版 8

可以看到这是一种区别于用&连接参数的方式,它的编码格式是multipart/form-data,就是上传文件form表单写的enctype:

JavaScript

<form enctype=”multipart/form-data” method=”post”> <input
type=”file” name=”fileContent”> </form>

1
2
3
<form enctype="multipart/form-data" method="post">
    <input type="file" name="fileContent">
</form>

如果xhr.send的是FormData类型话,它会自动设置enctype,如果你用默认表单提交上传文件的话就得在form上面设置这个属性,因为上传文件只能使用POST的这种编码。常用的POST编码是application/x-www-form-urlencoded,它和GET一样,发送的数据里面,参数和参数之间使用&连接,如:

key1=value1&key2=value2

特殊字符做转义,这个数据POST是放在请求body里的,而GET是拼在url上面的,如果用jq的话,jq会帮你拼并做转义。

而上传文件用的这种multipart/form-data,参数和参数之间是且一个相同的字符串隔开的,上面的是使用:

——WebKitFormBoundary72yvM25iSPYZ4a3F

这个字符通常会取得比较长、比较随机,因为要保证正常的内容里面不会出现这个字符串,这样内容的特殊字符就不用做转义了。

请求的contentType被浏览器设置成:

Content-Type:

multipart/form-data; boundary=—-WebKitFormBoundary72yvM25iSPYZ4a3F

后端服务通过这个就知道怎么解析这么一段数据了。(通常是使用的框架处理了,而具体的接口不需要关心应该怎么解析)

如果读取结果是ArrayBuffer的话,也是可以直接用xhr.send发送出去的,但是一般我们不会直接把一个文件的内容发出去,而是用某个字段名等于文件内容的方式。如果你读取为ArrayBuffer的话再上传的话其实作用不是很大,还不如直接用formData添加一个File对象的内容,因为上面三种方式都可以拿到File对象。如果一开始就是一个ArrayBuffer了,那么可以转成blob然后再append到FormData里面。

使用比较多的应该是base64,因为前端经常要处理图片,读取为base64之后就可以把它画到一个canvas里面,然后就可以做一些处理,如压缩、裁剪、旋转等。最后再用canvas导出一个base64格式的图片,那怎么上传base64格式的呢?

第一种是拼一个表单上传的multipart/form-data的格式,再用xhr.sendAsBinary发出去,如下代码:

JavaScript

let boundary = “———-boundaryasoifvlkasldvavoadv”;
xhr.sendAsBinary([ // name=data boundary, ‘Content-Disposition:
form-data; name=”data”; filename=”‘ + fileName + ‘”‘, ‘Content-Type: ‘ +
“image/” + fileType, ”, atob(base64Data), boundary, //name=imageType
boundary, ‘Content-Disposition: form-data; name=”imageType”‘, ”,
fileType, boundary + ‘–‘ ].join(‘\r\n’));

1
2
3
4
5
6
7
8
9
10
11
12
13
let boundary = "———-boundaryasoifvlkasldvavoadv";
xhr.sendAsBinary([
    // name=data
    boundary,
        ‘Content-Disposition: form-data; name="data"; filename="’ + fileName + ‘"’,
        ‘Content-Type: ‘ + "image/" + fileType, ”,
        atob(base64Data), boundary,
    //name=imageType
    boundary,
        ‘Content-Disposition: form-data; name="imageType"’, ”,
        fileType,
    boundary + ‘–‘
].join(‘\r\n’));

上面代码使用了window.atob的api,它可以把base64还原成原始内容的字符串表示,如下图所示:

澳门微尼斯人手机版 9

btoa是把内容转化成base64编码,而atob是把base64还原。在调atob之前,需要把表示内容格式的不属于base64内容的字符串去掉,即上面代码第一行的replace处理。

这样就和使用formData类似了,但是由于sendAsBinary已经被deprecated了,所以新代码不建议再使用这种方式。那怎么办呢?

可以把base64转化成blob,然后再append到一个formData里面,下面的函数(来自b64-to-blob)可以把base64转成blob:

JavaScript

contentType = contentType || ”; sliceSize = sliceSize || 512; var
byteCharacters = atob(b64Data); var byteArrays = []; for (var offset =
0; offset < byteCharacters.length; offset += sliceSize) { var slice =
byteCharacters.slice(offset, offset + sliceSize); var byteNumbers = new
Array(slice.length); for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new
Uint8Array(byteNumbers); byteArrays.push(byteArray); } var blob = new
Blob(byteArrays, {type: contentType}); return blob; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    contentType = contentType || ”;
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);
      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

然后就可以append到formData里面:

JavaScript

let blob = b64toBlob(b64Data, “image/png”), formData = new FormData();
formData.append(“fileContent”, blob);

1
2
3
let blob = b64toBlob(b64Data, "image/png"),
    formData = new FormData();
formData.append("fileContent", blob);

这样就不用自己去拼一个multipart/form-data的格式数据了。

上面处理和上传文件的API可以兼容到IE10+,如果要兼容老的浏览器应该怎么办呢?

可以借助一个iframe,原理是默认的form表单提交会刷新页面,或者跳到target指定的那个url,但是如果把ifrmae的target指向一个iframe,那么刷新的就是iframe,返回结果也会显示在ifame,然后获取这个ifrmae的内容就可得到上传接口返回的结果。

如下代码:

JavaScript

iframe.display = “none”; iframe.name = “form-iframe”;
document.body.appendChild(iframe); // 改变form的target form.target =
“form-iframe”; iframe.onload = function() {
//获取iframe的内容,即服务返回的数据 let responseText =
this.contentDocument.body.textContent ||
this.contentWindow.document.body.textContent; }; form.submit();

1
2
3
4
5
6
7
8
9
10
11
12
13
iframe.display = "none";
iframe.name = "form-iframe";
document.body.appendChild(iframe);
// 改变form的target
form.target = "form-iframe";
iframe.onload = function() {
    //获取iframe的内容,即服务返回的数据
    let responseText = this.contentDocument.body.textContent
            || this.contentWindow.document.body.textContent;
};
form.submit();

form.submit会触发表单提交,当请求完成(成功或者失败)之后就会触发iframe的onload事件,然后在onload事件获取返回的数据,如果请求失败了的话,iframe里的内容就为空,可以用这个判断请求有没有成功。

使用iframe没有办法获取上传进度,使用xhr可以获取当前上传的进度,这个是在XMLHttpRequest
2.0引入的:

JavaScript

xhr.upload.onprogress = function (event) { if (event.lengthComputable) {
// 当前上传进度的百分比 duringCallback ((event.loaded /
event.total)*100); } };

1
2
3
4
5
6
xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        // 当前上传进度的百分比
        duringCallback ((event.loaded / event.total)*100);
    }
};

这样就可以做一个真实的loading进度条。

本文讨论了3种交互方式的读取方式,通过input控件在input.files可以得到File文件对象,通过拖拽的是在drop事件的event.dataTransfer.files里面,而通过粘贴的paste事件在event.clipboardData.files里面,Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签,可以通过发送一个请求加载本地的blob数据,然后再通过FileReader读取,或者直接append到formData里面。得到的File对象就可以直接添加到FormData里面,如果需要先读取base64格式做处理的,那么可以把处理后的base64转化为blob数据再append到formData里面。对于老浏览器,可以使用一个iframe解决表单提交刷新页面或者跳页的问题。

总之,前端处理和上传本地文件应该差不多就是这些内容了,但是应该还有好多细节没有提及到,读者可通过本文列的方向自行实践。如果有其它的上传方式还请告知。

1 赞 收藏 1
评论

澳门微尼斯人手机版 10

3.4 消除残砖

上一小节提到了「描述墙体的边界并记录墙体的空洞」的「列集合」,笔者是直接使用这个「列集合」来消除残砖的,伪代码如下:

JavaScript

function clearAll() { let count = 0; for(let col = 0, len =
this.wall.length; col < len; ++col) { let colInfo = this.wall[col];
for(let row = colInfo.start; row <= colInfo.end; ++row) { let tile =
this.grid[row * this.col + col]; tile.score = -20 – 40 * count++; //
标记奖励分数 tile.removed = true; } } }

1
2
3
4
5
6
7
8
9
10
11
function clearAll() {
let count = 0;
for(let col = 0, len = this.wall.length;  col < len; ++col) {
let colInfo = this.wall[col];
for(let row = colInfo.start; row <= colInfo.end; ++row) {
let tile = this.grid[row * this.col + col];
tile.score = -20 – 40 * count++; // 标记奖励分数
tile.removed = true;
}
}
}

控制对象数量

随着游戏的持续台面上累积的金币数量会不断增加,金币之间的碰撞计算量也会陡增,必然会导致手机卡顿和发热。这时就需要控制金币的重叠度,而金币之间重叠的区域大小是由金币刚体的尺寸大小决定的,通过适当的调整刚体半径让金币分布得比较均匀,这样可以有效控制金币数量,提升游戏性能。

1. 游戏规则

「消灭星星」存在多个版本,不过它们的规则除了「关卡分值」有些出入外,其它的规则都是一样的。笔者介绍的版本的游戏规则整理如下:

1. 色砖分布

  • 10 x 10 的表格
  • 5种颜色 —— 红、绿、蓝,黄,紫
  • 每类色砖个数在指定区间内随机
  • 5类色砖在 10 x 10 表格中随机分布

2. 消除规则

两个或两个以上同色砖块相连通即是可被消除的砖块。

3. 分值规则

  • 消除总分值 = n * n * 5
  • 奖励总分值 = 2000 – n * n * 20

「n」表示砖块数量。上面是「总」分值的规则,还有「单」个砖块的分值规则:

  • 消除砖块得分值 = 10 * i + 5
  • 剩余砖块扣分值 = 40 * i + 20

「i」表示砖块的索引值(从 0
开始)。简单地说,单个砖块「得分值」和「扣分值」是一个等差数列。

4. 关卡分值

关卡分值 = 1000 + (level – 1) * 2000;「level」即当前关卡数。

5. 通关条件

  • 可消除色块不存在
  • 累计分值 >= 当前关卡分值

上面两个条件同时成立游戏才可以通关。

技术选型

放弃了 3D 方案,在 2D 技术选型上就很从容了,最终确定用
CreateJS + Matter.js 组合作为渲染引擎和物理引擎,理由如下:

  • CreateJS
    在团队内用得比较多,有一定的沉淀,加上有老司机带路,一个字「稳」;
  • Matter.js
    身材纤细、文档友好,也有同事试玩过,完成需求绰绰有余。

5. Control

Control 要处理的事务比较多,如下:

  • 绑定 Model & View
  • 生成通关分值
  • 判断通关条件
  • 对外事件
  • 用户交互

初始化时,Control 把 Model 的砖块单向绑定到 View 的砖块了。如下:

Object.defineProperties(model.tile, { originIndex: { get() {…}, set(){
… view.update({originIndex}) } }, index: { get() {…}, set() { …
view.update({index}) } }, clr: { get() {…}, set() { …
view.update({clr}) } }, removed: { get() {…}, set() { …
view.update({removed}) } }, score: { get() {…}, set() { …
view.update({score}) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Object.defineProperties(model.tile, {
    originIndex: {
        get() {…},
        set(){
            …
            view.update({originIndex})
        }
    },  
    index: {
        get() {…},
        set() {
            …
            view.update({index})
        }
    },
    clr: {
        get() {…},
        set() {
            …
            view.update({clr})
        }
    },
    removed: {
        get() {…},
        set() {
            …
            view.update({removed})
        }
    },  
    score: {
        get() {…},
        set() {
            …
            view.update({score})
        }
    }
})
 

「通关分值」与「判断通关条件」这对逻辑在本文的「游戏规则」中有相关介绍,这里不再赘述。

对外事件规划如下:

name detail
pass 通关
pause 暂停
resume 恢复
gameover 游戏结束

用户交互 APIs 规划如下:

name type deltail
init method 初始化游戏
next method 进入下一关
enter method 进入指定关卡
pause method 暂停
resume method 恢复
destroy method 销毁游戏

相关资源

Three.js 官网

Three.js入门指南

Three.js
现学现卖

Matter.js 官网

Matter.js 2D
物理引擎试玩报告

游戏
createjs
h5
canvas
game
推金币
matter.js

Web开发

感谢您的阅读,本文由 凹凸实验室
版权所有。如若转载,请注明出处:凹凸实验室()

上次更新:2017-11-08 19:29:54

2 赞 收藏 1
评论

澳门微尼斯人手机版 10

6. 问题

在知乎有一个关于「消灭星星」的话题:popstar关卡是如何设计的?

这个话题在最后提出了一个问题 ——
「无法消除和最大得分不满足过关条件的矩阵」

澳门微尼斯人手机版 12

「无法消除的矩阵」其实就是最大得分为0的矩阵,本质上是「最大得分不满足过关条件的矩阵」。

最大得分不满足过关条件的矩阵
求「矩阵」的最大得分是一个
「背包问题」,求解的算法不难:对当前矩阵用「递归」的形式把所有的消灭分支都执行一次,并取最高分值。但是
javascript 的「递归」极易「栈溢出」导致算法无法执行。

其实在知乎的话题中提到一个解决方案:

网上查到有程序提出做个工具随机生成关卡,自动计算,把符合得分条件的关卡筛选出来

这个解决方案代价是昂贵的!笔者提供有源码并没有解决这个问题,而是用一个比较取巧的方法:进入游戏前检查是事为「无法消除矩阵」,如果是重新生成关卡矩阵

注意:笔者使用的取巧方案并没有解决问题。

背景介绍

一年一度的双十一狂欢购物节即将拉开序幕,H5
互动类小游戏作为京东微信手Q营销特色玩法,在今年预热期的第一波造势中,势必要玩点新花样,主要肩负着社交传播和发券的目的。推金币以传统街机推币机为原型,结合手机强大的能力和生态衍生出可玩性很高的玩法。

H5游戏开发:消灭星星

2018/01/25 · HTML5 ·
游戏

原文出处: 凹凸实验室   

「消灭星星」是一款很经典的「消除类游戏」,它的玩法很简单:消除相连通的同色砖块。

澳门微尼斯人手机版 13

前期预研

在体验过 AppStore 上好几款推金币游戏 App
后,发现游戏核心模型还是挺简单的,不过 H5
版本的实现在网上很少见。由于团队一直在做 2D 类互动小游戏,在 3D
方向暂时没有实际的项目输出,然后结合此次游戏的特点,一开始想挑战用 3D
来实现,并以此项目为突破口,跟设计师进行深度合作,抹平开发过程的各种障碍。

澳门微尼斯人手机版 14

由于时间紧迫,需要在短时间内敲定方案可行性,否则项目延期人头不保。在快速尝试了
Three.js + Ammo.js 方案后,发现不尽人意,最终因为各方面原因放弃了 3D
方案,主要是不可控因素太多:时间上、设计及技术经验上、移动端 WebGL
性能表现上,主要还是业务上需要对游戏有绝对的控制,加上是第一次接手复杂的小游戏,担心项目无法正常上线,有点保守,此方案遂卒。

如果读者有兴趣的话可以尝试下 3D 实现,在建模方面,首推
Three.js
,入手非常简单,文档和案例也非常详实。当然入门的话必推这篇
Three.js入门指南,另外同事分享的这篇
Three.js
现学现卖
也可以看看,这里奉上粗糙的 推金币 3D 版
Demo

7. 结语

下面是本文介绍的「消灭星星」的线上 DEMO 的二维码:

澳门微尼斯人手机版 15

游戏的源码托管在:

感谢耐心阅读完本文章的读者。本文仅代表笔者的个人观点,如有不妥之处请不吝赐教。
如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏。

调试方法

由于用了物理引擎,当在创建刚体时需要跟 CreateJS
图形保持一致,这里可以利用 Matter.js 自带的 Render
为物理场景独立创建一个透明的渲染层,然后覆盖在 CreateJS
场景之上,这里贴出大致代码:

JavaScript

Matter.Render.create({ element:
document.getElementById(‘debugger-canvas’), engine: this.engine,
options: { width: 750, height: 1206, showVelocity: true, wireframes:
false // 设置为非线框,刚体才可以渲染出颜色 } });

1
2
3
4
5
6
7
8
9
10
Matter.Render.create({
  element: document.getElementById(‘debugger-canvas’),
  engine: this.engine,
  options: {
    width: 750,
    height: 1206,
    showVelocity: true,
    wireframes: false // 设置为非线框,刚体才可以渲染出颜色
  }
});

设置刚体的 render 属性为半透明色块,方便观察和调试,这里以推板为例:

JavaScript

this.pusher.body = Matter.Bodies.trapezoid( … // 略 { isStatic: true,
render: { opacity: .5, fillStyle: ‘red’ } });

1
2
3
4
5
6
7
8
9
this.pusher.body = Matter.Bodies.trapezoid(
… // 略
{
  isStatic: true,
  render: {
    opacity: .5,
    fillStyle: ‘red’
  }
});

效果如下,调试起来还是很方便的:

澳门微尼斯人手机版 16

发表评论

电子邮件地址不会被公开。 必填项已用*标注