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入口

版权声明

弈心博客


首发 弈心博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

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

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
159

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

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

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

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

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

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
2935

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
2488

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

解决修改CSS文件后网页显示不生效问题 刚开始学CSS,HTML+CSS+Div虽说是上个世纪就有产生的发明,但我却不会。不过,不要紧,学就是了。问题是这样的:我编写HTML文件,并调用CSS文件实现布局美化。然后,经常出现明明已经修改过CSS文件但HTML页面却并没有产生变化的现象。怎么办?CSS语法作为初学者,首先想到的时自己写错了。所以查找正确的语法,如这一文章中提到的HTML调用CSS管理、美化div,仔细检查,发现语法是OK的
2890

程序员该怎样写文档? 程序员该怎样写文档?文档的重要性在开发流程中的每一个阶段,文档都很重要。开发前的设计文档在开始Coding前,应先完成设计文档。设计文档包括需求分析、概要设计、架构图(模块功能图)、主要API的定义设计和当前开发任务的大体业务流程。设计文档的意义是在开发前将输出成果的未来式在产品经理、项目经理和架构师的脑海中达成共识。通过Review设计文档的工作模式,将产品相关的各个角色的意见和建议融入产品设计
2406