|
|
@@ -1,112 +1,114 @@
|
|
|
<!DOCTYPE html>
|
|
|
+<!--
|
|
|
+LInE - Free Education, Private Data
|
|
|
+www.usp.br/line
|
|
|
+-->
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
- <meta name="description" content="Educational game for teaching fractions" />
|
|
|
- <meta name="keywords" content="ifractions, fraction, game" />
|
|
|
- <link rel="shortcut icon" href="assets/img/scene/flag.png">
|
|
|
- <title> iFractions </title>
|
|
|
- <link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
-
|
|
|
- <style>
|
|
|
- #iFractions-canvas {
|
|
|
- padding: 0 auto 0 auto;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- #textbox {
|
|
|
- position: absolute;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- top: 300px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- visibility: hidden;
|
|
|
- }
|
|
|
- input[type=text] {
|
|
|
- background-color: #fff;
|
|
|
- padding: 15px 40px;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 3px solid #ccc;
|
|
|
- font-size: 44px;
|
|
|
- font-family: Arial;
|
|
|
- color: #000;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- input:focus {
|
|
|
- outline: 3px solid #85accc;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
+ <meta name="description" content="Educational game for teaching fractions" />
|
|
|
+ <meta name="keywords" content="ifractions, fraction, game, private data" />
|
|
|
+ <link rel="shortcut icon" href="assets/img/scene/flag.png">
|
|
|
+ <title> iFractions by LInE-IME-USP</title>
|
|
|
+ <link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
+
|
|
|
+ <style>
|
|
|
+ #iFractions-canvas {
|
|
|
+ padding: 0 auto 0 auto;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ #textbox {
|
|
|
+ position: absolute;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ top: 300px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ input[type=text] {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15px 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 3px solid #ccc;
|
|
|
+ font-size: 44px;
|
|
|
+ font-family: Arial;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ input:focus {
|
|
|
+ outline: 3px solid #85accc;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
- <div class="container">
|
|
|
-
|
|
|
- <div class="clearfix"></div>
|
|
|
-
|
|
|
- <div class="panel panel-primary">
|
|
|
- <div class="panel-heading">iFractions game :: by LInE</div>
|
|
|
- <div class="panel-body">
|
|
|
- <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
|
|
|
- <div id="textbox" onsubmit="return false"> <!-- Textbox to get player name -->
|
|
|
- <input type="text" id="textbox-content" value="" size="13" maxlength="36">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="display-fps"><!-- Display fps in debugmode --></div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Load all js files -->
|
|
|
- <script src="js/preMenu.js"></script>
|
|
|
- <script src="js/menu.js"></script>
|
|
|
- <script src="js/map.js"></script>
|
|
|
- <script src="js/circleOne.js"></script>
|
|
|
- <script src="js/squareOne.js"></script>
|
|
|
- <script src="js/squareTwo.js"></script>
|
|
|
- <script src="js/gameMechanics.js"></script>
|
|
|
- <script src="js/globals.js"></script>
|
|
|
- <script>
|
|
|
-
|
|
|
- const displayFps = document.getElementById("display-fps");
|
|
|
-
|
|
|
- const canvas = document.getElementById("iFractions-canvas");
|
|
|
- canvas.width = defaultWidth;
|
|
|
- canvas.height = defaultHeight;
|
|
|
-
|
|
|
- const context = canvas.getContext("2d");
|
|
|
-
|
|
|
- info.start();
|
|
|
-
|
|
|
- // CREATING GAME STATES
|
|
|
- game.state.add('boot', bootState);
|
|
|
- game.state.add('lang', langState);
|
|
|
- game.state.add('loadLang', loadLangState);
|
|
|
- game.state.add('name', nameState);
|
|
|
-
|
|
|
- game.state.add('menu', menuState);
|
|
|
- game.state.add('customMenu', customMenuState);
|
|
|
-
|
|
|
- game.state.add('map', mapState);
|
|
|
- game.state.add('end', endState);
|
|
|
-
|
|
|
- game.state.add('squareOne', squareOne);
|
|
|
- game.state.add('circleOne', circleOne);
|
|
|
- game.state.add('squareTwo', squareTwo);
|
|
|
-
|
|
|
- // CALLING FIRST GAME STATE
|
|
|
- game.state.start('boot');
|
|
|
-
|
|
|
- </script>
|
|
|
+ <div class="container">
|
|
|
+
|
|
|
+ <div class="clearfix"></div>
|
|
|
+
|
|
|
+ <div class="panel panel-primary">
|
|
|
+ <div class="panel-heading">iFractions game :: by LInE</div>
|
|
|
+ <div class="panel-body">
|
|
|
+ <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
|
|
|
+ <div id="textbox" onsubmit="return false"> <!-- Textbox to get player name -->
|
|
|
+ <input type="text" id="textbox-content" value="" size="13" maxlength="36">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="display-fps"><!-- Display fps in debugmode --></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Load all js files -->
|
|
|
+ <script src="js/preMenu.js"></script>
|
|
|
+ <script src="js/menu.js"></script>
|
|
|
+ <script src="js/map.js"></script>
|
|
|
+ <script src="js/circleOne.js"></script>
|
|
|
+ <script src="js/squareOne.js"></script>
|
|
|
+ <script src="js/squareTwo.js"></script>
|
|
|
+ <script src="js/gameMechanics.js"></script>
|
|
|
+ <script src="js/globals.js"></script>
|
|
|
+ <script>
|
|
|
+ const displayFps = document.getElementById("display-fps");
|
|
|
+
|
|
|
+ const canvas = document.getElementById("iFractions-canvas");
|
|
|
+ canvas.width = defaultWidth;
|
|
|
+ canvas.height = defaultHeight;
|
|
|
+
|
|
|
+ const context = canvas.getContext("2d");
|
|
|
+
|
|
|
+ info.start();
|
|
|
+
|
|
|
+ // CREATING GAME STATES
|
|
|
+ game.state.add('boot', bootState);
|
|
|
+ game.state.add('lang', langState);
|
|
|
+ game.state.add('loadLang', loadLangState);
|
|
|
+ game.state.add('name', nameState);
|
|
|
+
|
|
|
+ game.state.add('menu', menuState);
|
|
|
+ game.state.add('customMenu', customMenuState);
|
|
|
+
|
|
|
+ game.state.add('map', mapState);
|
|
|
+ game.state.add('end', endState);
|
|
|
+
|
|
|
+ game.state.add('squareOne', squareOne);
|
|
|
+ game.state.add('circleOne', circleOne);
|
|
|
+ game.state.add('squareTwo', squareTwo);
|
|
|
+
|
|
|
+ // CALLING FIRST GAME STATE
|
|
|
+ game.state.start('boot');
|
|
|
+ </script>
|
|
|
|
|
|
</body>
|
|
|
|
