H5网页游戏引擎Phaser 3 Hello World 起步指南 官网文档笔记【一】

H5网页游戏引擎Phaser 3 Hello World 起步指南 官网文档笔记【一】

官网:http://phaser.io/tutorials/getting-started-phaser3

1、安装web服务器,apache或者nginx都可以

配置完成后,需要浏览器在 http://localhost 查看一下,确保服务搭建成功。

2、安装环境,

其实就是下载JS包

3、编辑器,用来写代码

vscode就可以,或者notepad++,sublime都行

3、配置环境

html页头引入js文件

4、编写hello world代码,可以直接复制黏贴


    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }

5、最后再测试下

怎么测试呢?一般web服务器localhost就能直接访问。

刚刷新页面会看到一个黑框,过一会有动画出来

4、完成,就这么简单。

小编这里有个 Hello World 环境

Phaser 3 Hello World 环境Demo入口

版权声明

翼安博客


首发 翼安博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读
web开发技术栈(框架)总结
Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis…… 天呐,好多…… 小编虽说出身工业软件,但心里一直藏着一个UI梦。近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框
3432

Web前端开发工程师笔试题(2019-3-28 整理16道,含答案)
前端时间因工作需要,整理了一套笔试题。 网上有许多套题,重复的比较多。出于笔试时间考虑,本文摘取16道,包含了CSS基本使用、时间绑定、定时器、存储、ajax和框架原理等内容。 题目偏简单,覆盖知识点勉强算全面。如果有更好的题目,也欢迎补充。 放着这里,希望能给正在准备面试的朋友们带来一点点价值。 ### 1. 一个200x200的div在不同分辨率屏幕上下左右居中,用css实现: di
2405

世风日下,想听一首曲子好难
前几天,身边朋友逛商城时感慨:“都什么年代了,还有卖MP3的,有人买么?”小编也没多想,随口回了句:”有吧,毕竟更专业,音质也相对更不错。“不想在几天后,一些事情让小编有了新的想法。记得上一次用MP3,已经是十多年前的事情了。那个时候,手机还是只能打电话发短信的功能机,街上还能随处看到网吧。那个时候,像听音乐,得去网吧下载到MP3播放器,然后才能在工作学习的时候有音乐听。记得在那个时候,街上还有商
2228

Git for windows 修改Home路径(版本号:2.14)
前人留下的网络资料有解决1.9版本的这个问题,但对2.14版本已经不再适用。前人资料:http://www.cnblogs.com/fenpho/p/6208896.htmlhttp://www.cnblogs.com/xunzhiyou/p/5028789.html实际操作后,修改/etc/profile文件后,重新开始GitBash并没有生效。由于Git的默认路径在C:\Users\Admin
469

thinkphp6设置Content-type解决header添加不生效问题
thinkphp6设置Content-type解决header添加不生效问题原生php只需要加入header就可以实现输出各种格式的文件内容,如header("Content-type:text/css");然而,在thinkphp6中却不能生效。response总会自动的将内容以网页的形式输出。即自动添加<html>、<body>等标签,无法达到预期的效果。tp6框架中提
4965

【Gtest(Google Test)帮助手册】en-cn
Gtest官方使用文档英文文档获得方式:框架生成的执行文件,在命令行--help即可获得。中文翻译版本操作文档只对使用Gtest(GoogleTest)开发的测试用例有效。通过命令,你可以使用以下功能:选择测试用例: --gtest_list_tests列出所有的测试用例,但并不执行。代码中的用例TEST(Foo,Bar)显示出的结果是"Foo.Bar".  --gtest_f
2363

每天上班都像上坟一样难受,怎么办?三条妙招让上班像踏青
经常听到身边有些朋友抱怨,说每天上班的心情就想上坟。然而,真是如此么?小编相信,每位上班像上坟的朋友,身边不会缺少这样的朋友:每天上班精神抖擞,很有干劲,心情愉悦就像是来踏青一样。他们是怎么做到的呢?其实,上班不愉快无非就是上班时心情不好,感觉焦虑。要知道,这些都是可以解决的!人的一生,就是适应、利用、创造法则的一生。法则就是自然法则、社会秩序和公司规章制度。最无力的时候只能去学习、适应法则,成长
3155

CSDN-markdown编辑器示意效果
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗Ctrl+B斜体Ctrl+I引用Ctrl+Q插入链接Ctrl+L插入代码Ctrl+K插入图片Ctrl
1419

摘抄武极天下中让读者为之动容的段落
……(1)“吾愿以亿年生命,化身结界,受万世枯寂,万世劫难,万世困苦,只愿庇护吾之族人,得一方净土!”(2)武道巅峰,从来都不是靠资源和背景就能堆积起来的,而是在一场场搏杀,和一次次探索中得到的。(3)他跟兰云月说过,跟圣美说过,跟自己说过:“哪怕他只是一只弱小的飞蛾,他也会毫不犹豫的冲入这团火焰中,去搏那万分之一希望的涅槃成凰的机会。”(4)可是在林铭看来,人,有强大和弱小之分,然而单论苦楚而言
4013

php开发遇到的Access denied for user
php开发遇到的Accessdeniedforuser'root'@'localhost'(usingpassword:NO)首发:2017-09-2413:44:38环境:CentOS6.5+php5.3.3在php开发过程中,我遇到了一个问题:在命令行中登录Mysql完全正常,然而PHP代码读取数据库却出了问题。报错如下:Accessdeniedforuser'root'@'localhost
3227

Linux环境C C++起Socket Server监听8080端口的代码实现
代码抄录自《UNUX网络编程卷一》,在实现开发环境中调试通过,经测试发现可以正常监听。(2017-09-0621:56:31)开发环境:CentOS,g++,VIM功能:C++实现Socket通信的Server端,实现监听8080端口接收到的消息。#include#include/*SeeNOTES*/#include#include#include#include#include#include
2717

CentOS 系统简易搭建FTP服务(四步足矣)
本文作者之前在CSDN发过(2017-09-0313:09:28),现在入驻本站。网上有很多的FTP搭建步骤,但普遍很繁琐,个人临时使用太麻烦。本次实验使用腾讯云服务器CentOS简易搭建FTP服务器,四行命令足矣完成基本使命。yuminstallvsftpdservicevsftpdstartuseradd-m-d/home/uftp-s/sbin/nologinuftppasswduftp目前
2490