<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="js/phaser.min.js"></script>

  <style>

    body{

      margin : 0

    }

  </style>

</head>

<body>

  <script>

    // 生成配置

    const config = {

      // 类型

      type : Phaser.AUTO,

      width : 800,

      height : 600,

      //物理引擎

      physics : {

        default : 'arcade',

        arcade : {

          // 重力设置

          gravity : {y : 300},

          debug : false

        }

      },

      // 场景

      scene : {

        // 预加载

        preload,

        // 记载主要场景

        create,

        // 时时刷新场景

        update

      }

    }

    // 生成游戏主体

    let game = new Phaser.Game(config)

    // 生成玩家

    let player

    //　生成平台

    let platforms

    // 生成指针

    let cursors

    // 计分器

    let score = 0

    // 计分文本

    let scoreText

    //创造炸弹

    let bombs

    //创造gameover条件

    let gameover = false

    function preload(){

      // 加载背景图片

      this.load.image("sky","image/sky.png")

      this.load.image("bomb","image/bomb.png")

      this.load.image("ground","image/platform.png")

      this.load.image("star","image/star.png")

      this.load.spritesheet("dude","image/dude.png",{frameWidth:32,frameHeight:48})

    }

    function create(){

      // 绘制天空背景

      this.add.image(400,300,'sky')

      // 初始化游戏平台

      platforms = this.physics.add.staticGroup()

      // 平台导入图片，并且放大，加载当中阻止穿透

      platforms.create(400, 568,'ground').setScale(2).refreshBody()

      // create(x,y,imagename)

      // 其中ｘ,y设为０的时候，以图片中心作为原点，显示在左上方

      platforms.create(600, 400, 'ground')

      platforms.create(50, 250, 'ground')

      platforms.create(750, 220, 'ground');

      //生成玩家

      player = this.physics.add.sprite(100,450,'dude')

      // 玩家增加反弹

      player.setBounce(0.2)

      // 玩家增加触碰检测

      player.setCollideWorldBounds(true)

      //初始化键位绑定（光这样还不能用，在update中检测并更新！）

      this.anims.create({

        key : 'left',

        frames : this.anims.generateFrameNumbers('dude',{start : 0,end : 3}),

        frameRate : 10,

        repeat : -1

      })

      this.anims.create({

        key : "turn",

        frames: [ { key: 'dude', frame: 4 } ],

        frameRate : 20

      })

      this.anims.create({

        key : "right",

        frames : this.anims.generateFrameNumbers('dude',{start : 5,end : 8}),

        frameRate : 10,

        repeat : -1

      })

      //这里是初始化cursors:热键

      cursors = this.input.keyboard.createCursorKeys()

      //早苗教你画星星

      stars = this.physics.add.group({

        key : "star",

        repeat : 11,

        setXY : {x: 12, y: 0, stepX:70}

      })

      stars.children.iterate(function (child){

        //为每一颗星星加上碰撞函数

        child.setBounceY(Phaser.Math.FloatBetween(0.4,0.8))

      })

      bombs =  this.physics.add.group()

      //初始化计分器

      scoreText = this.add.text(16,16,"score 0",{fontSize : '32px',fill : "#000"})

      //这里是把该物体绑定到游戏平台上去

      this.physics.add.collider(player,platforms)

      this.physics.add.collider(stars,platforms)

      this.physics.add.collider(bombs,platforms)

      //内置了碰撞函数

      //星星与游戏人物的碰撞效果

      //1:物体1，2:物体2，3:接触回调函数，4:过程回调函数，5，对象

      this.physics.add.overlap(player, stars, collectStar, null, this)

      //炸弹和游戏任务的碰撞效果

      this.physics.add.collider(player,bombs,hitBomb,null,this)

    }

    function update (){

        if(gameover){

          return;

        }

        // 按了左键就左移，右键右移。不然就保持不动

        if (cursors.left.isDown){

            player.setVelocityX(-160);

            player.anims.play('left', true);

        }

        else if (cursors.right.isDown){

            player.setVelocityX(160);

            player.anims.play('right', true);

        }else{

            player.setVelocityX(0);

            player.anims.play('turn');

        }

        // 按了上且不是在下降状态就可以跳

        if (cursors.up.isDown && player.body.touching.down){

            player.setVelocityY(-330);

        }

    }

    function collectStar(player,star){

      //这里删除star实体

      star.disableBody(true,true)

      score += 1000

      scoreText.setText('Score : '+score)

      // 如果没有了星星

      if(stars.countActive(true) === 0){

        stars.children.iterate(function(child){

          //这里激活每一个小星星的实体

          child.enableBody(true,child.x,0,true,true)

        })

        //判断玩家在哪边，记录另外一边的一个位置

        var x = (player.x < 400) ? Phaser.Math.Between(400,800) : Phaser.Math.Between(0,400)

        // 绘制炸弹

        var bomb = bombs.create(x,16,'bomb')

        // 炸弹加上弹性和触碰检测

        bomb.setBounce(1)

        bomb.setCollideWorldBounds(true)

        bomb.setVelocity(Phaser.Math.Between(-200,200),20)

        bomb.allowGravity = false

      }

    }

    function hitBomb(){

      // 游戏暂停

      this.physics.pause()

      // 人物变为绿色

      player.setTint(0x00ff00)

      // 人物静止不动

      player.anims.play("turn")

      // 游戏结束

      gameover = true

    }

  </script>

