<!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. 如何使用vux创建vue项目

    1.安装vue-cli,通过vue-v可以查明 安装vue-cli步骤 vue init airyland/vux2 projectPath(项目名字) 2.安装依赖模块 方法1:npm instal ...

  2. [New learn] 设计模式思考

    本文是对上文[New learn] 设计模式的思考总结 1.大框架 无论应用使用多少种设计模式和技巧,此模式都是应用的大框架.下图为本项目的基本架构图: 1.上图中大框架为经典的MVC模式. 2.Co ...

  3. Redis、mongdb、memcached的个人总结

    有测试的实例:http://colbybobo.iteye.com/blog/1986786 详细描述优缺点:https://www.cnblogs.com/binyue/p/4582550.html

  4. 创建数据库表的SQL语句

    创建表.视图.索引的sql语句如下: CREAT TABLE (列名,数据类型,约束) create view(创建视图) create index (创建索引) 1.primary key(主键) ...

  5. io流中比较特殊的流-java

    1.序列流(SequenceInputStream)整合个多个文件 A SequenceInputStream表示其他输入流的逻辑级联. 它从一个有序的输入流集合开始,从第一个读取到文件的结尾,然后从 ...

  6. 20：django中的安全问题

    本节主要是讲解django中的安全特性,讲述django是如何应对网站一般面临的安全性问题 跨站点脚本(XXS)攻击 跨站点脚本攻击是指一个用户把客户端脚本注入到其他用户的浏览器中.通常是通过在数据库 ...

  7. 【python】资料记录

    今天看了一些关于python的知识: 1.装饰器:https://www.zhihu.com/question/25950466/answer/31731502 2.*args的用法:http://b ...

  8. git报错The authenticity of host 'github.com (13.229.188.59)' can't be established. RSA key fingerprint is。。。

    额,记录下,.ssh/rsa_pub的内容都加到githup.com配置来,为什么还是报这个错呢. 最后发现是个小白问题,如下图 只需要输入yes就ok.

  9. java 中的try catch在文件相关操作的使用

    import java.io.CharConversionException; import java.io.FileNotFoundException; import java.io.FileRea ...

  10. 两个线程交替打印奇偶数【Lock版】

    import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock; public clas ...