欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Phaser.js实现简单的跑酷游戏附源码下载

程序员文章站 2022-10-08 13:20:42
采用的物理引擎是phaser.js 官网地址: 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方...

采用的物理引擎是phaser.js

官网地址:

在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿)

效果展示:

Phaser.js实现简单的跑酷游戏附源码下载

源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone)

1.创建游戏舞台

var config = {
 type: phaser.auto,
 width: 800,
 height: 400,
 physics: {
  default: 'arcade',
  arcade: {
   gravity: {
    y: 300
   },
   debug: false
  }
 },
 scene: {
  preload: preload,
  create: create,
  update: update
 }
};
var game = new phaser.game(config); // 创建游戏

2.载入资源

function preload() {
 this.load.image('sky', 'assets/sky.png');
 this.load.image('ground', 'assets/platform.png');
  5  6  this.load.spritesheet('dude', 'assets/dude.png', {
  framewidth: 32,
  frameheight: 48
 });
}

3.将资源创建到舞台上

var distancetext; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敌人
var enemys; // 敌人们
var enemytimer; // 敌人计时器
var distancetimer; // 路程计时器
function create() {
 // 添加画布背景
 this.add.image(400, 200, 'sky');
 // 添加分数文本
 distancetext = this.add.text(16, 16, 'distance: 0m', {
  fontsize: '20px',
  fill: '#000'
 });
 // 添加地面
 platforms = this.physics.add.staticgroup();
 platforms.create(400, 400, 'ground').setscale(3).refreshbody();
 // 添加玩家(精灵)
 player = this.physics.add.sprite(100, 300, 'dude');
 player.setbounce(0); // 设置阻力
 player.setcollideworldbounds(true); // 禁止玩家走出世界
 // 敌人
 enemys = this.physics.add.group();
 enemys.children.iterate(function (child) {
  child.setcollideworldbounds(false);
 });
 // 动态创建敌人
 enemytimer = setinterval(function () {
  enemy = enemys.create(1000, 300, 'dude');
  enemy.settint(getcolor());
  enemy.anims.play('left', true);
  enemy.setvelocityx(phaser.math.between(-300, -100));
 }, phaser.math.between(4000, 8000))
 distancetimer = setinterval(function () {
  distance += 1;
  distancetext.settext('distance: ' + distance + 'm');
 }, 1000)
 this.physics.add.collider(player, platforms); //玩家在地面上
 this.physics.add.collider(enemys, platforms); //敌人在地面上
 this.physics.add.collider(player, enemys, hitbomb, null, this);
}

4.在创建场景过程中写键盘监听事件

var cursors; // 按键
 // 事件
 this.anims.create({
  key: 'left',
  frames: this.anims.generateframenumbers('dude', {
   start: 0,
   end: 3
  }),
  framerate: 10,
  repeat: -1
 });

 this.anims.create({
  key: 'right',
  frames: this.anims.generateframenumbers('dude', {
   start: 5,
   end: 8
  }),
  framerate: 10,
  repeat: -1
 });

 this.anims.create({
  key: 'turn',
  frames: [{
   key: 'dude',
   frame: 4
  }],
  framerate: 20
 });

 cursors = this.input.keyboard.createcursorkeys();

5.写碰撞函数(当玩家与敌人碰撞的结果)

var gameover = false; // 游戏结束
function hitbomb(player, enemys) {
 this.physics.pause();
 clearinterval(enemytimer);
 clearinterval(distancetimer);
 player.settint(0xff0000);
 gameover = true;
 alert('游戏结束,您跑了' + distance + 'm');
}

6.在update函数中写时间的执行(须注意的是此函数每一帧都在执行,1帧≠1秒)

function update() {
 if (cursors.up.isdown && player.body.touching.down) {
  player.setvelocityy(-220);
 } else {
  player.anims.play('right', true);
 }
 if (gameover) {
  player.setvelocityx(0);
  player.anims.play('turn');
  return;
 }
}

