如我

如我 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

如我 关注了标签 · 7月3日

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 96881

如我 关注了标签 · 7月3日

程序员

一种近几十年来出现的新物种,是工业革命的产物。英文(Programmer Monkey)是一种非常特殊的、可以从事程序开发、维护的动物。一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发、维护工作,特别是在中国,而且最重要的一点,二者都是一种非常悲剧的存在。

国外的程序员节

国外的程序员节,(英语:Programmer Day,俄语:День программи́ста)是一个俄罗斯官方节日,日期是每年的第 256(0x100) 天,也就是平年的 9 月 13 日和闰年的 9 月 12 日,选择 256 是因为它是 2 的 8 次方,比 365 少的 2 的最大幂。

1024程序员节,中国程序员节

1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事程序开发、维护的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1GB=1024M,而1GB与1级谐音,也有一级棒的意思。

从2012年,SegmentFault 创办开始我们就从网络上引导社区的开发者,发展成中国程序员的节日 :) 计划以后每年10月24日定义为程序员节。以一个节日的形式,向通过Coding 改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。并于之后的最为临近的周末为程序员们举行了一个盛大的狂欢派对。

2015的10月24日,我们SegmentFault 也在5个城市同时举办黑客马拉松这个特殊的形式,聚集开发者开一个编程大爬梯。

特别推荐:

【SF 黑客马拉松】:http://segmentfault.com/hacka...
【1024程序员闯关秀】小游戏,欢迎来挑战 http://segmentfault.com/game/

  • SF 开发者交流群:206236214
  • 黑客马拉松交流群:280915731
  • 开源硬件交流群:372308136
  • Android 开发者交流群:207895295
  • iOS 开发者交流群:372279630
  • 前端开发者群:174851511

欢迎开发者加入~

交流群信息


程序员相关问题集锦:

  1. 《程序员如何选择自己的第二语言》
  2. 《如何成为一名专业的程序员?》
  3. 《如何用各种编程语言书写hello world》
  4. 《程序员们最常说的谎话是什么?》
  5. 《怎么加入一个开源项目?》
  6. 《是要精于单挑,还是要善于合作?》
  7. 《来秀一下你屎一般的代码...》
  8. 《如何区分 IT 青年的“普通/文艺/二逼”属性?》
  9. 程序员必读书籍有哪些?
  10. 你经常访问的技术社区或者技术博客(IT类)有哪些?
  11. 如何一行代码弄崩你的程序?我先来一发
  12. 编程基础指的是什么?
  13. 后端零起步:学哪一种比较好?
  14. 大家都用什么键盘写代码的?

爱因斯坦

程序猿崛起

关注 110624

如我 关注了标签 · 7月3日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 152566

如我 关注了标签 · 7月3日

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 134743

如我 回答了问题 · 2019-11-21

解决HTML使用Phaser 引擎显示的图片很模糊

原来是设置了Phaser的分辨率问题
如果在手机端,建议改成1080 * 1920的分辨率。
const game = new Phaser.Game(1080, 1920, Phaser.AUTO, '#game');
改变分辨率之后图片就变得清晰多了。

关注 2 回答 2

如我 提出了问题 · 2019-11-20

解决HTML使用Phaser 引擎显示的图片很模糊

在使用Phaser游戏引擎之后,原本很高清的图片在渲染之后都会变得很模糊,有谁遇到过这种问题吗?下面是创建实例的代码:
//创建游戏实例
const game = new Phaser.Game(width, height, Phaser.AUTO, '#game');
//加载图片
game.load.image('publisher','../images/publisher.png');
麻烦有经验的大佬指导一下。。。。

关注 2 回答 2

如我 提出了问题 · 2019-11-13

解决html2canvas插件截屏转base64时的坑

html2canvas插件截屏时,将canvas转base64文件时,显示的内容只有一部分。

调过canvas大小,还是无用

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
html2canvas(screenNode, {

allowTaint: true

}).then(function(canvas) {

  console.log(canvas.toDataURL('image/png'));
  document.body.appendChild(canvas);
})
.catch(function(msg) {
  console.log(msg);
});

希望各位大佬能帮帮忙。

关注 2 回答 1

如我 赞了文章 · 2019-11-11

从零到一:用Phaser.js写意地开发小游戏(Chapter 5 - 游戏大功告成)

图片描述

回顾

上一节我们完成了游戏核心场景play的大部分工作,能操控主角,能随机掉落苹果了。那么这一节我们来完成游戏剩余的部分,主要是计算分数、如何结束游戏等等。

