Mobile Site
Implementation for mobile site is finished.
This commit is contained in:
parent
5b006acee3
commit
b41ac6d76f
4 changed files with 309 additions and 0 deletions
|
@ -1,6 +1,11 @@
|
||||||
//General
|
//General
|
||||||
var MOBILE_WIDH = 930;
|
var MOBILE_WIDH = 930;
|
||||||
var WINDOW_W = $(window).width();
|
var WINDOW_W = $(window).width();
|
||||||
|
var mobileSiteUrl = "/m"; // relative path
|
||||||
|
//Redirect to MobileSite
|
||||||
|
if (WINDOW_W <= MOBILE_WIDH) {
|
||||||
|
window.location.replace(mobileSiteUrl);
|
||||||
|
}
|
||||||
// Sound initialization
|
// Sound initialization
|
||||||
ion.sound({
|
ion.sound({
|
||||||
sounds: [{
|
sounds: [{
|
||||||
|
|
164
src/m/game.js
Normal file
164
src/m/game.js
Normal file
|
@ -0,0 +1,164 @@
|
||||||
|
// Sound initialization
|
||||||
|
ion.sound({
|
||||||
|
sounds: [{
|
||||||
|
name: "button_tiny",
|
||||||
|
volume: 0.8,
|
||||||
|
preload: true
|
||||||
|
}, {
|
||||||
|
name: "ta_da",
|
||||||
|
volume: 0.8,
|
||||||
|
preload: true
|
||||||
|
}, {
|
||||||
|
name: "sad_trombone",
|
||||||
|
volume: 0.8,
|
||||||
|
preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
volume: 0.5,
|
||||||
|
path: "../sound/sounds/",
|
||||||
|
preload: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get word
|
||||||
|
// words array located in words.js
|
||||||
|
var word;
|
||||||
|
var incercari;
|
||||||
|
var missArray;
|
||||||
|
var charArray1;
|
||||||
|
var charArray2;
|
||||||
|
var missArray;
|
||||||
|
|
||||||
|
function newGame(wordList) {
|
||||||
|
|
||||||
|
word = wordList[Math.floor(Math.random() * wordList.length)];
|
||||||
|
incercari = 6;
|
||||||
|
charArray1 = [];
|
||||||
|
charArray2 = [];
|
||||||
|
missArray = [];
|
||||||
|
|
||||||
|
// Create the arrays
|
||||||
|
for (var i = 0; i < word.length; i++) {
|
||||||
|
charArray1[i] = '*';
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < word.length; i++) {
|
||||||
|
charArray2[i] = word.charAt(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update page info
|
||||||
|
$('.word').html(charArray1);
|
||||||
|
$('#incercari').html(incercari);
|
||||||
|
$('.litera_msg2').html();
|
||||||
|
}
|
||||||
|
|
||||||
|
// DOM Elements & Events
|
||||||
|
$(document).ready(function() {
|
||||||
|
//$('.footer-content').append("<p><span>Spanzuratoarea</span> <em>created by</em>" + "<span>@<a href=\"http://www.twitter.com/niutenisu\">Niutenisu</a></span><p>");
|
||||||
|
|
||||||
|
var listaCuvinte = localStorage.getItem("listaCuvinte");
|
||||||
|
if (listaCuvinte != null) {
|
||||||
|
$("select[name=lista_cuvinte]").val(listaCuvinte);
|
||||||
|
newGame(eval(listaCuvinte));
|
||||||
|
} else {
|
||||||
|
newGame(animale_eu);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("select[name=lista_cuvinte]").on("change", function() {
|
||||||
|
localStorage.setItem("listaCuvinte", $(this).val());
|
||||||
|
}).next().click(function() {
|
||||||
|
// eval for transforming string into object ref!!!
|
||||||
|
newGame(eval($(this).prev().val())); // POSSIBLE EXPLOIT!!
|
||||||
|
// prev for mobile <3
|
||||||
|
/* On the page are two elements that have select[name=lista_cuvinte]
|
||||||
|
* We use next() for the button and prev() to get the value of the
|
||||||
|
* sellection. */
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on("keypress", function(e) {
|
||||||
|
var key = e.keyCode || e.which;
|
||||||
|
var key2 = String.fromCharCode(key).toLowerCase();
|
||||||
|
|
||||||
|
ion.sound.play("button_tiny");
|
||||||
|
|
||||||
|
$('.litera_msg').fadeIn('slow');
|
||||||
|
$('.litera').html(key2);
|
||||||
|
|
||||||
|
//already guessed, check,
|
||||||
|
if (check(key2)) {
|
||||||
|
$('.litera_msg2').html("aceasta litera se afla in cuvant.");
|
||||||
|
updateArray(key2);
|
||||||
|
$('.word').html(charArray1);
|
||||||
|
} else {
|
||||||
|
$('.litera_msg2').html("aceasta litera nu se afla in cuvant.");
|
||||||
|
|
||||||
|
incercari--;
|
||||||
|
|
||||||
|
if (incercari > -1) {
|
||||||
|
$('#incercari').html(incercari);
|
||||||
|
updateLetters(key2);
|
||||||
|
if (incercari == 0)
|
||||||
|
gameOver();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// check if arrays are equal
|
||||||
|
if (arraysEqual(charArray1, charArray2)) {
|
||||||
|
gameWon();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function gameWon() {
|
||||||
|
ion.sound.play("ta_da");
|
||||||
|
alert("Felicita e tenersi per mano")
|
||||||
|
window.location.reload(); // mobile
|
||||||
|
return;
|
||||||
|
//alert("You're winner!");
|
||||||
|
}
|
||||||
|
|
||||||
|
function gameOver() {
|
||||||
|
ion.sound.play("sad_trombone");
|
||||||
|
alert("Ai pierdut! CUVANT: " + word);
|
||||||
|
window.location.reload(); // for mobile phones
|
||||||
|
return; // for slower mobile phones
|
||||||
|
|
||||||
|
$('#incercari_msg').html("Game Over!");
|
||||||
|
$('#lose_word').html(word);
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(guess) {
|
||||||
|
return word.indexOf(guess) > -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateLetters(guess) {
|
||||||
|
|
||||||
|
var len = missArray.length;
|
||||||
|
if (!($.inArray(guess, missArray) > -1)) {
|
||||||
|
missArray[len] = guess;
|
||||||
|
}
|
||||||
|
$('.litere').html(missArray + " ");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateArray(guess) {
|
||||||
|
guess = guess.toLowerCase();
|
||||||
|
|
||||||
|
for (i = 0; i < charArray1.length; i++) {
|
||||||
|
if (charArray2[i] == guess) {
|
||||||
|
charArray1[i] = guess;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function arraysEqual(a, b) {
|
||||||
|
if (a === b) return true;
|
||||||
|
if (a == null || b == null) return false;
|
||||||
|
if (a.length != b.length) return false;
|
||||||
|
|
||||||
|
for (var i = 0; i < a.length; ++i) {
|
||||||
|
if (a[i] !== b[i]) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
52
src/m/index.html
Normal file
52
src/m/index.html
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Spanzuratoarea</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="author" content="Niutenisu">
|
||||||
|
<meta name="description" content="Spanzuratoarea in limba romana!">
|
||||||
|
<meta name="keywords" content="spanzuratoarea, joc, gratuit, romana">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=0.9">
|
||||||
|
<link rel="shortcut icon" href="./favicon.ico">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles.css">
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
<script src="../sound/ion.sound.min.js"></script>
|
||||||
|
<script src="../words.js"></script>
|
||||||
|
<script src="./game.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<div class="game">
|
||||||
|
<h1>Spanzuratoarea</h1>
|
||||||
|
<p class="desc">Click pe casuta si incepe sa ghicesti literele!</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<h3>Incearca sa ghicesti cuvantul: <span class="word"></span></h3>
|
||||||
|
<br>
|
||||||
|
<h4>Introdu aici litera:</h4>
|
||||||
|
<input name="mobile" type="text">
|
||||||
|
<p>VIATA: <span id="incercari"></span></p>
|
||||||
|
<h4 class="litera_msg" style="display: none;">Ai apasat pe "<span class="litera" style="color: red;"></span>
|
||||||
|
<span class="litera_msg2"></span></h4>
|
||||||
|
<h4 class="litere" style="color: red;"></h4>
|
||||||
|
<br>
|
||||||
|
<select name="lista_cuvinte" class="change_words">
|
||||||
|
<option value="animale_eu">Animale din Europa</option>
|
||||||
|
<option value="tari_eu">Tari din Europa</option>
|
||||||
|
<option value="firme">Companii</option>
|
||||||
|
<option value="ldp">Limbaje de programare</option>
|
||||||
|
</select>
|
||||||
|
<button class="">Schimba</button>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<p>
|
||||||
|
<span>Spanzuratoarea</span>
|
||||||
|
<em>created by</em>
|
||||||
|
<span> @<a href="http://www.twitter.com/niutenisu">Niutenisu</a></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
88
src/m/styles.css
Normal file
88
src/m/styles.css
Normal file
|
@ -0,0 +1,88 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #eef7fb;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #8AD4B8;
|
||||||
|
-webkit-text-stroke: 1px #375449;
|
||||||
|
-moz-text-stroke: 1px #375449;
|
||||||
|
-o-text-stroke: 1px #375449;
|
||||||
|
text-stroke: 1px #375449;
|
||||||
|
font-family: "Impact", "Arial Black";
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-style: oblique;
|
||||||
|
font-variant: small-caps;
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: #8AD4B8;
|
||||||
|
-webkit-text-stroke: 1px #375449;
|
||||||
|
-moz-text-stroke: 1px #375449;
|
||||||
|
-o-text-stroke: 1px #375449;
|
||||||
|
text-stroke: 1px #375449;
|
||||||
|
font-family: "Courier New", "Courier";
|
||||||
|
font-size: 110%;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
border-bottom: 2px solid #527f6e;
|
||||||
|
border-top: 2px solid #527f6e;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: "Trebuchet MS", Helvetica, Arial;
|
||||||
|
color: #e9f5fa;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-family: sans-serif, Helvetica, Verdana;
|
||||||
|
color: #c9e7f3;
|
||||||
|
background-color: #8aa3c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[name=mobile] {
|
||||||
|
background-color: white;
|
||||||
|
border-style: solid;
|
||||||
|
padding: 4px;
|
||||||
|
border-color: #c9e7f3;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 25px auto;
|
||||||
|
padding: 5px;
|
||||||
|
min-width: 10%;
|
||||||
|
width: 85%;
|
||||||
|
min-height: 100%;
|
||||||
|
margin-bottom: -50px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: monospace ;
|
||||||
|
color: #375449;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer, .container:after {
|
||||||
|
height: 50px;
|
||||||
|
}
|
Loading…
Reference in a new issue