<!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">
<script src="https://cdn.jsdelivr.net/npm/phaser@3.18.1/dist/phaser.js"></script>
<title>Document</title>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
zoom: 1,
resolution: window.devicePixelRatio || 1,
fps: {},
physics: {
default: 'arcade',//matter'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
},
scale: {
resolution: 1
}
};
var player;
var stars;
var frogs;
var platforms;
var cursors;
var movingPlatform;
var score = 0;
var scoreText;
var bombs;
var gameOver = false;
var game = new Phaser.Game(config);
function preload() {
this.load.spritesheet('frog',
'images/Frog Sprite Sheet.png',
{ frameWidth: 32, frameHeight: 32 ,
startFrame: 0,
endFrame: 17
}
);
this.load.spritesheet('hex',
'images/Hex Sprite Sheet.png',
{ frameWidth: 32, frameHeight: 32 }
);
this.load.spritesheet('witch',
'images/Witch Sprite Sheet.png',
{ frameWidth: 32, frameHeight: 32 }
);
}
//创建
function addGround(scene, x, y, width, height, fillColor, fillAlpha) {
var rect = new Phaser.GameObjects.Rectangle(scene, x, y, width, height, fillColor, fillAlpha);
return rect;
}
function starFacotry(scene, x, y, key, frame) {
var star = new Phaser.GameObjects.Star(scene, x, y, 32, 64, 0xffff00, 1);
// Phaser.Physics.Arcade.Components.Enable
var Components = Phaser.Physics.Arcade.Components;
var PStar = Phaser.Class({
Extends: Phaser.GameObjects.Star,
Mixins: [
Components.Acceleration,
Components.Angular,
Components.Bounce,
Components.Debug,
Components.Drag,
Components.Enable,
Components.Friction,
Components.Gravity,
Components.Immovable,
Components.Mass,
// Components.Size,
Components.Velocity
],
initialize: function (scene, x, y, points, innerRadius, outerRadius, fillColor, fillAlpha) {
// this.body= new Phaser.Physics.Arcade.Body(scene.world, this);;
Phaser.GameObjects.Star.call(this, scene, x, y, points, innerRadius, outerRadius, fillColor, fillAlpha)
}
})
return new PStar(scene, x, y, 5, 5, 10, 0xffff00, 1);
}
function create() {
this.add.image(400, 300, 'sky');
platforms = this.physics.add.staticGroup();
// 地面
var ground = addGround(this, 0, 570, 800, 30, 0x00ff88).setScale(2);
this.physics.world.enableBody(ground, Phaser.Physics.Arcade.STATIC_BODY);
ground.body.updateFromGameObject();// 更新矩阵
platforms.add(ground, true);
// platforms.create(400, 568, 'ground').setScale(2).refreshBody();
// platforms.create(600, 400, 'ground');
// platforms.create(50, 250, 'ground');
// platforms.create(750, 220, 'ground');
movingPlatform = this.physics.add.image(400, 400, 'ground');
movingPlatform.setImmovable(true);
movingPlatform.body.allowGravity = false;
movingPlatform.setVelocityX(50);
// var r1 = this.add.rectangle(0, 600, 800, 30, 0x00ff00);
// r1.setScale(2).updateDisplayOrigin();
// platforms.add(r1);
//this.physics.add.existing(r1, true);
player = this.physics.add.sprite(100, 0, 'witch', 0);
// player.setBounce(0.2);
this.anims.create({
key: 'frog',
frames: [
this.anims.generateFrameNumbers('frog', { start: 0, end: 4 }),
this.anims.generateFrameNumbers('frog', { start: 5, end: 9 }),
this.anims.generateFrameNumbers('frog', { start: 10, end: 17 })
].reduce((a,b)=>{
return a.concat(b);
},[]),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'frog2',
frames: this.anims.generateFrameNumbers('frog', { start: 5, end: 9 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'frog3',
frames: this.anims.generateFrameNumbers('frog', { start: 10, end: 5 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('witch', { start: 10, end: 17 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [{ key: 'witch', frame: 0 }],
frameRate: 20
});
this.anims.create({
key: 'space',
frames: this.anims.generateFrameNumbers('witch', { start: 20, end: 27 }),
frameRate: 10
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('witch', { start: 10, end: 17 }),
frameRate: 10,
repeat: -1
});
// 星星
stars = this.physics.add.group({
key: 'stars',
repeat: 11,
classType: starFacotry,
setXY: { x: 12, y: 0, stepX: 70 }
});
// stars.setCollideWorldBounds(true);
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
// 坏人
bombs = this.physics.add.group({
createMultipleCallback:function(entries){
entries.forEach(function(child){
// child.setRandomPosition(0,0,800,600);
// child.anims.chain('frog2')
// child.anims.chain('frog3')
child.anims.play('frog')
child.setCollideWorldBounds(true);
child.setVelocity(Phaser.Math.Between(-200, 200), 20);
})
}
});
// 积分器
scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' });
// 创建建盘输入
//An object containing the properties: up, down, left, right, space and shift.
cursors = this.input.keyboard.createCursorKeys();
// player.setInteractive();
this.input.on(Phaser.Input.Events.POINTER_DOWN, function () {
console.log('f')
});
var spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE, true, false);
spaceBar.on(Phaser.Input.Keyboard.Events.UP, function () {
console.log('space')
});
player.setCollideWorldBounds(true);// 添加对世界的边界碰撞检测
// 碰撞检测
this.physics.add.collider(player, movingPlatform)
this.physics.add.collider(player, platforms);
// this.physics.add.collider(player, r1);
// this.physics.add.collider(stars, r1);
this.physics.add.collider(stars, platforms);
this.physics.add.collider(bombs, platforms);
this.physics.add.collider(player, bombs, hitBomb, null, this);
// this.physics.add.collider(stars, player);
//Collider是一种在两个对象之间自动执行重叠检查的方法，如果它们发生则调用碰撞并处理回调。
this.physics.add.overlap(player, stars, collectStar, null, this);
setTimeout(createBombMult,3000);
}
function hitBomb(player, bomb) {
this.physics.pause();
player.setTint(0xff0000);
player.anims.play('turn');
gameOver = true;
}
function createBomb(){
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), -40);
}
var gameDifficulty=1;
function createBombMult(){
bombs.createMultiple([{
key:"frog",
repeat:Math.pow(2,gameDifficulty),
setXY:{
x:0,
y:100,
stepX:30
}
}])
}
function collectStar(player, star) {
star.disableBody(true, true);
score += 10;
scoreText.setText('Score: ' + score);
if (stars.countActive(true) === 0) {
stars.children.iterate(function (child) {
child.enableBody(true, child.x, 0, true, true);
});
createBombMult();
gameDifficulty++;
}
}
var isLeftDown = false;
function update() {
if(gameOver){
return;
}
if (cursors.left.isDown) {
player.setFlipX(true);
player.setVelocityX(-160);
//player.x-=1;
player.anims.play('left', true);
console.log('f')
}
else if (cursors.right.isDown) {
player.setFlipX(false);
player.setVelocityX(160);
// player.x+=1;
player.anims.play('right', true);
} else if (cursors.up.isDown) {
console.log('fd')
player.setVelocityY(-100);
} else if (cursors.space.isDown) {
// player.x+=1;
player.anims.play('space', true);
} else {
console.log('mf');
player.setVelocityX(0);
player.anims.play('turn');
}
if (movingPlatform.x >= 500) {
movingPlatform.setVelocityX(-50);
}
else if (movingPlatform.x <= 300) {
movingPlatform.setVelocityX(50);
}
}
</script>
</body>
</html>
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
