<!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. 关于 拼接 url 连接 参数的问题（爬虫）。

    比如这里 我找的 后台请求的json的链接: 第一页: http://www.igoldenbeta.com:8080/cn-jsfund-server-mobile/bkt/api?appkey=1 ...

  2. PHP生成随机字符串与唯一字符串

    代码如下: <?php /* * 生成随机字符串 * @param int $length 生成随机字符串的长度 * @param string $char 组成随机字符串的字符串 * @ret ...

  3. AC日记——明明的烦恼 bzoj 1005

    1005 思路: prufer编码+组合数: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 1005 #de ...

  4. 前端读者 | 从一行代码里面学点JavaScript

    本文来自 @张小俊128:链接:http://www.html-js.com/article/A-day-to-learn-from-a-line-of-code-inside-the-JavaScr ...

  5. Nginx错误：nginx: [error] OpenEvent("Global\ngx_reload_6252") failed (2: The system cannot find the file specified)

    执行nginx -s reload命令: nginx: [error] OpenEvent("Global\ngx_reload_6252") failed (2: The sys ...

  6. 基于kbengine 0.4.20

    前言: v0.0.1 2015-04-10 誉小痕(shawhen2012@hotmail.com) v0.0.2 2015-04-12 誉小痕(shawhen2012@hotmail.com) ch ...

  7. Windows10 Docker加速

    参考地址:https://blog.csdn.net/wanderlustlee/article/details/80216588 在刚开始使用时,有可能因为网络的问题导致整个镜像的下载过程不是太顺畅 ...

  8. 【C++】基础及引用

    输出 #include "iostream" //包含c++的头文件 //iostream.h using namespace std; //使用命名空间 std 标准的命名空间 ...

  9. python的vim的环境配置（后续慢慢补充进来）

    #vim ~/.vimrc set smartindent set smarttab set expandtab set tabstop= set softtabshtop= set shiftwid ...

  10. go chapter 7 - 类型

    任意类型 interface{} 遍历并判断类型 func MyPrintf(args ...interface{}) { for _, arg := range args { switch arg. ...