<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<img id="img" src="../assets/sprites/my_plane.png" alt="plane" width="30" height="10">
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create,
update : update
}
};
var game = new Phaser.Game(config);
var hero;
var myObstacles = [];
let heart=1000;
var frameNo=0;
var graphics;
var s;
function preload ()
{
this.load.image('plane', '../assets/sprites/plane.png');
}
function create ()
{
s=0;
text = this.add.text(10, 10, '', { font: '16px Courier', fill: '#00ff00' });
text2 = this.add.text(200, 10, '', { font: '30px Courier', fill: '#00ff00' });
text3 = this.add.text(400, 10, '', { font: '30px Courier', fill: '#00ff00' });
graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 }, fillStyle: { color: 0xff0000 }});
//const image1=this.add.image(200, 300, 'plane');
// hero = this.physics.add.existing(new hero(this, 100, 100));
// hero = new hero(73, 25 ,"img1", 10,200);
//this.children.add(new hero(this, 164, 250));
//this.add.text(50, 50, 'test');
hero = new player(this, 100, 200, 'plane' );
this.input.on('pointerdown', function (pointer) {
if (pointer.x>400) s+=3;
if (pointer.x<400) s-=3;
}, this);
} // create function
//======================================
class player extends Phaser.GameObjects.Sprite{
constructor(scene, x, y , name){
super(scene, x, y, name);
this.scene.add.existing(this);
scene.physics.world.enableBody(this);
this.body.setGravityY(0);
this.body.setCollideWorldBounds(true);
}
update(){
//this.body.setVelocityX(s);
this.body.setVelocityY(s);
//this.body.setGravityY(s) ;
} // update
crashWith (otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
} // class
// ========================================
// ------- update function --------------
function update()
{
graphics.clear();
for (i = 0; i < myObstacles.length; i += 1) {
if (hero.crashWith(myObstacles[i])) {
heart--;
if (heart<0)
return;
}// if
} // for
frameNo += 1;
if (frameNo == 1 || everyinterval(150)) {
text.setText([
'ccc'
]);
// x = canvas.width;
myObstacles.push(new component (100, 100, 0xffff00, 600, 80));
} // if frameno 150
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}// for loop for move objects
//hero.newPos();
hero.update();
text.setText([
'frameNo: ' + frameNo
]);
text2.setText([
'h: ' + heart
]);
text3.setText([
's: ' + s
])
}// uodate function
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.color=color;
this.x = x;
this.y = y;
this.update = function() {
graphics.fillStyle(this.color);
graphics.fillRect(this.x, this.y, this.width, this.height);
}
} // component
function everyinterval(n) {
if ((frameNo / n) % 1 == 0) {return true;}
return false;
}
</script>
</body>
</html>
dev.to
