Program Codes
<!DOCTYPE html><html>
<head>
<style>
body,
html {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
.outer-container {
background: rgba(240,180,135,1);
box-shadow: inset -1px 1px 7px rgba(0,0,0,.2), inset 1px -1px 7px rgba(0,0,0,.2), 1px 12px 5px rgba(0,0,0,.4), 4px 3px 8px rgba(0,0,0,.4), 5px 10px 10px rgba(0,0,0,.2), -5px 10px 10px rgba(0,0,0,.4);
position: relative;
border-radius: 10px;
width: 400px;
height: 390px;
margin: 10% auto;
padding: 40px 0 0;
}
.board-container {
width: 350px;
height: 350px;
background: rgba(40,40,40,1)
-webkit-radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background: rgba(40,40,40,1)
-moz-radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background: rgba(40,40,40,1)
-ms-radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background: rgba(40,40,40,1)
radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background-size: cover;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.game-board {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
.boxes {
padding: 0;
width: 100%;
height: 100%;
position: relative;
left: 12px;
top: 0;
}
.boxes li {
width: 30%;
height: 30%;
display: inline-block;
position: relative;
z-index: 1000;
margin-left: 2px;
margin-right: 2px;
overflow: hidden;
}
li i {
font-size: 6.5rem;
text-align: center;
display: block;
width: 100%;
height: 100%;
font-style: normal;
font-family: "Architects Daughter", "Helvetica", "sans-serif";
color: rgba(220,220,220,.7);
z-index: 500;
}
li span {
position: relative;
bottom: 15px;
}
/* Canvas Drawing */
#myCanvas {
width: 330px;
height: 330px;
position: absolute;
z-index: 0;
left: 10px;
top: 0;
opacity: 0;
}
/* Player/Computer prompt */
.player-one-turn {
background: rgba(0,200,200,1);
left: 15px;
}
.player-two-turn {
background: rgba(200,100,100,1);
right: 15px;
}
.player-one-turn,
.player-two-turn {
position: absolute;
top: 0;
width: 170px;
height: 50px;
z-index: -10;
color: white;
text-align: center;
}
.player-one-turn p,
.player-two-turn p {
font-size: 1.3rem;
margin-top: 10px;
}
/* Score keeping */
.points-divider,
.score-1,
.score-2 {
position: absolute;
font-size: .9rem;
margin: 0;
display: none;
}
.score-1,
.score-2 {
font-family: 'Architects Daughter', sans-serif;
top: 17px;
color: rgba(100,60,50,.8);
}
.score-1 .points,
.score-2 .points {
position: absolute;
text-align: center;
bottom: 14px;
color: rgba(100,60,50, .9);
font-family: 'Architects Daughter', sans-serif;
}
.points-divider {
top: 5px;
left: 141px;
font-size: 2rem;
font-family: helvetica, sans-serif;
font-style: normal;
opacity: .2;
}
.score-1 {
left: 75px;
}
.score-2 {
left: 161px;
}
/* reset button */
.hard-reset {
position: absolute;
top: 5px;
right: 20px;
background: none;
border: none;
font-family: 'Architects Daughter', sans-serif;
color: rgba(100,60,50,.8);
font-size: 1.1rem;
border-radius: 20px;
border: 2px dashed transparent;
display: none;
}
.hard-reset:hover {
border: 2px dashed rgba(100,60,50,1);
color: rgba(100,60,50,1);
}
.hard-reset:focus {
outline: none;
}
/* Result Feedback */
span.rotate {
color: rgba(0,200,200,1);
}
i.win {
background: black;
}
.draw-message,
.lose-message,
.win-message {
background: rgba(0,0,0,.8);
width: 400px;
height: 400px;
z-index: 2000;
position: absolute;
display: none;
top: -15px;
left: 0;
box-sizing: border-box;
}
.draw-message p,
.lose-message p,
.win-message p {
color: white;
text-align: center;
position: absolute;
font-size: 2.3rem;
margin: 0;
top: 150px;
left: 50px;
font-family: 'Architects Daughter', sans-serif;
}
/*============================================
Game Starter
============================================*/
.game-choice,
.game-starter {
background: rgba(40,40,40,1)
-webkit-radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background: rgba(40,40,40,1)
-moz-radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background: rgba(40,40,40,1)
-ms-radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
background: rgba(40,40,40,1)
radial-gradient(center, rgba(40,80,60,1), rgba(0,20,20,.6));
display: block;
width: 100%;
height: 500px;
position: absolute;
top: 0px;
text-align: center;
font-family: 'Architects Daughter', Helvetica, sans-serif;
z-index: 1500;
/* display: none;*/
}
.game-starter {
display: none;
}
.game-choice p,
.game-starter p {
font-size: 2.2rem;
}
.game-choice button,
.game-choice p,
.game-starter button,
.game-starter p {
color: rgba(220,220,220,1);
position: relative;
top: 50px;
margin: 10px auto;
}
.game-choice p,
.game-starter p {
max-width: 80%;
}
.game-choice button,
.game-starter button {
background: none;
border: none;
opacity: .6;
border-radius: 20px;
border: 2px solid transparent;
font-size: 1.7rem;
}
.game-starter button {
font-size: 2.8rem;
}
.game-choice button:focus,
.game-starter button:focus {
outline: none;
}
.game-choice button:hover,
.game-starter button:hover {
opacity: 1;
border: 2px dashed rgba(230,230,230,.5);
}
.game-starter button.back-button {
position: absolute;
top: 270px;
right: 130px;
font-size: 1.5rem;
border: none;
}
.game-starter .back-button:hover {
border: none;
}
button {
cursor: pointer;
}
/*============================
Win/Lose animation
==============================*/
.rotate {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="outer-container">
<button class="hard-reset">Reset All</button>
<p class="score-1"><span class="points"></span><span class="name"></span></p>
<i class="points-divider">|</i>
<p class="score-2"><span class="points"></span><span class="name"></span></p>
<div class="player-one-turn">
<p></p>
</div>
<div class="player-two-turn">
<p></p>
</div>
<div class="board-container">
<div class="game-starter">
<p>Would you like to be X or O?</p>
<button class="choose-x">X</button>
<button class="choose-o">O</button>
<button class="back-button"><i class="fa fa-arrow-left"></i> Back</button>
</div>
<div class="game-choice">
<p>How do you want to play?</p>
<button class="one-player">One Player</button>
<button class="two-player">Two Player</button>
</div>
<div class="game-board">
<div class="draw-message">
<p>It was a draw..</p>
</div>
<div class="lose-message">
<p>Uh oh, you lost..</p>
</div>
<div class="win-message">
<p>You Won!!! :)</p>
</div>
<canvas id="myCanvas"></canvas>
<ul class="boxes">
</ul>
</div>
</div>
</div>
<script>
/*
using timeouts with loops
http://stackoverflow.com/questions/25311892/cleartimeout-for-settimeout-in-for-loop
*/
var MYAPP = MYAPP || {
gameInPlay: false,
winCombos: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[1, 4, 7],
[2, 5, 8],
[3, 6, 9],
[1, 5, 9],
[7, 5, 3]
],
playerOneScore: 0,
playerTwoScore: 0,
timeOuts: [],
initializeVars: function() {
this.numFilledIn = 0;
this.currentBoard = {
1: '',
2: '',
3: '',
4: '',
5: '',
6: '',
7: '',
8: '',
9: ''
};
},
initializeGame: function() {
MYAPP.initializeVars();
MYAPP.display.drawBoard();
$('.game-choice button').click(function() {
MYAPP.secondPlayer = MYAPP.game.gameSelection(this);
MYAPP.display.hideGameChoice();
MYAPP.display.showGameStarter(MYAPP.secondPlayer);
$('.game-starter .choose-x, .game-starter .choose-o').off().click(MYAPP.game.firstGame);
$('.back-button').on('click', function() {
MYAPP.display.hideGameStarter();
MYAPP.display.showGameChoice();
});
});
$('.hard-reset').on('click', MYAPP.game.resetGame);
}
};
/*=========================
Display functions
==========================*/
MYAPP.display = {
hideGameStarter: function() {
$('.game-starter').fadeOut();
},
showGameStarter: function(isTwoPlayer) {
var message;
if (isTwoPlayer) {
message = "Player 1 : Would you like X or O?"
}
else {
message = "Would you like to be X or O?";
}
MYAPP.timeOuts.push(
setTimeout(function() {
$('.game-starter').fadeIn(500).children('p').text(message);
}, 700));
},
showGameChoice: function() {
$('.game-choice').fadeIn(600);
},
hideGameChoice: function() {
$('.game-choice').fadeOut(600);
},
showPlayerOnePrompt: function() {
if (MYAPP.secondPlayer) {
$('.player-one-turn p').text('Go Player 1!');
}
else {
$('.player-one-turn p').text('Your turn!');
}
$('.player-one-turn').animate({'top': '-45px'}, 500);
},
hidePlayerOnePrompt: function() {
$('.player-one-turn').animate({'top': '0'}, 500);
},
showPlayerTwoPrompt: function() {
if (MYAPP.secondPlayer) {
$('.player-two-turn p').text('Go Player 2!');
}
else {
$('.player-two-turn p').text('Computer\'s turn');
}
$('.player-two-turn').animate({'top': '-45px'}, 500);
},
hidePlayerTwoPrompt: function() {
$('.player-two-turn').animate({'top': '0'}, 500);
},
showDrawMessage: function() {
MYAPP.timeOuts.push(
setTimeout(function() {
$('.draw-message').fadeIn(500);
}, 1500));
},
hideDrawMessage: function() {
$('.draw-message').fadeOut(1000);
},
showLoseMessage: function() {
MYAPP.timeOuts.push(
setTimeout(function() {
$('.lose-message').fadeIn(500);
}, 1500)
);
},
hideLoseMessage: function() {
$('.lose-message').fadeOut(1000);
},
showWinMessage: function() {
MYAPP.timeOuts.push(
setTimeout(function() {
$('.win-message').fadeIn(500).children('p').text("Player " + MYAPP.turn + " wins!! :D ")
}, 1500));
},
hideWinMessage: function() {
$('.win-message').fadeOut(1000);
},
drawBoard: function() {
MYAPP.timeOuts.push(setTimeout(function() {
var c = document.getElementById("myCanvas");
var canvas = c.getContext("2d");
canvas.lineWidth = 1;
canvas.strokeStyle = "#fff";
//vertical lines
canvas.beginPath();
canvas.moveTo(100, 0);
canvas.lineTo(100, 146.5);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.moveTo(200, 0);
canvas.lineTo(200, 146.5);
canvas.closePath();
canvas.stroke();
// horizontal lines
canvas.lineWidth = .5;
canvas.beginPath();
canvas.moveTo(4, 48.5);
canvas.lineTo(296, 48.5);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.moveTo(4, 98.5);
canvas.lineTo(296, 98.5);
canvas.closePath();
canvas.stroke();
}, 1500));
},
resetSquares: function() {
$('.boxes').html('');
for (var i = 1; i <= 9; i++) {
var box = '<li class="' + i + '"><i class="letter"><span></span></i></li>';
$(box).appendTo($('.boxes'));
}
},
showScore: function() {
if (MYAPP.secondPlayer) {
$('.score-1').children('.name').text('player 1');
$('.score-2').children('.name').text('player 2');
}
else {
$('.score-1').children('.name').text('player 1');
$('.score-2').children('.name').text('computer');
}
$('.score-1, .score-2').children('.points').text('0');
$('.score-1,.score-2, .points-divider').fadeIn();
},
updateScore: function(turn) {
var currentScore = turn === 1 ? MYAPP.playerOneScore : MYAPP.playerTwoScore;
$('.score-' + turn).children('.points').text(currentScore);
}
};
/*=========================
Game Logic
==========================*/
MYAPP.game = {
whoStarts: function() {
var random = Math.floor(Math.random() * 2 + 1);
return random;
},
gameSelection: function(item) {
if ($(item).text() === 'One Player') {
// returns what secondPlayer value to set
return false;
}
else {
return true;
}
},
firstGame: function() {
MYAPP.playerOneSymbol = $(this).text();
MYAPP.playerTwoSymbol = MYAPP.playerOneSymbol == 'X' ? 'O' : 'X';
MYAPP.turn = MYAPP.game.whoStarts();
MYAPP.display.hideGameStarter();
$('#myCanvas').animate({'opacity': '1'}, 1200);
$('.hard-reset').fadeIn(600);
MYAPP.display.showScore();
MYAPP.display.resetSquares();
MYAPP.game.play();
},
play: function() {
MYAPP.gameInPlay = true;
$('.boxes li').on('click', function() {
MYAPP.game.playerTurn(this);
});
MYAPP.timeOuts.push(
setTimeout(function(){
if (MYAPP.turn === 1) {
MYAPP.display.showPlayerOnePrompt();
}
else if (MYAPP.turn === 2) {
MYAPP.display.showPlayerTwoPrompt();
}
}, 1500),
setTimeout(function() {
if (MYAPP.turn === 2 && !MYAPP.secondPlayer) {
MYAPP.game.computerPlay();
}
}, 1200));
},
playerTurn: function(square) {
var symbol = MYAPP.turn === 1 ? MYAPP.playerOneSymbol : MYAPP.playerTwoSymbol;
var box = $(square).children('i').children('span');
if (box.text() === '' && MYAPP.gameInPlay && (MYAPP.turn === 1 || (MYAPP.turn === 2 && MYAPP.secondPlayer))) {
box.text(symbol);
var number = $(square).attr('class');
MYAPP.game.updateSquare(number, symbol);
MYAPP.game.endTurn(symbol);
}
},
computerPlay: function() {
var computer = MYAPP.computer;
//test computer move suggestion
var boxNumber;
if (computer.computerWhichMove(MYAPP.game) && MYAPP.turn === 2) {
boxNumber = computer.computerWhichMove(MYAPP.game);
var currentBox = $('.' + boxNumber).children('i');
var symbol = MYAPP.playerTwoSymbol;
MYAPP.timeOuts.push(
setTimeout(function() {
currentBox.children('span').text(symbol);
MYAPP.game.updateSquare(boxNumber, MYAPP.playerTwoSymbol);
MYAPP.game.endTurn(symbol);
}, 1000));
}
},
endTurn: function(symbol) {
MYAPP.numFilledIn = MYAPP.numFilledIn + 1;
if (MYAPP.gameInPlay) {
if (MYAPP.game.checkWin(symbol)[0]) {
MYAPP.game.updateScore(MYAPP.turn);
if (MYAPP.secondPlayer) {
MYAPP.display.showWinMessage();
}
else {
MYAPP.turn === 1 ? MYAPP.display.showWinMessage() : MYAPP.display.showLoseMessage();
}
MYAPP.gameInPlay = false;
MYAPP.game.showWinningCombination();
MYAPP.display.hidePlayerOnePrompt();
MYAPP.display.hidePlayerTwoPrompt();
MYAPP.game.reset();
}
// stop if it is a draw
else if (MYAPP.numFilledIn >= 9) {
MYAPP.gameInPlay = false;
MYAPP.display.hidePlayerOnePrompt();
MYAPP.display.hidePlayerTwoPrompt();
MYAPP.display.showDrawMessage();
MYAPP.turn = MYAPP.game.whoStarts();
MYAPP.game.reset();
} else {
if (MYAPP.turn === 1) {
MYAPP.display.hidePlayerOnePrompt();
MYAPP.display.showPlayerTwoPrompt();
MYAPP.turn = 2;
// call computer turn if no second player
if (!MYAPP.secondPlayer) {
MYAPP.game.computerPlay();
}
} else if (MYAPP.turn === 2) {
MYAPP.display.showPlayerOnePrompt();
MYAPP.display.hidePlayerTwoPrompt();
MYAPP.turn = 1;
}
}
}
},
updateSquare: function(number, symbol) {
MYAPP.currentBoard[number] = symbol;
},
checkWin: function(symbol) {
var currentBoard = MYAPP.currentBoard;
var wins = MYAPP.winCombos;
var winningCombo = [];
var winner = wins.some(function(combination) {
var winning = true;
for (var i = 0; i < combination.length; i++) {
if (currentBoard[combination[i]] !== symbol) {
winning = false;
}
}
if (winning) {
winningCombo = combination;
}
return winning;
});
return [winner, winningCombo];
},
showWinningCombination: function() {
var symbol = MYAPP.turn === 1 ? MYAPP.playerOneSymbol : MYAPP.playerTwoSymbol;
var combo = MYAPP.game.checkWin(symbol)[1];
for (var i = 0; i < combo.length; i++) {
var currentBox = '.' + combo[i];
// Black box and rotating test for winning combo
$(currentBox).children('i').addClass('win').children('span').addClass('rotate');
}
},
updateScore: function(turn) {
turn === 1 ? MYAPP.playerOneScore += 1 : MYAPP.playerTwoScore += 1;
MYAPP.display.updateScore(turn);
},
reset: function() {
MYAPP.initializeVars();
MYAPP.timeOuts.push(
setTimeout(function() {
MYAPP.display.hideDrawMessage();
MYAPP.display.hideLoseMessage();
MYAPP.display.hideWinMessage();
$('.boxes li').fadeOut();
}, 5000),
setTimeout(function(){
MYAPP.display.resetSquares();
$('.boxes li').fadeIn();
MYAPP.numFilledIn = 0;
}, 6000),
//Make sure time for next timeout is long enough
//to not cause problems after first game
setTimeout(function() {
MYAPP.gameInPlay = true;
MYAPP.game.play();
}, 6000)
);
},
resetGame: function() {
$('#myCanvas').css('opacity', '0');
$('.hard-reset').fadeOut();
$('.points-divider, .score-1, .score-2').fadeOut();
MYAPP.playerOneScore = 0;
MYAPP.playerTwoScore = 0;
MYAPP.display.resetSquares();
MYAPP.initializeVars();
MYAPP.gameInPlay = false;
MYAPP.playerOneSymbol = null;
MYAPP.playerTwoSymbol = null;
MYAPP.timeOuts.forEach(function(timer) {
clearTimeout(timer);
});
$('.draw-message, .win-message, .lose-message').hide();
MYAPP.display.hidePlayerOnePrompt();
MYAPP.display.hidePlayerTwoPrompt();
MYAPP.display.showGameChoice();
}
};
/* End Game Logic */
/*================================
Computer Move Decisions
=================================*/
MYAPP.computer = {
computerWhichMove: function () {
var move = this.winOrBlockChoice('win')[0];
if (!move) {
move = this.winOrBlockChoice('block')[0];
console.log(this.winOrBlockChoice('block'));
}
if (!move) {
move = this.doubleThreatChoice('win');
}
if (!move) {
move = this.doubleThreatChoice('block');
}
if (!move) {
move = this.firstPlay();
}
if (!move) {
move = this.playCenter();
}
if (!move) {
move = this.emptyCorner();
}
if (!move) {
move = this.emptySide();
}
move = (move && MYAPP.currentBoard[move]) === '' ? move : false;
return move;
},
winOrBlockChoice: function(choiceType, board) {
var board = board || MYAPP.currentBoard;
if (choiceType === 'win') {
var currentSymbol = MYAPP.playerTwoSymbol;
var opponentSymbol = MYAPP.playerOneSymbol;
} else if (choiceType === 'block') {
var currentSymbol = MYAPP.playerOneSymbol;
var opponentSymbol = MYAPP.playerTwoSymbol;
} else {
return;
}
var moves = [];
MYAPP.winCombos.forEach(function(combo) {
var notFound = [];
var notPlayer = true;
for (var i = 0; i < combo.length; i++) {
if (board[combo[i]] !== currentSymbol) {
if (board[combo[i]] === opponentSymbol) {
notPlayer = false;
} else {
notFound.push(combo[i]);
}
}
}
if (notFound.length === 1 && notPlayer) {
var move = notFound[0];
moves.push(move);
}
});
return moves;
},
doubleThreatChoice: function(choiceType) {
// use winChoice function to test a spot for double threat
var board = MYAPP.currentBoard;
var move;
if (choiceType === 'win') {
var currentSymbol = MYAPP.playerTwoSymbol;
var opponentSymbol = MYAPP.playerOneSymbol;
} else if (choiceType === 'block') {
var currentSymbol = MYAPP.playerOneSymbol;
var opponentSymbol = MYAPP.playerTwoSymbol;
}
// forced diagonal win on 4th move prevention
if (board[5] === currentSymbol && MYAPP.numFilledIn === 3) {
if ((board[1] === opponentSymbol && board[9] === opponentSymbol) || (board[3] === opponentSymbol && board[7] === opponentSymbol)) {
// Play an edge to block double threat
move = this.emptySide();
}
}
if (!move && board[5] === opponentSymbol && MYAPP.numFilledIn === 2) {
move = this.diagonalSecondAttack();
}
if (!move) {
// clone current board;
var testBoard = $.extend({}, board);
for (var i = 1; i <= 9; i++) {
testBoard = $.extend({}, board);
if (testBoard[i] === '') {
testBoard[i] = currentSymbol;
if (this.winOrBlockChoice(choiceType, testBoard).length >= 2) {
move = i;
}
}
}
}
return move || false;
},
diagonalSecondAttack: function() {
var board = MYAPP.currentBoard;
var comp = MYAPP.playerTwoSymbol;
var corners = [1,3,7,9];
for (var i = 0; i < corners.length; i++) {
if (board[corners[i]] === comp) {
return 10 - corners[i];
}
}
},
firstPlay: function() {
var board = MYAPP.currentBoard;
var corners = [1, 3, 7, 9];
var move;
if (MYAPP.numFilledIn === 1) {
// player plays center
if (board[5] === MYAPP.playerOneSymbol) {
var cornerNum = Math.floor(Math.random() * 4 + 1);
move = [1, 3, 7, 9][cornerNum];
}
//player plays corner, play opposite corner
else {
for (var i = 0; i < corners.length; i++) {
if (MYAPP.currentBoard[corners[i]] === MYAPP.playerOneSymbol) {
move = 5;
}
}
}
} else if (MYAPP.numFilledIn === 0) {
var cornerNum = Math.floor(Math.random() * corners.length + 1);
move = corners[cornerNum];
}
return move ? move : false;
},
playCenter: function() {
if (MYAPP.currentBoard[5] === '') {
return 5;
}
},
emptyCorner: function() {
var board = MYAPP.currentBoard;
var corners = [1, 3, 7, 9];
var move;
for (var i = 0; i < corners.length; i++) {
if (board[corners[i]] === '') {
move = corners[i];
}
}
return move || false;
},
emptySide: function() {
var sides = [2, 4, 6, 8];
for (var i = 0; i < sides.length; i++) {
if (MYAPP.currentBoard[sides[i]] === '') {
return sides[i];
}
}
return false;
}
}
/* End Computer Move Decisions */
$(document).ready(function() {
MYAPP.initializeGame();
});
/* end game initialization */
</script>
</body>
</html>
RUN CODE
No comments:
Post a Comment