这里我给敌人上了颜色的,随机16进制颜色

function getcolor() {
 var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
  return math.random() - 0.5
 }).join("").substr(0,6);
 
 return "0x" + color;
}

整个源码奉上(建议去github上自己clone):

var config = {
 type: phaser.auto,
 width: 800,
 height: 400,
 physics: {
  default: 'arcade',
  arcade: {
   gravity: {
    y: 300
   },
   debug: false
  }
 },
 scene: {
  preload: preload,
  create: create,
  update: update
 }
};

var game = new phaser.game(config); // 创建游戏

var distancetext; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敌人
var enemys; // 敌人们
var gameover = false; // 游戏结束
var enemytimer; // 敌人计时器
var distancetimer; // 路程计时器

var cursors; // 按键 
// 载入资源
function preload() {
 this.load.image('sky', 'assets/sky.png');
 this.load.image('ground', 'assets/platform.png');
  39  40  this.load.spritesheet('dude', 'assets/dude.png', {
  framewidth: 32,
  frameheight: 48
 });
}

// 将资源展示到画布创建资源
function create() {
 // 添加画布背景
 this.add.image(400, 200, 'sky');
 // 添加分数文本
 distancetext = this.add.text(16, 16, 'distance: 0m', {
  fontsize: '20px',
  fill: '#000'
 });
 // 添加地面
 platforms = this.physics.add.staticgroup();
 platforms.create(400, 400, 'ground').setscale(3).refreshbody();
 // 添加玩家(精灵)
 player = this.physics.add.sprite(100, 300, 'dude');
 player.setbounce(0); // 设置阻力
 player.setcollideworldbounds(true); // 禁止玩家走出世界

 // 敌人
 enemys = this.physics.add.group();
 enemys.children.iterate(function (child) {

  child.setcollideworldbounds(false);
 });

 // 事件
 this.anims.create({
  key: 'left',
  frames: this.anims.generateframenumbers('dude', {
   start: 0,
   end: 3
  }),
  framerate: 10,
  repeat: -1
 });

 this.anims.create({
  key: 'right',
  frames: this.anims.generateframenumbers('dude', {
   start: 5,
   end: 8
  }),
  framerate: 10,
  repeat: -1
 });

 this.anims.create({
  key: 'turn',
  frames: [{
   key: 'dude',
   frame: 4
  }],
  framerate: 20
 });

 cursors = this.input.keyboard.createcursorkeys();

 // 动态创建敌人
 enemytimer = setinterval(function () {
  enemy = enemys.create(1000, 300, 'dude');
  enemy.settint(getcolor());
  enemy.anims.play('left', true);
  enemy.setvelocityx(phaser.math.between(-300, -100));
 }, phaser.math.between(4000, 8000))

 distancetimer = setinterval(function () {
  distance += 1;
  distancetext.settext('distance: ' + distance + 'm');
 }, 1000)



 this.physics.add.collider(player, platforms); //玩家在地面上
 this.physics.add.collider(enemys, platforms);
 this.physics.add.collider(player, enemys, hitbomb, null, this);

}
// 一直执行
function update() {
 if (cursors.up.isdown && player.body.touching.down) {
  player.setvelocityy(-220);
 } else {
  player.anims.play('right', true);
 }
 if (gameover) {
  player.setvelocityx(0);
  player.anims.play('turn');
  return;
 }
}

function hitbomb(player, enemys) {
 this.physics.pause();
 clearinterval(enemytimer);
 clearinterval(distancetimer);
 player.settint(0xff0000);
 gameover = true;
 alert('游戏结束,您跑了' + distance + 'm');
}

function getcolor() {
 var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
  return math.random() - 0.5
 }).join("").substr(0,6);
 
 return "0x" + color;
}

github:fuck me on github fuck me on github

总结

以上所述是小编给大家介绍的phaser.js实现简单的跑酷游戏附源码下载,希望对大家有所帮助