<!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. yml格式

    是什么? yml文件扩展名是YAML的缩写,YAML于2001年出现,是一种数据描述语言,和xml类似 为什么用它? 我们在做javaweb项目的时候最常见的就是.xml配置文件和properitie ...

  2. form 表单获取所有数据 封装方法

    function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray(); $.each(a, function () { if ...

  3. 20：django中的安全问题

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

  4. Nginx-进程模型

    1.整体框架 正常执行起来的Nginx有很多进程,有master_process和worker_process进程,master_process是监控进程即主线程,worker_process是工作进 ...

  5. [PAT] 1142 Maximal Clique（25 分）

    1142 Maximal Clique(25 分) A clique is a subset of vertices of an undirected graph such that every tw ...

  6. C# 导入Excel

    #region 导入 /// <summary> /// 导入 /// </summary> /// <param name="sender"> ...

  7. loadrunner中文件的操作

    loadrunner中文件的操作 我们可以使用fopen().fscanf().fprintf().fclose()函数进行文件操作,但是因为LoadRunner不支持FILE数据类型,所以我们需要做 ...

  8. 五十四 网络编程 TCP编程

    Socket是网络编程的一个抽象概念.通常我们用一个Socket表示“打开了一个网络链接”,而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 客户端 大多数连接都是可靠 ...

  9. JavaSwing 版本的简单扫雷游戏

    JavaSwing 版本的简单扫雷游戏 一.扫雷游戏的基本规则 1.扫雷游戏分为初级.中级.高级和自定义四个级别. 单击游戏模式可以选择"初级"."中级".&q ...

  10. Maven 管理的WEB项目发布到Tomcat上

    1.需要Tomcat服务器 这里可以使用已下载好的Tomcat也可以使用Maven来自动引入Tomcat插件. 通过Maven引入Tomcat服务器 在项目的pom.xml文件中project 标签中 ...