<!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. IDEA 内存设置

    -server -Xms2g -Xmx2g -XX:NewRatio=3 -Xss16m -XX:+UseConcMarkSweepGC -XX:+CMSParallelRemarkEnabled - ...

  2. 我的新博客地址http://xxxbw.github.io/

    最近在学github,在github搭了个博客,以后也会使用另外一个博客.有兴趣的小伙伴可以看看~ 地址:http://xxxbw.github.io/

  3. linux命令（33）：tail命令

    1．命令格式; tail[必要参数][选择参数][文件] 2．命令功能: 用于显示指定文件末尾内容,不指定文件时,作为输入信息进行处理.常用查看日志文件. 3．命令参数: -f 循环读取 -q 不显示 ...

  4. HDU-2819

    Swap Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. poj 1182 (扩展并查集)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 58979   Accepted: 17247 Description ...

  6. Merge Intervals——STL的应用

    Given a collection of intervals, merge all overlapping intervals. For example, Given [1,3],[2,6],[8, ...

  7. Python五子棋的小程序

    代码是在开源中国上看到的,源代码网址:http://www.oschina.net/code/snippet_2365439_48010 需要安装graphics模块,下载地址:http://mcsp ...

  8. 【剑指offer】面试题 5. 替换空格

    面试题 5. 替换空格 题目:请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy. 则经过替换之后的字符串为We%20Are%20Hap ...

  9. hdu 4135 Co-prime (素数打表+容斥原理)

    题目链接 题意:问从A到B中与N互素的个数. 题解: 利用容斥原理:先求出与n互为素数的个数. 可以先将 n 进行素因子分解,然后用区间 x 除以 素因子,就得到了与 n 的 约数是那个素因子的个数, ...

  10. mysql source 乱码

    mysql -u root -p --default-character-set=utf8 use dbname source /root/newsdata.sql