JSFiddle - React, Tailwind, and code Playground
CSS
.level_begin_label{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: #000;
padding-top: 20px;
color: #fff;
text-align: center;
font: 20px arial, sans-serif;
}
.any_key_invitation{
margin-top: 10px;
font-size: 16px;
}
.game{
/* position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;*/
z-index: 10;
position: relative;
background: #000;
width: 300px;
height: 100%;
margin: 0 auto;
padding-top: 40px;
color: #fff;
}
JavaScript
var Game = function(parentGameElementTag) {
this.parentGameElementTag = parentGameElementTag;
this.gameElementId = 'game';
this.levelObj = new Level();
this.init();
};
Game.prototype = {
init: function() {
$('<div class="game" id="' + this.gameElementId + '"></div>').appendTo(this.parentGameElementTag);
}
};
var Level = function() {
var self = this;
this.fieldElementId = 'field';
this.levelScreenDisplay('body');
};
//Level.prototype = Game;
Level.prototype = Object.create(Game.prototype);
Level.prototype = {
levelScreenDisplay: function(parentElementTag) {
$('<div class="level_begin_label" id="levelBeginLabel">Уровень: ' + this.level + '</div>').appendTo(parentElementTag);
setTimeout(function() {
$('<div class="any_key_invitation" id="anyKeyInvitation">Нажмите любую клавишу для старта</div>').appendTo('#levelBeginLabel');
document.onkeypress = function() {
document.onkeypress = undefined;
$('#levelBeginLabel').remove();
};
}, 1000);
}
};
var app = new Game('body');