nikatlas
/
Tetris3D


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<html>

<title>Three JS </title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/6.2.0/pouchdb.js"></script>
<script src="js/libs/pouchdb.authentication.js"></script>
<script src="js/three.min.js"></script>
<script src="js/libs/controls/OrbitControls.js"></script>
<script src="js/libs/ImprovedNoise.js"></script>
<style type="text/css">
    canvas{
        position: fixed;
        top:0;
        left:0;
    }
    .ui{
        position:fixed;
        top:0px;
        width: 40vw;
        max-height: 300px;
        background-color: rgba(74, 166, 247,0.5);
        border-radius: 5px;
        z-index: 10000;
        left: 30vw;
        padding:10px;
        margin:10px;
        color:white;
        font-family:Tahoma;
        font-size:18px;
        text-align: center;
    }
    #highscore {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 200px;
        font-family: Tahoma;
        font-size:26px;
        font-weight: bold;
        min-height: 30px;
        border-radius: 5px;
        background: rgba(70,50,195, 0.85);
        z-index: 999;
        padding: 10px;
        color: white;
        text-align: center;
    }

    #lost {
        position: fixed;
        top: 100px;
        width: 50vw;
        left: 25vw;
        font-family: Tahoma;
        font-size:20px;
        font-weight: bold;
        min-height: 30px;
        border-radius: 15px;
        background: rgba(66,50,215, 0.895);
        z-index: 1999;
        padding: 10px;
        color: white;
        text-align: center;
        display: none;
    }
    #myscore{
        font-weight: 100;
        font-size: 26px;
        color: yellow;
    }
    .soundplayer{
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: rgba(16,10,10, 0.895);
        z-index: 999;
    }

</style>
<body>
<div class="ui">
    <div>
        Use 'w,a,s,d' to move the dropping shape! 'i,j,k,l' will rotate the shape around the Y_AXIS while 'u,o' around X_AXIS. Fill up the planes to make the best highscore! 
    </div>
</div>
<div id="highscore">
    
</div>

<div id="lost">
    You finished the game with Score <br><span id="myscore"></span>
    <div class="table">
        <div class="row">
            <div class="col-xs-6"><b>Name</b></div>
            <div class="col-xs-6"><b>Score</b></div>
        </div>
        <div class="row" id="scores">
        </div>
    </div>
    <div class="table">
        <div class="row">
            <input type="text" name="name" id="name" placeholder="Write your name.." class="btn">
            <input type="button" value="Save" onclick="saveToDB()" class="btn btn-primary">
        </div>
        <div class="row">
            <input type="button" value="Play Again" onclick="restartGame()" class="btn btn-primary">
        </div>
    </div>
</div>

<div class="soundplayer">
    <audio controls loop autoplay="">
        <source src="theme.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div>
<script src="js/GameBox.js"></script>
<script src="js/Game.js"></script>
<script src="js/app.js"></script>

</body>
</html>