正式开始

第一步:接住苹果得分
  • 主角加入物理运动

  • 检测接触事件

  • 接到苹果后,让苹果消失,并加分

对主角的修改:

game.physics.enable(man); // 加入物理运动
man.body.allowGravity = false; // 清除重力影响

检测接触事件要写在play场景的update生命周期内,意思为每次更新视图都会去检测主角和苹果是否有接触,有的话,则执行pickApple方法。

this.update = function() {
    // 监听接触事件
    game.physics.arcade.overlap(man, apples, pickApple, null, this);
}

接触事件则非常简单,调用apple的kill方法,则可以让苹果从场景中清除。同时,我们更新一下分数。

// 接触事件
function pickApple(man, apple) {
    apple.kill();
    title.text = ++score;
}

示例代码:https://jsfiddle.net/Vincent_...


第二步:苹果掉地上,游戏结束
  • 检测苹果与场景边缘的接触

  • 一旦接触,则游戏结束,跳转到结束场景

  • 布置结束场景,并显示分数

  • 为结束场景添加点击事件,点击后再玩一次

onWorldBounds属性可设置为一个Phaser.Signal对象,当开启了collideWorldBounds并且接触到场景边缘时,将触发Signal的事件。另外,这个特殊的Signal提供了上下左右四个值来让我们判断物体到底接触的是哪条边,考虑到有些苹果会接触到左右两边,我们只在和下边界接触的时候才结束游戏。

// 设置苹果与游戏边缘碰撞,
apple.body.collideWorldBounds = true;
apple.body.onWorldBounds = new Phaser.Signal();
apple.body.onWorldBounds.add(function(apple, up, down, left, right) {
    if (down) {
        apple.kill();
        game.state.start('over', true, false, score);
    }
});

布置结束场景,和之前布置其他场景一样,添加背景、文本等等。不同的是这次多了init这个生命周期,主要是由于在play场景中跳转到这个场景时会带上score,这个score会传入init这个生命周期的方法中。

// 结束场景
over: function() {
    var score = 0;
    this.init = function() {
        score = arguments[0];
    }
    this.create = function() {
        // 添加背景
        var bg = game.add.image(0, 0, 'bg');
        bg.width = game.world.width;
        bg.height = game.world.height;
        // 添加文本
        var title = game.add.text(game.world.centerX, game.world.height * 0.25, '游戏结束', {
            fontSize: '40px',
            fontWeight: 'bold',
            fill: '#f2bb15'
        });
        title.anchor.setTo(0.5, 0.5);
        var scoreStr = '你的得分是:'+score+'分';
        var scoreText = game.add.text(game.world.centerX, game.world.height * 0.4, scoreStr, {
            fontSize: '30px',
            fontWeight: 'bold',
            fill: '#f2bb15'
        });
        scoreText.anchor.setTo(0.5, 0.5);
    }
}

最后我们在结束场景添加一个点击事件,点击后跳转到play场景,再玩一次。

var remind = game.add.text(game.world.centerX, game.world.height * 0.6, '点击任意位置再玩一次', {
    fontSize: '20px',
    fontWeight: 'bold',
    fill: '#f2bb15'
});
remind.anchor.setTo(0.5, 0.5);
// 添加点击事件
game.input.onTap.add(function() {
    game.state.start('play');
});

示例代码:https://jsfiddle.net/Vincent_...


第三步:添加得分效果
  • 为不同苹果设置不同的得分

  • 接到苹果时添加对应的得分图片到场景中

  • 为得分图片添加过渡效果

先来介绍一下Phaser的过渡:

要使用过渡,首先要创建过渡对象,传入的是要应用过渡效果的对象,例如apple。

// 创建过渡对象
game.add.tween(obj);

然后使用得最多的是Tween的to方法,也就是过渡到指定状态的方法。可以指定过渡时间曲线,延迟、是否重复、过渡时间等等参数,使用Tween已经可以实现大部分的动画效果。

clipboard.png

于是我们修改之前的pickApple方法,也就是接到苹果后的方法。

