Jump to content

miguelito

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Neutral

About miguelito

  • Rank
    Newbie
  1. Why do not the applications work on the tablet? Hi. I'm starting to create mobile apps with Cordova, for Android. I have small tests done with the help of peers of this community. But the problem is that I try to run them on the tablet and the interface only sees a small sample of of the content. It does the job, but it goes much slower than on the mobile. I imagine the key will be in css. My question is, if I should add some plugin, configure css in some particular way, or some other file I must do something What do I need to work on tablets and phones? Maybe I do not explain very well or I do not give concrete data, but I can not think of it, I leave a sample of the code in case it is worth something. Regards, and thank you very much. Sorry for the spelling but I have to use the translator. * { box-sizing: border-box; } .main { margin: 10px auto; width: 400px; height: 400px; margin-bottom: 5px; } body { background: grey; } #score{ float: left } .time{ float:right; margin-right: 0px; } #start:hover{ background-color:#477f4e; } #start{ width:80px; margin-left:220; margin-right:auto; margin-bottom:50px; border-style:solid; border-radius:15px; border-width:1px; margin-top:7px; font-size:18px; } h1, p { font-family: open sans; margin: 5px auto; text-align: center; font-size: 95%; } .board { background: rgba(0, 0, 0, 0.15); position: relative; width: 90%; padding-bottom: 90%; margin: 50px auto; border: 1px solid black; z-index: 0; box-shadow: 0px 0px 7px black inset; overflow: hidden; } .box { position: absolute; height: 33.33%; width: 33.33%; float: left; transition: 0.5s; background-image: url("../img/bob-patricio.jpg"); box-shadow: 0px 0px 7px black; background-size: 300%; } .border { width: 100%; height: 100%; border: 1px solid black; } div.one { background-position: 0% 0%; } div.two { background-position: -100% 0%; } div.three { background-position: -200% 0% } div.four { background-position: 0% -100% } div.five { background-position: -100% -100%; } div.six { background-position: -200% -100%; } div.seven { background-position: 0% -200%; } div.eight { background-position: -100% -200%; } div.nine { background-position: -200% -200%; } #music{ display: none; autoplay: true; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/javascript" href="js/index.css"> <title>Document</title> </head> <body> <body> <div id="container"> <div id="score">Movimientos = 0</div> <div class="time" id="sec">00</div> <div class="time">:</div> <div class="time" id="min">0</div> <div class="time">TIEMPO = &nbsp; </div> <div id="start"> <span onclick="getNum()">INICIAR </span> </div> <div class="main"> <div class="board" id="board"> <div class="box one" id="1" onclick="change(1,0,0,1,1,0,0,1,1)" style="top:0%;left:0%;"> <div class="border"> </div> </div> <div class="box two" id="2" onclick="change(2,1,0,1,1,0,0,0,1)" style="top:0%;left:33.33%;"> <div class="border"> </div> </div> <div class="box three" id="3" onclick="change(3,1,0,0,1,1,0,0,1)" style="top:0%;left:66.66%;"> <div class="border"> </div> </div> <div class="box four" id="4" onclick="change(4,0,1,1,1,0,0,1,0)" style="top:33.33%;left:0%;"> <div class="border"> </div> </div> <div class="box five" id="5" onclick="change(5,1,1,1,1,0,0,0,0)" style="top:33.33%;left:33.33%;"> <div class="border"> </div> </div> <div class="box six" id="6" onclick="change(6,1,1,0,1,1,0,0,0)" style="top:33.33%;left:66.66%;"> <div class="border"> </div> </div> <div class="box seven" id="7" onclick="change(7,0,1,1,0,0,1,1,0)" style="top:66.66%;left:0%;"> <div class="border"> </div> </div> <div class="box eight" id="8" onclick="change(8,1,1,1,0,0,1,0,0)" style="top:66.66%;left:33.33%;"> <div class="border"> </div> </div> <div class="box nine" id="9" onclick="change(9,1,1,0,0,1,1,0,0)" style="top:66.66%;left:66.66%;"> <div class="border"> </div> </div> </div> </div> </div> <img src="img\bob feliz.png"> <iframe src="audio\BobEsponjaRemix.mp3" id="music"></iframe> <script type="text/javascript" src="js/index.js"></script> </body> </html> window.onload = alert("Hola...! disfruta de mi juego \nHaz clic en 'INICIAR', entonces debes colocar la imagen ... \nAsí que haz clic en la imagen..."); //establecemos el tiempo y los movimientos var steps = 0; var sec = "00"; var min = 0; var seconds; var minuts; var div_sec = document.getElementById('sec'); var div_min = document.getElementById('min'); var classNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']; function startTimer() { seconds = setInterval(secTimer, 1000); minuts = setInterval(minTimer, 60000); } function secTimer() { sec++; if (sec < 10) { sec = "0" + sec; } else if (sec > 59) { sec = "0" + 0; } div_sec.innerHTML = sec; } function minTimer() { min++; div_min.innerHTML = min; } function clearTimer() { clearInterval(seconds); clearInterval(minuts); } function resetTimer() { sec = "00"; min = 0; div_sec.innerHTML = sec; div_min.innerHTML = min; } //cambiando la imagen var numbers = document.getElementsByClassName("box"); function change(x, left, up, right, down, left2, up2, right2, down2) { var id = x; if (left == true && verIfEmpty(id - 1) == true) { steps++; changeContent(id, id - 1); } else if (left2 == true && verIfEmpty(id - 2) == true) { steps++; changeContent(id - 1, id - 2); changeContent(id, id - 1); } else if (up == true && verIfEmpty(id - 3) == true) { steps++; changeContent(id, id - 3); } else if (up2 == true && verIfEmpty(id - 6) == true) { steps++; changeContent(id - 3, id - 6); changeContent(id, id - 3); } else if (right == true && verIfEmpty(id + 1) == true) { steps++; changeContent(id, id + 1); } else if (right2 == true && verIfEmpty(id + 2) == true) { steps++; changeContent(id + 1, id + 2); changeContent(id, id + 1); } else if (down == true && verIfEmpty(id + 3) == true) { steps++; changeContent(id, id + 3); } else if (down2 == true && verIfEmpty(id + 6) == true) { steps++; changeContent(id + 3, id + 6); changeContent(id, id + 3); } } function verIfEmpty(x) { var a = document.getElementById(x); var c = a.innerHTML; if (c === "") { y = true; } else { y = false; } return y; } //Esta parte funciona gracias a Asier Villanueva function changeContent(x, y) { var m = document.getElementById(x); var n = document.getElementById(y); n.innerHTML = m.innerHTML; n.className = m.className; m.innerHTML = ""; m.className = ""; win(); showScore(); ok(); } //este generador aleatorio que encontré en internet function randomGenerator(low, high) { if (arguments.length < 2) { high = low; low = 0; } this.low = low; this.high = high; this.reset(); } randomGenerator.prototype = { reset: function () { this.remaining = []; for (var i = this.low; i <= this.high; i++) { this.remaining.push(i); } }, get: function () { if (!this.remaining.length) { this.reset(); } var index = Math.floor(Math.random() * this.remaining.length); var val = this.remaining[index]; this.remaining.splice(index, 1); return val; } } //escribe los números al azar en el rompecabezas //Esta parte funciona gracias a Asier Villanueva function getNum() { var randomNoRepeatNumbers = new randomGenerator(0, 8); for (var i = 1; i <= 9; i++) { var newNumbers = document.getElementById(i); var rndNumber = randomNoRepeatNumbers.get(); newNumbers.innerHTML = rndNumber; newNumbers.className = "box " + classNames[rndNumber - 1]; } for (var i in numbers) { if (numbers[i].innerHTML == 0) { numbers[i].innerHTML = ""; numbers[i].className = ""; } } steps = 0; showScore(); verifArray(); clearTimer(); resetTimer(); startTimer(); ok(); } function win() { var time = min + ":" + sec; var win = true; for (var i in numbers) { if (numbers[i].innerHTML != numbers[i].id) { if (numbers[i].id != numbers.length) { win = false; break; } } } if (win) { clearTimer(); function showAlert() { alert("Has ganado...!!! \nUsted hizo" + steps + "movimientos \nTu tiempo a sido " + min + " min. y " + sec + " sec."); } setTimeout(showAlert, 1000); //Modify the code with the help of @Asier Villanueva and it works perfectly var celda9 = document.getElementById('9'); celda9.innerHTML = "9"; celda9.className = "box nine"; } } function showScore() { document.getElementById("score").innerHTML = ("MOVES = " + steps); } function verifArray() { var count = 0; var arrayNum = []; for (var i = 1; i <= 9; i++) { var w = document.getElementById(i).innerHTML; arrayNum[i] = w; } for (var i = 0; i <= arrayNum.length - 1; i++) { for (var n = i + 1; n <= arrayNum.length - 1; n++) { if (arrayNum[i] > arrayNum[n] && arrayNum[n] != 0) { count++; } } } if (count % 2 != 0) { getNum(); } } function ok() { for (var i = 1; i < 10; i++) { var x = document.getElementById(i); if (x.innerHTML == i) { x.style.color = "#74a57a"; } else { x.style.color = "#ffffff"; } } }
  2. Hello, my name is Miguel

    Hello everyone, my name is Miguel, I am new to the fantastic world of programming and I have many doubts. I just want to learn and I'm doing it self-taught, so I have to ask a lot of questions. Thank you very much and I hope it does not become annoying for the members of this forum. Regards and sorry for my spelling, I have to make use of the Google translator. Thank you
×