javascript - Make game/site fit on screen without scrolling? -
i have created erase-a-man game , when view on mobile device main point. there scrolling see rest of letters, trying make page fit phone screen sizes there no need scroll or down see whole game. grateful.
html
<div id="home" data-role="page"> <p> <p id="warning">javascript must enabled play game.</p> <div role="main" class="ui-content"> <p> <div id="help"></div> <div id="helptext"> <h2>how play</h2> <div id="close"></div> <p>hangman word-guessing game. click or tap new game display letters of alphabet , row of dashes indicating number of letters guessed. click or tap letter. if it's in word, replaces dash(es). each wrong guess results in stroke being added gallows , victim. role guess word correctly before victim meets grisly fate.</p> </div> </p> </div> <p id="loading">game loading. . .</p> <canvas id="stage" width="200" height="200">sorry, browser needs support canvas game.</canvas> <div role="main" class="ui-content"> <p><div id="play">new game</div> <div id="clear">clear score</div></p> </div> <p id="word"></p> <div id="letters"></div> <!--<div align="center"><img src="images/cactus-sslandscape_00152016.jpg" class="bg"></div> --> </p> </div> </body> javascript
// global variables var canvas = document.getelementbyid('stage'), word = document.getelementbyid('word'), letters = document.getelementbyid('letters'), wordtoguess, wordlength, badguesses, correctguesses; function init() { var helptext = $('#helptext'), w = screen.availwidth <= 800 ? screen.availwidth : 800; // hide loading message , display control buttons $('#loading').hide(); $('#play').css('display', 'inline-block').click(newgame); $('#clear').css('display', 'inline-block').click(resetscore); $('#help').click(function(e) { $('body').append('<div id="mask"></div>'); helptext.show().css('margin-left', (w-300)/2 + 'px'); }); $('#close').click(function(e) { $('#mask').remove(); helptext.hide(); }); // rescale canvas if screen wider 700px if (screen.innerwidth >= 700) { canvas.getcontext('2d').scale(1.5, 1.5); } // initialize scores , store locally if not stored if (localstorage.getitem('hangmanwin') == null) { localstorage.setitem('hangmanwin', '0'); } if (localstorage.getitem('hangmanlose') == null) { localstorage.setitem('hangmanlose', '0'); } showscore(); } // display score in canvas function showscore() { var won = localstorage.getitem('hangmanwin'), lost = localstorage.getitem('hangmanlose'), c = canvas.getcontext('2d'); // clear canvas canvas.width = canvas.width; c.font = 'bold 24px stencil, arial, helvetica, sans-serif'; c.fillstyle = 'black'; c.textalign = 'center'; c.filltext('your score', 100, 50); c.font = 'bold 18px optimer, arial, helvetica, sans-serif'; c.filltext('won: ' + won + ' lost: ' + lost, 100, 80); } // start new game function newgame() { var placeholders = '', frag = document.createdocumentfragment(), abc = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t' ,'u','v','w','x','y','z']; badguesses = 0; correctguesses = 0; wordtoguess = getword(); wordlength = wordtoguess.length; // create row of underscores same length letters guess (var = 0; < wordlength; i++) { placeholders += '_'; } word.innerhtml = placeholders; // create alphabet pad select letters letters.innerhtml = ''; (i = 0; < 26; i++) { var div = document.createelement('div'); div.style.cursor = 'pointer'; div.innerhtml = abc[i]; div.onclick = getletter; frag.appendchild(div); } letters.appendchild(frag); drawcanvas(); } // selected letter , remove alphabet pad function getletter() { checkletter(this.innerhtml); this.innerhtml = ' '; this.style.cursor = 'default'; this.onclick = null; } // check whether selected letter in word guessed function checkletter(letter) { var placeholders = word.innerhtml, wrongguess = true; // split placeholders array placeholders = placeholders.split(''); // loop through array (var = 0; < wordlength; i++) { // if selected letter matches 1 in word guess, // replace underscore , increase number of correct guesses if (wordtoguess.charat(i) == letter.tolowercase()) { placeholders[i] = letter; wrongguess = false; correctguesses++; // redraw canvas if letters have been guessed if (correctguesses == wordlength) { drawcanvas(); } } } // if guess incorrect, increment number of bad // guesses , redraw canvas if (wrongguess) { badguesses++; drawcanvas(); } // convert array string , display again word.innerhtml = placeholders.join(''); } // draw canvas function drawcanvas() { var c = canvas.getcontext('2d'); // reset canvas , set basic styles canvas.width = canvas.width; c.linewidth = 3; c.strokestyle = 'green'; c.font = 'bold 24px optimer, arial, helvetica, sans-serif'; c.fillstyle = 'red'; // draw ground drawline(c, [20,172], [180,172]); c.strokestyle = 'black'; // draw head c.beginpath(); c.moveto(115, 45); c.arc(100, 45, 15, 0, (math.pi/180)*360); c.stroke(); // draw left eye c.beginpath(); c.moveto(97, 39); c.arc(95, 40, 2, 0, (math.pi/180)*360); c.stroke(); // draw right eye c.beginpath(); c.moveto(103, 39); c.arc(105, 40, 2, 0, (math.pi/180)*360); c.stroke(); // draw mouth drawline(c, [92,53], [108,50]); // draw body drawline(c, [100,60], [100,130]); // draw left arm drawline(c, [100,80], [65,90]); // draw right arm drawline(c, [100,80], [135,90]); // draw left leg drawline(c, [100,130], [85,170]); // draw right leg , end game drawline(c, [100,130], [115,170]); // start building gallows if there's been bad guess if (badguesses > 0) { // erase right arm c.linewidth = 6; c.strokestyle = '#e6e6e6'; drawline(c, [100,80], [135,90]); if (badguesses > 1) { // erase left leg drawline(c, [100,130], [85,170]); } if (badguesses > 2) { // erase left arm drawline(c, [100,80], [65,90]); } if (badguesses > 3) { // erase right leg drawline(c, [100,130], [115,170]); } if (badguesses > 4) { // erase body drawline(c, [100,60], [100,130]); } if (badguesses > 5) { // erase mouth drawline(c, [92,53], [108,50]); } if (badguesses > 6) { // erase head c.beginpath(); c.moveto(115, 45); c.arc(100, 45, 15, 0, (math.pi/180)*360); c.stroke(); } if (badguesses > 7) { // erase right eye c.beginpath(); c.moveto(103, 39); c.arc(105, 40, 2, 0, (math.pi/180)*360); c.stroke(); } if (badguesses > 8) { //erase left eye c.beginpath(); c.moveto(97, 39); c.arc(95, 40, 2, 0, (math.pi/180)*360); c.stroke(); c.filltext('game over', 45, 110); // remove alphabet pad letters.innerhtml = ''; // display correct answer // need use settimeout prevent race condition settimeout(showresult, 200); // increase score of lost games localstorage.setitem('hangmanlose', 1 + parseint(localstorage.getitem('hangmanlose'))); // display score after 2 seconds settimeout(showscore, 2000); } } // if word has been guessed correctly, display message, // update score of games won, , show score after 2 seconds if (correctguesses == wordlength) { letters.innerhtml = ''; c.filltext('you won!', 45,110); // increase score of won games // display score localstorage.setitem('hangmanwin', 1 + parseint(localstorage.getitem('hangmanwin'))); settimeout(showscore, 2000); } } function drawline(context, from, to) { context.beginpath(); context.moveto(from[0], from[1]); context.lineto(to[0], to[1]); context.stroke(); } // when game over, display missing letters in red function showresult() { var placeholders = word.innerhtml; placeholders = placeholders.split(''); (i = 0; < wordlength; i++) { if (placeholders[i] == '_') { placeholders[i] = '<span style="color:red">' + wordtoguess.charat(i).touppercase() + '</span>'; } } word.innerhtml = placeholders.join(''); } // reset stored scores 0 function resetscore() { localstorage.setitem('hangmanwin', '0'); localstorage.setitem('hangmanlose', '0'); showscore(); } // select random word guess function getword() { var = new array('a','we','you','will','he','to','bed','ton','tin','tan','can','see','run', 'the','in','so','no','now','man','ten','me','do','and','go','at','on','a','it','is','she'); return a[parseint(math.random()* a.length)]; } thanks again
should doable css.
#home { overflow: hidden; } alternatively can set property javascript.
document.getelementbyid('home').style.overflow = hidden; i havent used jquery before, know possible set element properties it, might want up.
Comments
Post a Comment