function pickApple(man, apple) {
    var point = 1;
    var img = 'one';
    if (apple.type === 'red') {
        point = 3;
        img = 'three';
    } else if (apple.type === 'yellow') {
        point = 5;
        img = 'five';
    }
    // 添加得分图片
    var goal = game.add.image(apple.x, apple.y, img);
    var goalImg = game.cache.getImage(img);
    goal.width = apple.width;
    goal.height = goal.width / (goalImg.width / goalImg.height);
    goal.alpha = 0;
    // 添加过渡效果
    var showTween = game.add.tween(goal).to({
        alpha: 1,
        y: goal.y - 20
    }, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
    showTween.onComplete.add(function() {
        var hideTween = game.add.tween(goal).to({
            alpha: 0,
            y: goal.y - 20
        }, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
        hideTween.onComplete.add(function() {
            goal.kill();
        });
    });
    // 更新分数
    score += point;
    title.text = score;
    // 清除苹果
    apple.kill();
}

示例代码:https://jsfiddle.net/Vincent_...


第四步:加入炸弹,丰富音效
  • 随机掉落炸弹

  • 加入接到苹果或炸弹的音效

  • 接到炸弹后游戏结束

要想随机掉落炸弹非常简单,只需要在之前的appleTypes里面加入bomb即可,同时如果有其他东西(例如梨子)要加入的话也可以这样。

var appleTypes = ['green', 'red', 'yellow', 'bomb'];

同时,由于我们不接炸弹,因此炸弹掉到地上也不会导致游戏结束,因此修改一下代码:

apple.body.onWorldBounds.add(function(apple, up, down, left, right) {
    if (down) {
        apple.kill();
        if (apple.type !== 'bomb') game.state.start('over', true, false, score);
    }
});

接到苹果和炸弹时播放音效,这个很简单,直接调用音频对象的play方法即可。接到炸弹后结束和苹果掉地上的调用方式是一样的。我们继续来修改pickApple方法:

function pickApple(man, apple) {
    if (apple.type === 'bomb') {
        // 播放音效
        bombMusic.play();
        game.state.start('over', true, false, score);
    } else {
        var point = 1;
        var img = 'one';
        if (apple.type === 'red') {
            point = 3;
            img = 'three';
        } else if (apple.type === 'yellow') {
            point = 5;
            img = 'five';
        }
        // 添加得分图片
        var goal = game.add.image(apple.x, apple.y, img);
        var goalImg = game.cache.getImage(img);
        goal.width = apple.width;
        goal.height = goal.width / (goalImg.width / goalImg.height);
        goal.alpha = 0;
        // 添加过渡效果
        var showTween = game.add.tween(goal).to({
            alpha: 1,
            y: goal.y - 20
        }, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
        showTween.onComplete.add(function() {
            var hideTween = game.add.tween(goal).to({
                alpha: 0,
                y: goal.y - 20
            }, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
            hideTween.onComplete.add(function() {
                goal.kill();
            });
        });
        // 更新分数
        score += point;
        title.text = score;
        // 清除苹果
        apple.kill();
        // 播放音效
        scoreMusic.play();
    }
}

示例代码:https://jsfiddle.net/Vincent_...


大功告成

游戏终于完成了它的逻辑,算是一个完整的游戏了。当然了,效果远未达到理想,要说的话,游戏水非常深,这个系列的教程只是从零到一,引导大家接触并上手Phaser.js。

这里可以抛出一些优化的方向,大家也可以当做Phaser的练习题目去做:

  • 游戏中字体的更换

  • 地面应该和小恐龙底部持平,而非屏幕底部,如何实现?

  • 现在三种苹果和炸弹的出现概率是随机的,如何调整它们各自的出现概率?

  • 现在苹果和炸弹出现的时间间隔是固定的,如何随着游戏进行加快节奏?

  • 如何调整游戏难度梯度?

  • 现在炸弹和苹果有可能会相邻出现,导致很难接到苹果而不碰到炸弹,如何避免?

  • ……

本来没想写这么多点的,一不小心。可见游戏优化的空间还是很大的,希望大家能继续发掘Phaser.js的潜力,做出更多的优秀的小游戏~

Github地址:https://github.com/VincentPat...

扫描下面二维码的话也可以用手机查看效果了:

图片描述

未完待续...?

回顾:

如果接下来有时间整理的话,会补充一篇Phaser.js的实战技巧和注意事项。本系列文章写作纯粹个人喜好,如有写得不严谨或不正确的地方,还请多多包涵。第一次花这么长时间写技术分享,还是用那句话勉励自己:

希望我是真的喜欢编程,由始至终。

如果你喜欢这几篇文章,或者说从零到一这个系列,给我点个赞,我就心满意足了。

查看原文

赞 69 收藏 37 评论 22

认证与成就

  • 获得 0 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-11-11
个人主页被 76 人浏览