JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.js"></script>
JavaScript
var game;
var heroSpeed = 150;
var heroGravity = 400;
var config = {
width: 480,
height: 320,
backgroundColor: 0x000000,
scene: {
preload: preload,
create: create,
update: update
},
physics: {
default: "arcade",
arcade:{
gravity:{
y: 400
},
debug: false,
debugShowVelocity: false
}
}
}
window.onload = function() {
game = new Phaser.Game(config);
}
function preload ()
{
this.load.crossOrigin = 'anonymous';
this.load.spritesheet("hero", "https://upload.cc/i1/2019/12/14/Es6Jir.png", { frameWidth: 20, frameHeight: 32 });
this.load.image("floor", "https://upload.cc/i1/2019/12/14/wFxrdS.png");
this.load.image("slope", "https://upload.cc/i1/2019/12/14/KiadwZ.png");
this.load.image("big", "https://upload.cc/i1/2019/12/14/6dz9kp.png");
}
function create ()
{
this.floor = this.physics.add.image(190, config.height - 66, "floor");
// this.flooe.setOrigin(0);
this.floor.setImmovable(true);
this.floor.body.allowGravity = false;
this.big = this.physics.add.sprite(config.width -100, config.height - 132, "big");
this.big.setImmovable(true);
this.big.body.allowGravity = false;
this.slope = this.physics.add.sprite(config.width - 200, config.height - 132, "slope");
this.slope.setImmovable(true);
this.slope.body.allowGravity = false;
this.hero = this.physics.add.sprite(32, config.height / 2, "hero");
this.hero.setCollideWorldBounds(true);
// this.hero.anchor.set(0.5);
this.hero.goingRight = false;
this.hero.goingLeft = false;
this.hero.body.gravity.y = heroGravity;
this.g = false;
this.rightKeyPressed = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
this.leftKeyPressed =...