JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://morning-sands-32456.herokuapp.com/assets/phaser.min.js"></script>
<canvas id='game-canvas'></canvas>
JavaScript
var score = score || {};
score = {
saveHighScore: function(tally) {
var high_score = parseInt(window.localStorage.high_score);
if (typeof high_score == 'number') {
if (tally > high_score) {
window.localStorage.high_score = tally;
}
} else {
window.localStorage.high_score = tally;
}
},
getHighScore: function() {
var high_score = parseInt(window.localStorage.high_score);
if(high_score != typeof 'number') {
high_score = 0;
window.localStorage.high_score = high_score;
}
return high_score;
}
}
// window.console.log("High Score ", score.getHighScore());
window.onload = function() {
var desktop;
var pixel_ratio = window.devicePixelRatio;
// FIXME ball radius should be an integer
var ball_diameter = 25 * pixel_ratio;
var ball_radius = Math.floor(ball_diameter / 2);
var pocket_radius = 25 * pixel_ratio;
var assets_version = '0.0.2';
var standard_height = 640;
var standard_width = 360;
// use for 16:9 screen size
var screen_16_9_ratio = 1.777777778;
var game_width = Math.floor( // FIXME round up or down ie 3.511 => 4.0 not 3.0
Math.round(pixel_ratio * standard_width / 2 * screen_16_9_ratio));
var game_height = Math.floor( // round up or down
Math.round(pixel_ratio * standard_height / 2 * screen_16_9_ratio));
var game = new Phaser.Game(game_width, game_height, Phaser.AUTO, 'game-canvas',
{ preload: preload, create: create, update: update, render: render });
function preload() {
game.load.spritesheet('ball',
'assets/sprites/@' + pixel_ratio + 'x/balls-sprite.png?v=' + assets_version,
ball_diameter, // ball size x
ball_diameter, // ball size y
10); // frames in spritesheet, 10 balls: cueball + 1 to 9
game.load.image('pocket',
'assets/sprites/@' + pixel_ratio + 'x/spiral.png?v='+ assets_version);
game.load.image('heart',
'assets/sprites/@' + pixel_ratio + 'x/heart_sprite.png?v='+ assets_version);
desktop =...