First commit

berkerol · Sep 30, 2017 · a655da7 · a655da7
1 parent 5bde6cf
commit a655da7
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# Typer
+
+A tower defense like typing game. Wrong characters are penalized. Characters are case sensitive. Written in ES6\. You can play it [here](https://berkerol.github.io/typer/typer.html).
+
+## Contribution
+
+Feel free to contribute.
+
+## Distribution
+
+You can distribute this software freely under GNU GPL v3.0.
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,6 @@
+theme:           jekyll-theme-cayman
+title:           Typer
+description:     A tower defense like typing game
+is_user_page:    false
+is_project_page: true
+show_downloads:  true
diff --git a/index.md b/index.md
@@ -0,0 +1,3 @@
+# Typer
+
+A tower defense like typing game. Wrong characters are penalized. Characters are case sensitive. Written in ES6\. You can play it [here](https://berkerol.github.io/typer/typer.html).
diff --git a/typer.css b/typer.css
@@ -0,0 +1,10 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+canvas {
+  background: #eee;
+  display: block;
+  margin: 0 auto;
+}
diff --git a/typer.html b/typer.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Typer</title>
+  <link href="typer.css" rel="stylesheet" />
+</head>
+
+<body>
+  <canvas id="canvas"></canvas>
+  <script src="typer.js"></script>
+</body>
+
+</html>
diff --git a/typer.js b/typer.js
@@ -0,0 +1,140 @@
+let canvas = document.getElementById("canvas");
+let ctx = canvas.getContext("2d");
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+let center = {
+  x: canvas.width / 2 - 20,
+  y: canvas.height / 2 - 20,
+  radius: 20,
+  color: "#FF0000"
+};
+
+let char = {
+  probability: 0.02,
+  speed: 400,
+  speedVariance: 200,
+  font: "20px Arial",
+  color: "#0095DD",
+  size: 30
+};
+
+let label = {
+  font: "16px Arial",
+  color: "#0095DD",
+  size: 20
+};
+
+let score = 0;
+let health = 10;
+
+let chars = [];
+
+draw();
+document.addEventListener("keydown", keyDownHandler);
+
+function drawCenter() {
+  ctx.beginPath();
+  ctx.arc(center.x, center.y, center.radius, 0, 2 * Math.PI);
+  ctx.fillStyle = center.color;
+  ctx.fill();
+  ctx.closePath();
+}
+
+function drawChar(c) {
+  ctx.font = char.font;
+  ctx.fillStyle = char.color;
+  ctx.fillText(c.char, c.x, c.y, char.size);
+}
+
+function drawLabel(message, number, position) {
+  ctx.font = label.font;
+  ctx.fillStyle = label.color;
+  ctx.fillText(message + number, position, label.size);
+}
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawCenter();
+  drawLabel("Score: ", score, 10);
+  drawLabel("Lives: ", health, canvas.width - 80);
+  createChars();
+  removeChars();
+  drawChars();
+  requestAnimationFrame(draw);
+}
+
+function createChars() {
+  if (Math.random() < char.probability) {
+    let x = Math.random() < 0.5 ? 0 : canvas.width;
+    let y = Math.random() * canvas.height;
+    let code = Math.random() < 0.5 ? Math.floor(Math.random() * 25 + 65) : Math.floor(Math.random() * 25 + 97);
+    let s = Math.floor(Math.random() * char.speedVariance + char.speed);
+    chars.push({
+      x,
+      y,
+      code,
+      char: String.fromCharCode(code),
+      dx: (center.x - x) / s,
+      dy: (center.y - y) / s
+    });
+  }
+}
+
+function removeChars() {
+  for (let i = chars.length - 1; i >= 0; i--) {
+    let c = chars[i];
+    if (intersects(c.x, c.y, char.size, char.size, center.x, center.y, center.radius, center.radius)) {
+      chars.splice(i, 1);
+      die(true);
+      break;
+    }
+  }
+}
+
+function drawChars() {
+  for (let char of chars) {
+    char.x += char.dx;
+    char.y += char.dy;
+    drawChar(char);
+  }
+}
+
+function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
+  return x2 < x1 + w1 && x2 + w2 > x1 && y2 < y1 + h1 && y2 + h2 > y1;
+}
+
+function die(start) {
+  health--;
+  if (health === 0) {
+    alert("GAME OVER");
+    document.location.reload();
+  } else {
+    if (start) {
+      alert("START AGAIN!");
+      chars = [];
+    }
+  }
+}
+
+function keyDownHandler(e) {
+  for (let i = chars.length - 1; i >= 0; i--) {
+    let char = chars[i];
+    if (e.shiftKey) {
+      if (e.keyCode === char.code) {
+        chars.splice(i, 1);
+        score++;
+        return;
+      }
+    } else {
+      if (e.keyCode + 32 === char.code) {
+        chars.splice(i, 1);
+        score++;
+        return;
+      }
+    }
+  }
+  if (!e.shiftKey) {
+    die(false);
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Typer

		A tower defense like typing game. Wrong characters are penalized. Characters are case sensitive. Written in ES6\. You can play it [here](https://berkerol.github.io/typer/typer.html).