0
Я запускаю свою html-игру в тизене, но разрешение игры слишком велико для экрана симулятора. Мне нужно изменить его размер, чтобы он соответствовал точным размерам автоматически.Resize Html5 phaser.js игра, чтобы поместиться в приложении Tizen
Есть ли способ изменить его размер в соответствии с разрешением экрана, используя javascript, html или css?
Я попытался использовать атрибуты ширины и высоты на холсте, установив их на 100%, но это не сработало.
Это HTML-код (с помощью phaser.js):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basketball Game</title>
<script type="text/javascript" src="js/phaser.js"></script>
<h2>Basketball Game By Hichem Romdhane && Karam Missaoui</h2>
<style type="text/css">
body {
margin: 0;
}
canvas {
margin: 0 auto;
border: thin solid black;
}
span {
display: block;
margin: 30px auto;
width: 500px;
text-align: center;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(720,1280, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('ball', 'images/ball.png');
game.load.image('hoop', 'images/hoop.png');
game.load.image('side rim', 'images/side_rim.png');
game.load.image('front rim', 'images/front_rim.png');
game.load.image('win0', 'images/win0.png');
game.load.image('win1', 'images/win1.png');
game.load.image('win2', 'images/win2.png');
game.load.image('win3', 'images/win3.png');
game.load.image('win4', 'images/win4.png');
game.load.image('lose0', 'images/lose0.png');
game.load.image('lose1', 'images/lose1.png');
game.load.image('lose2', 'images/lose2.png');
game.load.image('lose3', 'images/lose3.png');
game.load.image('lose4', 'images/lose4.png');
game.load.audio('score', 'audio/score.wav');
game.load.audio('backboard', 'audio/backboard.wav');
game.load.audio('whoosh', 'audio/whoosh.wav');
game.load.audio('fail', 'audio/fail.wav');
game.load.audio('spawn', 'audio/spawn.wav');
}
var hoop,
left_rim,
right_rim,
ball,
front_rim,
current_score = 0,
current_score_text,
high_score = 0,
high_score_text,
current_best_text;
var score_sound,
backboard,
whoosh,
fail,
spawn;
var moveInTween,
fadeInTween,
moveOutTween,
fadeOutTween,
emoji,
emojiName;
var collisionGroup;
function create() {
game.physics.startSystem(Phaser.Physics.P2JS);
game.physics.p2.setImpactEvents(true);
game.physics.p2.restitution = 0.63;
game.physics.p2.gravity.y = 0;
collisionGroup = game.physics.p2.createCollisionGroup();
score_sound = game.add.audio('score');
backboard = game.add.audio('backboard');
backboard.volume = 0.5;
whoosh = game.add.audio('whoosh');
fail = game.add.audio('fail');
fail.volume = 0.1;
spawn = game.add.audio('spawn');
game.stage.backgroundColor = "#ffffff";
// high_score_text = game.add.text(450, 25, 'High Score\n' + high_score, { font: 'Arial', fontSize: '32px', fill: '#000', align: 'center' });
current_score_text = game.add.text(187, 312, '', { font: 'Arial', fontSize: '40px', fill: '#000', align: 'center' }); // 300, 500
current_best_text = game.add.text(143, 281, '', { font: 'Arial', fontSize: '20px', fill: '#000', align: 'center' });// 230, 450
current_best_score_text = game.add.text(187, 312, '', { font: 'Arial', fontSize: '40px', fill: '#00e6e6', align: 'center' }); // 300, 500
hoop = game.add.sprite(88, 62, 'hoop'); // 141, 100
left_rim = game.add.sprite(150, 184, 'side rim'); // 241, 296
right_rim = game.add.sprite(249, 184, 'side rim'); // 398, 296
game.physics.p2.enable([ left_rim, right_rim], false);
left_rim.body.setCircle(2.5);
left_rim.body.static = true;
left_rim.body.setCollisionGroup(collisionGroup);
left_rim.body.collides([collisionGroup]);
right_rim.body.setCircle(2.5);
right_rim.body.static = true;
right_rim.body.setCollisionGroup(collisionGroup);
right_rim.body.collides([collisionGroup]);
createBall();
cursors = game.input.keyboard.createCursorKeys();
game.input.onDown.add(click, this);
game.input.onUp.add(release, this);
var instructions = document.createElement("span");
instructions.innerHTML = "Instructions: Quickly drag the ball to shoot the ball into the hoop!";
document.body.appendChild(instructions);
}
function update() {
if (ball && ball.body.velocity.y > 0) {
front_rim = game.add.sprite(148, 182, 'front rim');
ball.body.collides([collisionGroup], hitRim, this);
}
if (ball && ball.body.velocity.y > 0 && ball.body.y > 188 && !ball.isBelowHoop) {
ball.isBelowHoop = true;
ball.body.collideWorldBounds = false;
var rand = Math.floor(Math.random() * 5);
if (ball.body.x > 151 && ball.body.x < 249) {
emojiName = "win" + rand;
current_score += 1;
current_score_text.text = current_score;
score_sound.play();
} else {
emojiName = "lose" + rand;
fail.play();
if (current_score > high_score) {
high_score = current_score;
// high_score_text.text = 'High Score\n' + high_score;
}
current_score = 0;
current_score_text.text = '';
current_best_text.text = 'Current Best';
current_best_score_text.text = high_score;
}
emoji = game.add.sprite(180, 100, emojiName);
emoji.scale.setTo(0.25, 0.25);
moveInTween = game.add.tween(emoji).from({ y: 150 }, 500, Phaser.Easing.Elastic.Out, true);
fadeInTween = game.add.tween(emoji).from({ alpha: 0 }, 200, Phaser.Easing.Linear.None, true, 0, 0, false);
moveInTween.onComplete.add(tweenOut, this);
}
if (ball && ball.body.y > 1200) {
game.physics.p2.gravity.y = 0;
ball.kill();
createBall();
}
}
function tweenOut() {
moveOutTween = game.add.tween(emoji).to({ y: 50 }, 600, Phaser.Easing.Elastic.In, true);
moveOutTween.onComplete.add(function() { emoji.kill(); }, this);
setTimeout(function() {
fadeOutTween = game.add.tween(emoji).to({ alpha: 0 }, 300, Phaser.Easing.Linear.None, true, 0, 0, false);
}, 450);
}
function hitRim() {
backboard.play();
}
function createBall() {
var xpos;
if (current_score === 0) {
xpos = 200;
} else {
xpos = 60 + Math.random() * 280;
}
spawn.play();
ball = game.add.sprite(xpos, 547, 'ball');
game.add.tween(ball.scale).from({x : 0.7, y : 0.7}, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
game.physics.p2.enable(ball, false);
ball.body.setCircle(60); // NOTE: Goes from 60 to 36
ball.launched = false;
ball.isBelowHoop = false;
}
var location_interval;
var isDown = false;
var start_location;
var end_location;
function click(pointer) {
var bodies = game.physics.p2.hitTest(pointer.position, [ ball.body ]);
if (bodies.length) {
start_location = [pointer.x, pointer.y];
isDown = true;
location_interval = setInterval(function() {
start_location = [pointer.x, pointer.y];
}.bind(this), 200);
}
}
function release(pointer) {
if (isDown) {
window.clearInterval(location_interval);
isDown = false;
end_location = [pointer.x, pointer.y];
if (end_location[1] < start_location[1]) {
var slope = [end_location[0] - start_location[0], end_location[1] - start_location[1]];
var x_traj = -2300 * slope[0]/slope[1];
launch(x_traj);
}
}
}
function launch(x_traj) {
if (ball.launched === false) {
ball.body.setCircle(36);
ball.body.setCollisionGroup(collisionGroup);
current_best_text.text = '';
current_best_score_text.text = '';
ball.launched = true;
game.physics.p2.gravity.y = 3000;
game.add.tween(ball.scale).to({x : 0.6, y : 0.6}, 500, Phaser.Easing.Linear.None, true, 0, 0, false);
ball.body.velocity.x = x_traj;
ball.body.velocity.y = -1750;
ball.body.rotateRight(x_traj/3);
whoosh.play();
}
}
Где я ставлю эту часть кода? спасибо btw – HichemRomdhane
@HichemRomdhane: измените эту строку: 'var game = new Phaser.Game (720,1280, Phaser.CANVAS, '', {preload: preload, create: create, update: update});' дайте мне знать если он работает –
Это не сработало, никаких различий вообще, на экране отображается только часть игры, и вам нужно прокрутить, чтобы увидеть все это, что не так, как должно появляться вообще, и быть основанным на касании любая прокрутка может вызвать неправильный ход и проигрыш для игрока. Я смущен.. – HichemRomdhane