bobelliottjr
New Member
- Joined
- Feb 25, 2011
- Messages
- 1
- Reaction score
- 0
See the html code below, this code runs fine on a pc running windows 8.1 Pro but it will not run on my iphone 8 plus, please help
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<!-- Created by: April Williams 2019-10-03 -->
<head>
<title>HTML5 Document</title>
<meta charset="UTF-8" />
<style>
body { font-family: Arial, Helvetica, sans-serif; font-size: 150%; }
button { font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
.square {height: 100px; width: 100px; text-align: center; font-size: 50px}
table, th, td {border: 1px solid black;}
</style>
<script type="text/javascript">
//start game onload
function start(){
document.turn = "X";
document.winner = null;
displayMessage("It's " + document.turn + "'s turn");
document.xArray = [];
document.oArray = [];
}
//restart game when reset button is clicked
function restart(){
var reset = confirm("Are you sure you want to reset?");
if (reset == true){
for(var i = 1; i<=4; i= i +1){
for(var j = 1; j<=4; j=j+1){
setValue(i,j);
}
}
}
start();
}
//Handle move when square is clicked
//main function
function handleClick(square) {
if(document.winner != null){
displayMessage("Game over!");
} else if(square.innerText == ""){
square.innerText = document.turn;
document.xArray.push(square);
if(document.xArray.length > 4){
var x = document.xArray.shift();
x.innerText = "";
}
switchTurn();
}
}
//Display message
function displayMessage(msg){
document.getElementById("message").innerText = msg;
}
//switch from X to O
function switchTurn(){
if(checkForWinner(document.turn)){
displayMessage(document.turn + " wins!")
var w = alert(document.turn + " wins!");
document.winner = document.turn;
}else if(document.turn == "X"){
document.turn = "O";
displayMessage("It's " + document.turn + "'s turn");
//call computers turn
compsTurn();
}else{
document.turn = "X";
displayMessage("It's " + document.turn + "'s turn");
}
}
//handle computers turn
function compsTurn(){
var x= randNum();
var y = randNum();
while(getValue(x,y) != ""){
x=randNum();
y=randNum();
}
document.getElementById("b" + x + y).innerText = "O";
document.oArray.push(document.getElementById("b" + x + y));
if(document.oArray.length > 4){
var x = document.oArray.shift();
x.innerText = "";
}
switchTurn();
}
//generate random number for computer player
function randNum(){
var r = Math.floor((Math.random() * 4) + 1);
return r;
}
//check for winner
function checkForWinner(player){
var result = false;
if(checkRow(1, player) ||
checkRow(2, player) ||
checkRow(3, player) ||
checkRow(4, player) ||
checkColumn(1, player) ||
checkColumn(2, player) ||
checkColumn(3, player) ||
checkColumn(4, player) ||
checkDiagonal(player)){
result = true;
}
return result;
}
//get value in box (table)
function getValue(row, col){
return document.getElementById("b" + row + col).innerText;
}
//set box value
function setValue(row, col){
document.getElementById("b" + row + col).innerText = "";
}
//check for winner
function checkRow(r, value){
var result = false;
if(getValue(r,1) == value &&
getValue(r,2) == value &&
getValue(r,3) == value &&
getValue(r,4) == value){
result = true;
}
return result;
}
//check column for winner
function checkColumn(c, value){
var result = false;
if(getValue(1,c) == value &&
getValue(2,c) == value &&
getValue(3,c) == value &&
getValue(4,c) == value){
result = true;
}
return result;
}
//check diagonal for winner
function checkDiagonal(value){
var result = false;
if(getValue(1,1) == value &&
getValue(2,2) == value &&
getValue(3,3) == value &&
getValue(4,4) == value){
result = true;
}else if(getValue(1,4) == value &&
getValue(2,3) == value &&
getValue(3,2) == value &&
getValue(4,1) == value){
result = true;
}
return result;
}
</script>
</head>
<body onload="start();">
<h1>Tic Tac Toe</h1>
<div id="message">Game message will go here.</div>
<table>
<tr>
<td class="square" id="b11" onclick="handleClick(this)"></td>
<td class="square" id="b12" onclick="handleClick(this)"></td>
<td class="square" id="b13" onclick="handleClick(this)"></td>
<td class="square" id="b14" onclick="handleClick(this)"></td>
</tr>
<tr>
<td class="square" id="b21" onclick="handleClick(this)"></td>
<td class="square" id="b22" onclick="handleClick(this)"></td>
<td class="square" id="b23" onclick="handleClick(this)"></td>
<td class="square" id="b24" onclick="handleClick(this)"></td>
</tr>
<tr>
<td class="square" id="b31" onclick="handleClick(this)"></td>
<td class="square" id="b32" onclick="handleClick(this)"></td>
<td class="square" id="b33" onclick="handleClick(this)"></td>
<td class="square" id="b34" onclick="handleClick(this)"></td>
</tr>
<tr>
<td class="square" id="b41" onclick="handleClick(this)"></td>
<td class="square" id="b42" onclick="handleClick(this)"></td>
<td class="square" id="b43" onclick="handleClick(this)"></td>
<td class="square" id="b44" onclick="handleClick(this)"></td>
</tr>
</table>
<p><button onclick="restart()">Reset</button></p>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<!-- Created by: April Williams 2019-10-03 -->
<head>
<title>HTML5 Document</title>
<meta charset="UTF-8" />
<style>
body { font-family: Arial, Helvetica, sans-serif; font-size: 150%; }
button { font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
.square {height: 100px; width: 100px; text-align: center; font-size: 50px}
table, th, td {border: 1px solid black;}
</style>
<script type="text/javascript">
//start game onload
function start(){
document.turn = "X";
document.winner = null;
displayMessage("It's " + document.turn + "'s turn");
document.xArray = [];
document.oArray = [];
}
//restart game when reset button is clicked
function restart(){
var reset = confirm("Are you sure you want to reset?");
if (reset == true){
for(var i = 1; i<=4; i= i +1){
for(var j = 1; j<=4; j=j+1){
setValue(i,j);
}
}
}
start();
}
//Handle move when square is clicked
//main function
function handleClick(square) {
if(document.winner != null){
displayMessage("Game over!");
} else if(square.innerText == ""){
square.innerText = document.turn;
document.xArray.push(square);
if(document.xArray.length > 4){
var x = document.xArray.shift();
x.innerText = "";
}
switchTurn();
}
}
//Display message
function displayMessage(msg){
document.getElementById("message").innerText = msg;
}
//switch from X to O
function switchTurn(){
if(checkForWinner(document.turn)){
displayMessage(document.turn + " wins!")
var w = alert(document.turn + " wins!");
document.winner = document.turn;
}else if(document.turn == "X"){
document.turn = "O";
displayMessage("It's " + document.turn + "'s turn");
//call computers turn
compsTurn();
}else{
document.turn = "X";
displayMessage("It's " + document.turn + "'s turn");
}
}
//handle computers turn
function compsTurn(){
var x= randNum();
var y = randNum();
while(getValue(x,y) != ""){
x=randNum();
y=randNum();
}
document.getElementById("b" + x + y).innerText = "O";
document.oArray.push(document.getElementById("b" + x + y));
if(document.oArray.length > 4){
var x = document.oArray.shift();
x.innerText = "";
}
switchTurn();
}
//generate random number for computer player
function randNum(){
var r = Math.floor((Math.random() * 4) + 1);
return r;
}
//check for winner
function checkForWinner(player){
var result = false;
if(checkRow(1, player) ||
checkRow(2, player) ||
checkRow(3, player) ||
checkRow(4, player) ||
checkColumn(1, player) ||
checkColumn(2, player) ||
checkColumn(3, player) ||
checkColumn(4, player) ||
checkDiagonal(player)){
result = true;
}
return result;
}
//get value in box (table)
function getValue(row, col){
return document.getElementById("b" + row + col).innerText;
}
//set box value
function setValue(row, col){
document.getElementById("b" + row + col).innerText = "";
}
//check for winner
function checkRow(r, value){
var result = false;
if(getValue(r,1) == value &&
getValue(r,2) == value &&
getValue(r,3) == value &&
getValue(r,4) == value){
result = true;
}
return result;
}
//check column for winner
function checkColumn(c, value){
var result = false;
if(getValue(1,c) == value &&
getValue(2,c) == value &&
getValue(3,c) == value &&
getValue(4,c) == value){
result = true;
}
return result;
}
//check diagonal for winner
function checkDiagonal(value){
var result = false;
if(getValue(1,1) == value &&
getValue(2,2) == value &&
getValue(3,3) == value &&
getValue(4,4) == value){
result = true;
}else if(getValue(1,4) == value &&
getValue(2,3) == value &&
getValue(3,2) == value &&
getValue(4,1) == value){
result = true;
}
return result;
}
</script>
</head>
<body onload="start();">
<h1>Tic Tac Toe</h1>
<div id="message">Game message will go here.</div>
<table>
<tr>
<td class="square" id="b11" onclick="handleClick(this)"></td>
<td class="square" id="b12" onclick="handleClick(this)"></td>
<td class="square" id="b13" onclick="handleClick(this)"></td>
<td class="square" id="b14" onclick="handleClick(this)"></td>
</tr>
<tr>
<td class="square" id="b21" onclick="handleClick(this)"></td>
<td class="square" id="b22" onclick="handleClick(this)"></td>
<td class="square" id="b23" onclick="handleClick(this)"></td>
<td class="square" id="b24" onclick="handleClick(this)"></td>
</tr>
<tr>
<td class="square" id="b31" onclick="handleClick(this)"></td>
<td class="square" id="b32" onclick="handleClick(this)"></td>
<td class="square" id="b33" onclick="handleClick(this)"></td>
<td class="square" id="b34" onclick="handleClick(this)"></td>
</tr>
<tr>
<td class="square" id="b41" onclick="handleClick(this)"></td>
<td class="square" id="b42" onclick="handleClick(this)"></td>
<td class="square" id="b43" onclick="handleClick(this)"></td>
<td class="square" id="b44" onclick="handleClick(this)"></td>
</tr>
</table>
<p><button onclick="restart()">Reset</button></p>
</body>
</html>