</body>

</html>

　　

phaser框架制作游戏的例子，加上自己的注释的更多相关文章

  1. 用Phaser来制作一个html5游戏——flappy bird （二）

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

  2. 用Phaser来制作一个html5游戏——flappy bird （一）

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  3. Unity中制作游戏的快照游戏支持玩家拍快照

    Unity中制作游戏的快照游戏支持玩家拍快照 有些游戏支持玩家“拍快照”,也就是将游戏的精彩瞬间以图片的形式记录下来的功能.这个功能比较有趣,而且以后的用途也会很广,为此本节打算介绍:截取矩形区域内游 ...

  4. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  5. Unity制作游戏中的场景

    Unity制作游戏中的场景 1.2.3  场景 在Unity中,场景(Scene)就是游戏开发者制作游戏时,所使用的游戏场景.它是一个三维空间,对应的三维坐标轴分别是X轴.Y轴和Z轴本文选自Unity ...

  6. 使用Unity制作游戏关卡的教程（一）

    转自: http://gamerboom.com/archives/74131 作者:Matthias Zarzecki 我正在制作<Looking For Group – The Fork O ...

  7. Android UI-开源框架ImageLoader的完美例子

    Android开源框架ImageLoader的完美例子 2013年8月19日开源框架之Universal_Image_Loader学习 很多人都在讨论如何让图片能在异步加载更加流畅,可以显示大量图片, ...

  8. cocos游戏的例子（摘抄记录，非原创）

    3.1 搭建Cocos2d-JS v3.x 开发环境 下载所需的软件包 下载 Cocos Code IDE.目前 Cocos Code IDE 最新发布版本是 1.0.0-RC2.我们为什么 Coco ...

  9. Android（我还是个菜鸟）——UI-开源框架ImageLoader的完美例子

    开源框架ImageLoader 可在文件里面找——Desktop.zip(原文件为jar格式) 使用这个框架的好处: 让图片能在异步加载更加流畅,可以显示大量图片,在拖动ListView的时候不会出现 ...

随机推荐

  1. 包装类、基本数据类型及String类之间的相互转换

    包装类:8种基本数据类型对应一个类,此类即为包装类 一.基本数据类型 包装类 及String之间的转换 1.基本数据类型转化为包装类:调用包装类的构造器      int i=10;     Inte ...

  2. CountDownLatch源码浅析

    Cmd Markdown链接 CountDownLatch源码浅析 参考好文: JDK1.8源码分析之CountDownLatch(五) Java并发之CountDownLatch源码分析 Count ...

  3. Volatile arrays in Java

    Volatile arrays in Java A slight complication of Java volatile fields, and one sometimes overlooked, ...

  4. 深度学习方法：受限玻尔兹曼机RBM（三）模型求解，Gibbs sampling

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 接下来重点讲一下RBM模型求解 ...

  5. css3之nth-child和nth-of-type的区别

    之前一直开发的是兼容老版本的代码,所以很少用到有关c3里面的代码格式,今天就对于使用的c3选择器中nth-child和nth-of-type做一个区分.首先:1.nth-child(n):是选择父级元 ...

  6. linux 挂载 ip-SAN

    linux 挂载 ip-SAN 如何在 SAN 里面分配块就不讲了 # 安装 iscsi 工具 yum install iscsi-initiator-utils # 启动相关的服务 systemct ...

  7. 洛谷P1730最小密度路径

    题目传送门; 首先理解题目,究其本质就是一个最短路问题,而且数据范围贼水,用floyd完全没问题,但是题目有变化,要求出路径边权值与边数之比,这里就可以考虑在把floyd中的二维数组变为三维,f[ i ...

  8. 洛谷P2783 有机化学之神偶尔会作弊

    题目传送门 啦啦啦,发个文纪念一下第一道在洛谷上A的黑题,一次性就过真是无比舒服-(虽然某些大佬说这题有点水……)题目其实思路不难,Tarjan缩点+LCA,不过因为是无向边,所以在Tarjan的时候 ...

  9. js数组，在遍历中删除元素

    /** * 有效的方式 - 改变下标,控制遍历 */ for (var i = 0; i < arr.length; i++) { if (...) { arr.splice(i, 1); // ...

  10. 洛谷——P1618 三连击（升级版）

    P1618 三连击(升级版) 题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数的比例是A:B:C,试求出所有满足条件的三个三位数,若无解,输出“No!!!”. //感谢 ...