我创建了一个Erase-A-Man游戏，当我在移动设备上观看时，这是主要观点。总是滚动查看其余的字母，我试图使页面适合所有手机屏幕尺寸，这样就不需要向上或向下滚动来查看整个游戏。任何帮助都会很感激。
HTML
<div id="home" data-role="page">
<p>
<p id="warning">JavaScript must be enabled to play this game.</p>
<div role="main" class="ui-content">
<p>
<div id="help"></div>
<div id="helptext">
<h2>How to Play</h2>
<div id="close"></div>
<p>Hangman is a word-guessing game. Click or tap New Game to display the letters of the alphabet and a row of dashes indicating the number of letters to be guessed. Click or tap a letter. If it's in the word, it replaces the dash(es). Each wrong guess results in a stroke being added to a gallows and its victim. Your role is to guess the word correctly before the victim meets his grisly fate.</p>
</div>
</p>
</div>
<p id="loading">Game loading. . .</p>
<canvas id="stage" width="200" height="200">Sorry, your browser needs to support canvas for this 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 the loading message and display the 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 the canvas if the screen is wider than 700px
if (screen.innerWidth >= 700) {
canvas.getContext('2d').scale(1.5, 1.5);
}
// Initialize the scores and store locally if not already stored
if (localStorage.getItem('hangmanWin') == null) {
localStorage.setItem('hangmanWin', '0');
}
if (localStorage.getItem('hangmanLose') == null) {
localStorage.setItem('hangmanLose', '0');
}
showScore();
}
// Display the score in the canvas
function showScore() {
var won = localStorage.getItem('hangmanWin'),
lost = localStorage.getItem('hangmanLose'),
c = canvas.getContext('2d');
// clear the 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 the same length as letters to guess
for (var i = 0; i < wordLength; i++) {
placeholders += '_';
}
word.innerHTML = placeholders;
// create an alphabet pad to select letters
letters.innerHTML = '';
for (i = 0; i < 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();
}
// Get selected letter and remove it from the alphabet pad
function getLetter() {
checkLetter(this.innerHTML);
this.innerHTML = ' ';
this.style.cursor = 'default';
this.onclick = null;
}
// Check whether selected letter is in the word to be guessed
function checkLetter(letter) {
var placeholders = word.innerHTML,
wrongGuess = true;
// split the placeholders into an array
placeholders = placeholders.split('');
// loop through the array
for (var i = 0; i < wordLength; i++) {
// if the selected letter matches one in the word to guess,
// replace the underscore and increase the number of correct guesses
if (wordToGuess.charAt(i) == letter.toLowerCase()) {
placeholders[i] = letter;
wrongGuess = false;
correctGuesses++;
// redraw the canvas only if all letters have been guessed
if (correctGuesses == wordLength) {
drawCanvas();
}
}
}
// if the guess was incorrect, increment the number of bad
// guesses and redraw the canvas
if (wrongGuess) {
badGuesses++;
drawCanvas();
}
// convert the array to a string and display it again
word.innerHTML = placeholders.join('');
}
// Draw the canvas
function drawCanvas() {
var c = canvas.getContext('2d');
// reset the canvas and 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 the 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 and end game
drawLine(c, [100,130], [115,170]);
// start building the gallows if there's been a bad guess
if (badGuesses > 0) {
// erase the 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 the alphabet pad
letters.innerHTML = '';
// display the correct answer
// need to use setTimeout to prevent race condition
setTimeout(showResult, 200);
// increase score of lost games
localStorage.setItem('hangmanLose', 1 + parseInt(localStorage.getItem('hangmanLose')));
// display the score after two seconds
setTimeout(showScore, 2000);
}
}
// if the word has been guessed correctly, display message,
// update score of games won, and then 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 the game is over, display missing letters in red
function showResult() {
var placeholders = word.innerHTML;
placeholders = placeholders.split('');
for (i = 0; i < wordLength; i++) {
if (placeholders[i] == '_') {
placeholders[i] = '<span style="color:red">' + wordToGuess.charAt(i).toUpperCase() + '</span>';
}
}
word.innerHTML = placeholders.join('');
}
// Reset stored scores to zero
function resetScore() {
localStorage.setItem('hangmanWin', '0');
localStorage.setItem('hangmanLose', '0');
showScore();
}
// Select random word to guess
function getWord() {
var a = 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)];
}
再次感谢