Local storage working
This commit is contained in:
parent
4c33b827c3
commit
da018a5c73
2 changed files with 67 additions and 18 deletions
|
|
@ -1,15 +1,23 @@
|
|||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
({__proto__: []} instanceof Array && function (d, b) {
|
||||
d.__proto__ = b;
|
||||
}) ||
|
||||
function (d, b) {
|
||||
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
|
||||
};
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
|
||||
function __() {
|
||||
this.constructor = d;
|
||||
}
|
||||
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
|
|
@ -36,64 +44,81 @@ var paused;
|
|||
var hasAlreadyScored = false;
|
||||
var hasDied = true;
|
||||
var ready = true;
|
||||
|
||||
function preload() {
|
||||
font = loadFont(FONT_PATH);
|
||||
backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
|
||||
pipeImage = loadImage(PIPE_IMAGE_PATH);
|
||||
floorImage = loadImage(FLOOR_IMAGE_PATH);
|
||||
}
|
||||
|
||||
function setup() {
|
||||
createCanvas(2000, 1000);
|
||||
createCanvas(1085, 600);
|
||||
floorHeight = height / 5;
|
||||
setupObstacleConsts();
|
||||
setupFont();
|
||||
setupGame();
|
||||
var originalSetItem = localStorage.setItem;
|
||||
localStorage.setItem = function () {
|
||||
document.createEvent('Event').initEvent('itemInserted', true, true);
|
||||
localStorage.setItem = function (key, value) {
|
||||
var event = new Event('itemInserted');
|
||||
|
||||
event.value = value; // Optional..
|
||||
event.key = key; // Optional..
|
||||
window.dispatchEvent(event);
|
||||
originalSetItem.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
function setupObstacleConsts() {
|
||||
obstacleOffset = width / OBSTACLE_COUNT;
|
||||
obstacleWidth = width / 22.727272727272727272;
|
||||
Obstacle.distanceBetweenPipes = height / 2.5;
|
||||
Obstacle.startX = width;
|
||||
}
|
||||
|
||||
function setupFont() {
|
||||
textSize(150);
|
||||
textAlign(CENTER);
|
||||
textFont(font);
|
||||
}
|
||||
|
||||
function setupGame() {
|
||||
paused = true;
|
||||
raspberry = new Raspberry(RASPBERRY_IMAGE_PATH);
|
||||
setupObstacles();
|
||||
}
|
||||
|
||||
function setupObstacles() {
|
||||
obstacles = [];
|
||||
instantiateObstacles(OBSTACLE_COUNT);
|
||||
obstacles.forEach(function (obstacle) { return obstacle.randomizeHeight(); });
|
||||
obstacles.forEach(function (obstacle) {
|
||||
return obstacle.randomizeHeight();
|
||||
});
|
||||
}
|
||||
|
||||
function instantiateObstacles(number) {
|
||||
for (var i = 0; i < number; i++) {
|
||||
obstacles.push(new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage));
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
update();
|
||||
gameLoop();
|
||||
drawGame();
|
||||
}
|
||||
|
||||
function drawGame() {
|
||||
drawScenery();
|
||||
drawEntities();
|
||||
displayScore();
|
||||
}
|
||||
|
||||
function drawScenery() {
|
||||
background(backgroundImage);
|
||||
drawFloor();
|
||||
}
|
||||
|
||||
function drawFloor() {
|
||||
push();
|
||||
noFill();
|
||||
|
|
@ -101,45 +126,55 @@ function drawFloor() {
|
|||
rect(0, height - floorHeight, width, floorHeight);
|
||||
pop();
|
||||
}
|
||||
|
||||
function drawEntities() {
|
||||
raspberry.draw();
|
||||
drawObstacles();
|
||||
}
|
||||
|
||||
function drawObstacles() {
|
||||
obstacles.forEach(function (obstacle) {
|
||||
obstacle.draw();
|
||||
});
|
||||
}
|
||||
|
||||
function gameLoop() {
|
||||
if (!paused) {
|
||||
collisionCheck(obstacles[0]);
|
||||
checkRaspberryScore();
|
||||
}
|
||||
}
|
||||
|
||||
function collisionCheck(o) {
|
||||
if (o.collides(raspberry)) {
|
||||
die();
|
||||
setupGame();
|
||||
}
|
||||
}
|
||||
|
||||
function die() {
|
||||
ready = false;
|
||||
hasDied = true;
|
||||
playTime = Date.now() - startTime;
|
||||
exportToLocalStorage();
|
||||
setTimeout(function () { return ready = true; }, 1000);
|
||||
setTimeout(function () {
|
||||
return ready = true;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function exportToLocalStorage() {
|
||||
localStorage.setItem("game-playTime", String(playTime));
|
||||
localStorage.setItem("game-score", String(score));
|
||||
localStorage.setItem("game-isRunning", String(!hasDied));
|
||||
}
|
||||
|
||||
function displayScore() {
|
||||
push();
|
||||
fill(195, 33, 34);
|
||||
text(score, 0, height / 10, width, height);
|
||||
pop();
|
||||
}
|
||||
|
||||
function update() {
|
||||
if (!paused) {
|
||||
raspberry.update();
|
||||
|
|
@ -151,6 +186,7 @@ function update() {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function checkObstacleReset(obstacle) {
|
||||
if (obstacle.position.x < -obstacleWidth) {
|
||||
obstacle.resetPosition();
|
||||
|
|
@ -159,6 +195,7 @@ function checkObstacleReset(obstacle) {
|
|||
hasAlreadyScored = false;
|
||||
}
|
||||
}
|
||||
|
||||
function checkRaspberryScore() {
|
||||
if ((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
|
||||
&& !hasAlreadyScored) {
|
||||
|
|
@ -166,6 +203,7 @@ function checkRaspberryScore() {
|
|||
hasAlreadyScored = true;
|
||||
}
|
||||
}
|
||||
|
||||
function resetScore() {
|
||||
if (hasDied) {
|
||||
hasDied = false;
|
||||
|
|
@ -175,6 +213,7 @@ function resetScore() {
|
|||
exportToLocalStorage();
|
||||
}
|
||||
}
|
||||
|
||||
function keyPressed() {
|
||||
if (!ready)
|
||||
return;
|
||||
|
|
@ -184,11 +223,11 @@ function keyPressed() {
|
|||
}
|
||||
if (key == "Escape") {
|
||||
paused = !paused;
|
||||
}
|
||||
else if (paused) {
|
||||
} else if (paused) {
|
||||
paused = false;
|
||||
}
|
||||
}
|
||||
|
||||
var Entity = (function () {
|
||||
function Entity(position, width, height, fill) {
|
||||
this.position = position;
|
||||
|
|
@ -197,6 +236,7 @@ var Entity = (function () {
|
|||
this.fill = fill;
|
||||
this._showHitbox = false;
|
||||
}
|
||||
|
||||
Object.defineProperty(Entity.prototype, "position", {
|
||||
get: function () {
|
||||
return this._position;
|
||||
|
|
@ -247,6 +287,7 @@ var Entity = (function () {
|
|||
}());
|
||||
var Obstacle = (function (_super) {
|
||||
__extends(Obstacle, _super);
|
||||
|
||||
function Obstacle(position, obstacleWidth, obstacleHeight, image) {
|
||||
var _this = _super.call(this, position, obstacleWidth, obstacleHeight, 0) || this;
|
||||
_this.speed = 3;
|
||||
|
|
@ -254,6 +295,7 @@ var Obstacle = (function (_super) {
|
|||
_this.createPipes(position, obstacleHeight, obstacleWidth, image);
|
||||
return _this;
|
||||
}
|
||||
|
||||
Object.defineProperty(Obstacle, "startX", {
|
||||
set: function (value) {
|
||||
this._startX = value;
|
||||
|
|
@ -301,11 +343,13 @@ var Obstacle = (function (_super) {
|
|||
}(Entity));
|
||||
var Pipe = (function (_super) {
|
||||
__extends(Pipe, _super);
|
||||
|
||||
function Pipe(positionX, width, height, image) {
|
||||
var _this = _super.call(this, new Position(positionX, 0), width, height, 0) || this;
|
||||
_this.image = image;
|
||||
return _this;
|
||||
}
|
||||
|
||||
Pipe.prototype.update = function () {
|
||||
};
|
||||
Pipe.prototype.draw = function () {
|
||||
|
|
@ -327,8 +371,7 @@ var Pipe = (function (_super) {
|
|||
}
|
||||
image(this.image, this.position.x, this.position.y + imageYPosition, this.width, computedImageHeight);
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
image(this.image, this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
};
|
||||
|
|
@ -354,6 +397,7 @@ var Position = (function () {
|
|||
this._x = x;
|
||||
this._y = y;
|
||||
}
|
||||
|
||||
Object.defineProperty(Position.prototype, "x", {
|
||||
get: function () {
|
||||
return this._x;
|
||||
|
|
@ -378,6 +422,7 @@ var Position = (function () {
|
|||
}());
|
||||
var Raspberry = (function (_super) {
|
||||
__extends(Raspberry, _super);
|
||||
|
||||
function Raspberry(image) {
|
||||
var _this = this;
|
||||
Raspberry.position = new Position(width / 6, height / 2);
|
||||
|
|
@ -391,6 +436,7 @@ var Raspberry = (function (_super) {
|
|||
_this.image = image;
|
||||
return _this;
|
||||
}
|
||||
|
||||
Object.defineProperty(Raspberry.prototype, "velocity", {
|
||||
get: function () {
|
||||
return this._velocity;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
<script>
|
||||
import App from "@/App.vue";
|
||||
import {Rest} from "@/model/Rest";
|
||||
|
||||
export default {
|
||||
name: "Game",
|
||||
props: {
|
||||
|
|
@ -13,12 +15,13 @@ export default {
|
|||
},
|
||||
emits: ['gameFinished'],
|
||||
created() {
|
||||
window.addEventListener('storage', this.localStorageHandler, false);
|
||||
window.addEventListener('itemInserted', event => this.localStorageHandler(event), false);
|
||||
},
|
||||
methods: {
|
||||
localStorageHandler(event) {
|
||||
if (event.key !== 'game-isRunning') return;
|
||||
|
||||
localStorageHandler() {
|
||||
if (localStorage.getItem('game-isRunning') !== 'true') {
|
||||
if (event.value === 'false') { //means game is over
|
||||
let playTime = this.msToHMS(Number(localStorage.getItem('game-playTime')));
|
||||
let score = Number(localStorage.getItem('game-score'));
|
||||
this.submitGame(score, playTime);
|
||||
|
|
@ -35,17 +38,17 @@ export default {
|
|||
const minutes = parseInt(String(seconds / 60)); // 60 seconds in 1 minute
|
||||
// 4- Keep only seconds not extracted to minutes:
|
||||
seconds = seconds % 60;
|
||||
return hours + ":" + minutes + ":" + seconds;
|
||||
return ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + Math.floor(seconds);
|
||||
},
|
||||
|
||||
async submitGame(score, playTime) {
|
||||
let body = {
|
||||
score: score,
|
||||
playtime: playTime,
|
||||
date: new Date(),
|
||||
date: new Date().toISOString(),
|
||||
userId: this.userId,
|
||||
}
|
||||
await fetch(App.data().restUrl + '/game/add', {method: 'POST', body: JSON.stringify(body)});
|
||||
await fetch(Rest.URL + '/game/add', {method: 'POST', body: JSON.stringify(body)});
|
||||
this.$emit('gameFinished');
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue