remove animation-frame, use requestAnimationFrame, add a template

deificx · Oct 1, 2020 · 01f197e · 01f197e
1 parent 6adc4da
commit 01f197e
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 75 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <%= htmlWebpackPlugin.tags.headTags %>
+  </head>
+  <body>
+    <canvas id="snake"></canvas>
+    <%= htmlWebpackPlugin.tags.bodyTags %>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
-    "animation-frame": "^0.3.0",
     "babel-core": "^6.3.26",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",

diff --git a/src/game.js b/src/game.js
@@ -1,71 +1,87 @@
 "use strict";
 
-import {
-	IDLE,
-	ENDED,
-} from './constants';
+import { IDLE, ENDED } from "./constants";
 
-import AnimationFrame from 'animation-frame';
-import canvas from './html.js';
-import Snake from './snake';
+import canvas from "./html.js";
+import Snake from "./snake";
 
-var animationFrame = new AnimationFrame();
-var gridWidth = 30;
-var context = canvas.getContext('2d');
-var s = new Snake(context, canvas.width, canvas.height, gridWidth);
-var time;
-var highScore = 0;
-var textMarginLeft = 20;
-var textHeight = 50;
-var textWidth = canvas.width - textMarginLeft * 2;
-var render = () => {
-	var now = new Date().getTime();
-	var dt = now - (time || now);
-	time = now;
+const gridWidth = 30;
+const context = canvas.getContext("2d");
+const s = new Snake(context, canvas.width, canvas.height, gridWidth);
+const textMarginLeft = 20;
+const textHeight = 50;
+const textWidth = canvas.width - textMarginLeft * 2;
 
-	context.fillStyle = '#eee';
-	context.fillRect(0,0,canvas.width,canvas.height);
+let highScore = 0;
+let time;
 
-	s.update(dt);
-	s.render();
+const render = () => {
+  const now = new Date().getTime();
+  const dt = now - (time || now);
+  time = now;
 
-	context.fillStyle = "#999";
-	context.font = "32px sans-serif";
-	switch (s.getState()) {
-	case IDLE:
-		context.fillText("Press return/enter to start a new game", textMarginLeft, textHeight, textWidth);
-		break;
-	case ENDED:
-		context.fillText("GAME OVER!", textMarginLeft, textHeight, textWidth);
-		context.fillText("Press return/enter to start a new game", textMarginLeft, textHeight * 2, textWidth);
-		if (s.getScore() > 0 && s.getScore() >= highScore) {
-			highScore = s.getScore();
-			context.fillText(
-				"Congratulations, new high score: " + highScore,
-				textMarginLeft,
-				textHeight * 3, // eslint-disable-line
-				textWidth);
-		} else {
-			context.fillText(
-				"You scored " + s.getScore() + " points. Your high score is " + highScore,
-				textMarginLeft,
-				textHeight * 3, // eslint-disable-line
-				textWidth);
-		}
-		break;
-	default:
-		context.fillText(s.getScore(), textMarginLeft, textHeight, textWidth);
-		animationFrame.request(render);
-		break;
-	}
+  context.fillStyle = "#eee";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  s.update(dt);
+  s.render();
+
+  context.fillStyle = "#999";
+  context.font = "32px sans-serif";
+  switch (s.getState()) {
+    case IDLE:
+      context.fillText(
+        "Press return/enter to start a new game",
+        textMarginLeft,
+        textHeight,
+        textWidth
+      );
+      break;
+
+    case ENDED:
+      context.fillText("GAME OVER!", textMarginLeft, textHeight, textWidth);
+      context.fillText(
+        "Press return/enter to start a new game",
+        textMarginLeft,
+        textHeight * 2,
+        textWidth
+      );
+      if (s.getScore() > 0 && s.getScore() >= highScore) {
+        highScore = s.getScore();
+        context.fillText(
+          "Congratulations, new high score: " + highScore,
+          textMarginLeft,
+          textHeight * 3, // eslint-disable-line
+          textWidth
+        );
+      } else {
+        context.fillText(
+          "You scored " +
+            s.getScore() +
+            " points. Your high score is " +
+            highScore,
+          textMarginLeft,
+          textHeight * 3, // eslint-disable-line
+          textWidth
+        );
+      }
+      break;
+
+    default:
+      context.fillText(s.getScore(), textMarginLeft, textHeight, textWidth);
+      requestAnimationFrame(render);
+      break;
+  }
 };
 
-animationFrame.request(render);
+requestAnimationFrame(render);
 
-import controls from './controls';
+import controls from "./controls";
 
-controls.on('move', (dir) => { s.setDir(dir); });
-controls.on('new_game', () => {
-	s.newGame();
-	animationFrame.request(render);
+controls.on("move", (dir) => {
+  s.setDir(dir);
+});
+controls.on("new_game", () => {
+  s.newGame();
+  requestAnimationFrame(render);
 });
diff --git a/src/html.js b/src/html.js
@@ -1,15 +1,9 @@
 "use strict";
 
-var canvas = document.getElementById('snake');
+const canvas = document.getElementById("snake");
 
-document.body.style.margin = '0px';
-document.body.style.height = window.innerHeight - 3 + 'px'; // eslint-disable-line
-
-if (!canvas) {
-	canvas = document.createElement('canvas');
-	canvas.id = 'snake';
-	document.body.appendChild(canvas);
-}
+document.body.style.margin = "0px";
+document.body.style.height = "100vh";
 
 canvas.width = document.body.offsetWidth;
 canvas.height = document.body.offsetHeight;

diff --git a/webpack.config.js b/webpack.config.js
@@ -22,5 +22,10 @@ module.exports = {
       },
     ],
   },
-  plugins: [new HtmlWebpackPlugin({ title: "Snake" })],
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: resolve(__dirname, "index.html"),
+      title: "Snake",
+    }),
+  ],
 };
diff --git a/yarn.lock b/yarn.lock
@@ -471,11 +471,6 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-animation-frame@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/animation-frame/-/animation-frame-0.3.0.tgz#3bb3f446ba53da38bba345582f435be3ab8aee29"
-  integrity sha1-O7P0RrpT2ji7o0VYL0Nb46uK7ik=
-
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"