Initial commit

2020-11-16 23:31:45 +09:00 · 2020-11-16 23:31:45 +09:00 · 77ec28e7a9
commit 77ec28e7a9
8 changed files with 757 additions and 0 deletions
--- a/README.md
+++ b/README.md
--- a/canvas1.html
+++ b/canvas1.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Canvas 1</title>
+    <meta charset="utf-8">
+    <meta name="description"
+	  content="THIS IS A TEMPLATE FOR SINGLE-PAGE APP FILES.">
+
+<!-- [STYLE] ======================================================= -->
+    <style>
+      body {
+	  color: #009000 ;
+	  background-color: black ;
+	  font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
+		       "Lucida Console", "MS Gothic" ; 
+      }
+      canvas { border:1px solid #009000; }
+
+    </style>
+
+  </head>
+
+  <body>
+<!-- [CONTENT] ===================================================== -->
+    
+<h1>Canvas 1</h1>
+
+<canvas id="canvas1" width="600" height="600"></canvas>
+
+<!-- [SCRIPT] ====================================================== -->
+<script>
+  var canvas = document.getElementById("canvas1");
+  var ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#909090";
+  ctx.fillRect(10, 10, 580, 580);
+      
+</script>
+
+  </body>
+</html>
--- a/coords.html
+++ b/coords.html
@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>coords</title>
+    <meta charset="utf-8">
+    <meta name="description"
+	  content="experiment with canvas coordinates">
+
+<!-- [STYLE] ======================================================= -->
+    <style>
+      body {
+	  color: #009000 ;
+	  background-color: black ;
+	  font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
+		       "Lucida Console", "MS Gothic" ; 
+      }
+      canvas { border:1px solid #909090; }
+
+    </style>
+
+  </head>
+
+  <body>
+<!-- [CONTENT] ===================================================== -->
+    
+<h1>coords</h1>
+
+<canvas id="canvas" width="600" height="600"></canvas>
+
+<!-- [SCRIPT] ====================================================== -->
+<script>
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  ctx.translate (300, 300);
+
+  ctx.strokeStyle = "#00ff00";
+
+  ctx.beginPath ();
+  ctx.moveTo (0, -300);
+  ctx.lineTo (0, 300);
+  ctx.stroke ();
+  
+  ctx.beginPath ();
+  ctx.moveTo (-300, 0);
+  ctx.lineTo (300, 0);
+  ctx.stroke ();
+
+  // Quadrant I
+  ctx.strokeStyle = "#ffffff";
+  
+  ctx.beginPath ()
+  ctx.moveTo (145, 150);
+  ctx.lineTo (155, 150);
+  ctx.moveTo (150, 145);
+  ctx.lineTo (150, 155);
+  ctx.stroke ();
+  
+  // Quadrant II
+  ctx.strokeStyle = "#ff0000";
+  
+  ctx.beginPath ()
+  ctx.moveTo (-145, 150);
+  ctx.lineTo (-155, 150);
+  ctx.moveTo (-150, 145);
+  ctx.lineTo (-150, 155);
+  ctx.stroke ();
+  
+  // Quadrant III
+  ctx.strokeStyle = "#0000ff";
+  
+  ctx.beginPath ()
+  ctx.moveTo (-145, -150);
+  ctx.lineTo (-155, -150);
+  ctx.moveTo (-150, -145);
+  ctx.lineTo (-150, -155);
+  ctx.stroke ();
+  
+  // Quadrant IV
+  ctx.strokeStyle = "#00ff00";
+  
+  ctx.beginPath ()
+  ctx.moveTo (145, -150);
+  ctx.lineTo (155, -150);
+  ctx.moveTo (150, -145);
+  ctx.lineTo (150, -155);
+  ctx.stroke ();
+  
+/*
+  var fgColor = "#009000", bgColor = "#000000";
+  var colorR = 0, colorG = 144, colorB = 0;
+
+  var aX = 290, aY = 310;
+  var bDx = 20, bDy = 0;
+  var cDx = 10, cDy = -17;
+  
+  function draw ()
+  {
+      var color = "#";
+      var hex = colorR.toString (16);
+      color += hex.length == 1 ? ("0" + hex) : hex;
+      hex = colorG.toString (16);
+      color += hex.length == 1 ? ("0" + hex) : hex;
+      hex = colorB.toString (16);
+      color += hex.length == 1 ? ("0" + hex) : hex;
+      ctx.beginPath ();
+      ctx.fillStyle = color;
+      ctx.strokeStyle = color;
+      ctx.moveTo (aX, aY);
+      ctx.lineTo (aX+bDx, aY+bDy);
+      ctx.lineTo (aX+cDx, aY+cDy);
+      ctx.closePath ();
+      ctx.stroke ();
+      ctx.fill ();
+  }
+
+  function update ()
+  {
+      r = Math.random ();
+      if (aX > 0 && r <= (1/3))  aX --; 
+      else if (aX < 600 && r > (2/3))  aX ++; 
+      r = Math.random ();
+      if (aY > 0 && r <= (1/3)) aY --; 
+      else if (aY < 600 && r > (2/3)) aY ++; 
+      r = Math.random ();
+      if (r <= (1/3)) -- bDx;
+      else if (r > (2/3)) ++ bDx;
+      r = Math.random ();
+      if (r <= (1/3)) -- bDy;
+      else if (r > (2/3)) ++ bDy;
+      r = Math.random ();
+      if (r <= (1/3)) -- cDx;
+      else if (r > (2/3)) ++ cDx;
+      r = Math.random ();
+      if (r <= (1/3)) -- cDy;
+      else if (r > (2/3)) ++ cDy;
+      r = Math.random ();
+      if (colorR > 9 && r <= (1/3)) colorR -= 10;
+      else if (colorR < 246 && r > (2/3)) colorR += 10;
+      r = Math.random ();
+      if (colorG > 9 && r <= (1/3)) colorG -= 10;
+      else if (colorG < 246 && r > (2/3)) colorG += 10;
+      r = Math.random ();
+      if (colorB > 9 && r <= (1/3)) colorB -= 10;
+      else if (colorB < 246 && r > (2/3)) colorB += 10;
+      ctx.clearRect (0, 0, 600, 600);
+      draw ();
+  }
+
+  draw ();
+  setInterval (update, 10);
+*/      
+</script>
+
+  </body>
+</html>
--- a/keyin.html
+++ b/keyin.html
@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>keyin</title>
+    <meta charset="utf-8">
+    <meta name="description"
+	  content="THIS IS A TEMPLATE FOR SINGLE-PAGE APP FILES.">
+
+<!-- [STYLE] ======================================================= -->
+    <style>
+      body {
+	  color: #009000 ;
+	  background-color: black ;
+	  font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
+		       "Lucida Console", "MS Gothic" ; 
+      }
+
+    </style>
+    
+  </head>
+
+  <body>
+<!-- [CONTENT] ===================================================== -->
+
+<h1>keyin</h1>
+
+Press Arrow Key or Any Other Key:<br><br>
+<div id="info"></div>
+
+<!-- [SCRIPT] ====================================================== -->
+<script>
+  var Key = {
+      LEFT:   37,
+      UP:     38,
+      RIGHT:  39,
+      DOWN:   40,
+      P:      80,
+      R:      82,
+      X:      88,
+      Z:      90
+  };
+
+  /**
+ * old IE: attachEvent
+ * Firefox, Chrome, or modern browsers: addEventListener
+ */
+  function _addEventListener(evt, element, fn) {
+      if (window.addEventListener) {
+	  element.addEventListener(evt, fn, false);
+      }
+      else {
+	  element.attachEvent('on'+evt, fn);
+      }
+  }
+
+  function handleKeyDown(evt) {
+      if (!evt) {evt = window.event;} // for old IE compatible
+      var keycode = evt.keyCode || evt.which; // also for cross-browser compatible
+
+      var info = document.getElementById("info");
+      switch (keycode) {
+      case Key.LEFT:
+	  info.innerHTML += (" &larr; down ");
+	  break;
+      case Key.UP:
+	  info.innerHTML += (" &uarr; down ");
+	  break;
+      case Key.RIGHT:
+	  info.innerHTML += (" &rarr; down ");
+	  break;
+      case Key.DOWN:
+	  info.innerHTML += (" &darr; down ");
+	  break;
+      case Key.P:
+	  info.innerHTML += (" P down ");
+	  break;
+      case Key.R:
+	  info.innerHTML += (" R down ");
+	  break;
+      case Key.X:
+	  info.innerHTML += (" X down ");
+	  break;
+      case Key.Z:
+	  info.innerHTML += (" Z down ");
+	  break;
+      default:
+	  info.innerHTML += (" SOMEKEY " + keycode + " down ");
+      }
+  }
+
+  function handleKeyUp(evt) {
+      if (!evt) {evt = window.event;} // for old IE compatible
+      var keycode = evt.keyCode || evt.which; // also for cross-browser compatible
+
+      var info = document.getElementById("info");
+      switch (keycode) {
+      case Key.LEFT:
+	  info.innerHTML += (" &larr; up ");
+	  break;
+      case Key.UP:
+	  info.innerHTML += (" &uarr; up ");
+	  break;
+      case Key.RIGHT:
+	  info.innerHTML += (" &rarr; up ");
+	  break;
+      case Key.DOWN:
+	  info.innerHTML += (" &darr; up ");
+	  break;
+      case Key.P:
+	  info.innerHTML += (" P up ");
+	  break;
+      case Key.R:
+	  info.innerHTML += (" R up ");
+	  break;
+      case Key.X:
+	  info.innerHTML += (" X up ");
+	  break;
+      case Key.Z:
+	  info.innerHTML += (" Z up ");
+	  break;
+      default:
+	  info.innerHTML += (" SOMEKEY " + keycode + " up ");
+      }
+  }
+
+  _addEventListener('keydown', document, handleKeyDown);
+  _addEventListener('keyup', document, handleKeyUp);
+  
+</script>
+
+  </body>
+</html>
--- a/spctrvl.html
+++ b/spctrvl.html
@ -0,0 +1,282 @@
+<!-- spctrvl.html - Space Travel video game -->
+<!--
+    Programming Notes
+
+    Next tasks:
+    - calibrate thrust velocity change with tick length
+    - scale acceleration to zoom level
+    - gravity
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Space Travel</title>
+    <meta charset="utf-8">
+    <meta name="description"
+	  content="Space Travel video game">
+
+<!-- [STYLE] ======================================================= -->
+    <style>
+      body {
+	  color: #009000 ;
+	  background-color: black ;
+	  font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
+		       "Lucida Console", "MS Gothic" ; 
+      }
+      canvas {
+	  border: 1px solid #909090;
+	  margin: auto;
+      }
+      button {
+	  width: 100%;
+      }
+    </style>
+    
+  </head>
+
+  <body>
+<!-- [CONTENT] ===================================================== -->
+
+<h1>Space Travel</h1>
+
+<canvas id="canvas" width="600" height="600"></canvas>
+
+<div id="controls">
+  <table>
+    <tr>
+      <td><button onmousedown="zoom(1)" onmouseup="zoom(0)"
+		  ontouchstart="zoom(1)">ZOOM +<br>Z</button></td>
+      <td><button onmousedown="reset()"
+		  ontouchstart="reset()">RESET<br>R</button></td>
+      <td></td>
+      <td><button onmousedown="thrust(1)" onmouseup="thrust(0)"
+		  ontouchstart="thrust(1)">&uarr;<br>THRUST</button></td>
+    </tr>
+    <tr>
+      <td><button onmousedown="zoom(-1)" onmouseup="zoom(0)"
+		  ontouchstart="zoom(-1)">ZOOM -<br>X</button></td>
+      <td><button onmousedown="pause()"
+		  ontouchstart="pause()">PAUSE<br>P</button></td>
+      <td><button onmousedown="rotate(1)" onmouseup="rotate(0)"
+		  ontouchstart="rotate(1)">ROT. L.<br>&larr;</button></td>
+      <td><button onmousedown="thrust(-1)" onmouseup="thrust(0)"
+		  ontouchstart="thrust(-1)">RETRO<br>&darr;</button></td>
+      <td><button onmousedown="rotate(-1)" onmouseup="rotate(0)"
+		  ontouchstart="rotate(-1)">ROT. R.<br>&rarr;</button></td>
+    </tr>
+  </table>
+</div>
+
+<!-- [SCRIPT] ====================================================== -->
+<script>
+
+  // Earth data
+  var EARTHX = 0,          // x position (km)
+      EARTHY = 0,          // y position (km)
+      EARTHRADIUS = 6378,  // radius (km)
+      EARTHMASS = 5.97,    // mass (* 10^24 kg)
+      EARTHCOLOR = "#009000";
+
+  // Key codes
+  var KEYLARR = 37,
+      KEYUARR = 38,
+      KEYRARR = 39,
+      KEYDARR = 40,
+      KEYP =    80,
+      KEYR =    82,
+      KEYX =    88,
+      KEYZ =    90;
+
+  // Other constants
+  var PI2 = 2 * Math.PI,
+      TICK = 10;       // ms
+
+  // Ship initial status
+  var SHIPX0 = EARTHRADIUS, // km - On X-axis at Earth's surface
+      SHIPY0 = 0,
+      SHIPVX0 = 0,
+      SHIPVY0 = 0,
+      SHIPHEAD0 = 0;
+
+  // Other initial values
+  var SCALE0 = 1000;
+  
+  var CANVAS = document.getElementById("canvas");
+  var CTX = CANVAS.getContext("2d");
+  var ZOOM = 0;
+  var HEADINCR = Math.PI / 200;
+
+  // Ship status
+  var shipX = 6378, // x position (km)
+      shipY = 0,    // y position (km)
+      shipVx = 0,   // x velocity (km/s)
+      shipVy = 0,   // y velocity (km/s)
+      shipHead = 0, // heading (radian)
+      shipColor = "#00ff00",
+      shipThrust = 0,
+      shipRotate = 0;
+  
+  // Other status
+  var keyin = false,
+      paused = false,
+      scale = 1000, // canvas width in km
+      timer;
+
+  function xformPx (x, y) {
+      var d = Math.sqrt (Math.pow (x - shipX, 2) +
+			 Math.pow (y - shipY, 2));
+      var phi = shipHead + Math.atan ((y - shipY) / (x - shipX));
+      var dPx = scalePx (d);
+      var xC = -1 * dPx * Math.sin (phi);
+      var yC = dPx * Math.cos (phi);
+      return [xC, yC];
+  }
+
+  function pause () {
+      if (paused) {
+	  timer = setInterval (update, TICK);
+	  paused = false;
+      }
+      else {
+	  clearInterval (timer);
+	  paused = true;
+      }
+  }
+
+  function reset () {
+      shipX = SHIPX0;
+      shipY = SHIPY0;
+      shipVx = SHIPVX0;
+      shipVy = SHIPVY0;
+      shipHead = SHIPHEAD0;
+      scale = SCALE0;
+  }
+      
+  function scalePx (km) {
+      return km * CANVAS.width / scale;
+  }
+
+  function thrust (dir) {
+      shipThrust = dir;
+  }
+
+  function rotate (dir) {
+      shipRotate = dir;
+  }
+
+  function zoom (dir) {
+      ZOOM = dir;
+  }
+
+  function changeHead (dir) {
+      shipHead += (dir * HEADINCR);
+      if (shipHead >= PI2) shipHead -= PI2;
+      else if (shipHead < 0) shipHead += PI2;
+  }
+
+  function drawShip () {
+      CTX.beginPath ();
+      CTX.moveTo (-5, 0);
+      CTX.lineTo (5, 0);
+      CTX.lineTo (0, -10);
+      CTX.closePath ();
+      CTX.fillStyle = shipColor;
+      CTX.fill ();
+  }
+
+  function drawBody (x, y, r, color) {
+      var cXY = xformPx (x, y);
+      CTX.beginPath ();
+      CTX.arc (cXY[0], cXY[1], scalePx (r), 0, 2*Math.PI);
+      CTX.strokeStyle = color;
+      CTX.stroke ();
+  }
+1
+  function handleKeyDown (event) {
+//      alert ("handleKeyDown ");
+      if (!event) { event = window.event; }
+      var keycode = event.keyCode || event.which; 
+//      alert ("handleKeyDown " + keycode);
+      switch (keycode) {
+      case KEYLARR:
+	  rotate (1);
+	  break;
+      case KEYUARR:
+	  thrust (1);
+	  break;
+      case KEYRARR:
+	  rotate (-1);
+	  break;
+      case KEYDARR:
+	  thrust (-1);
+	  break;
+      case KEYP:
+	  pause ();
+	  break;
+      case KEYR:
+	  reset ();
+	  break;
+      case KEYX:
+	  zoom (-1);
+	  break;
+      case KEYZ:
+	  zoom (1);
+	  break;
+      }
+  }
+
+  function handleKeyUp (event) {
+//      alert ("handleKeyUp ");
+      if (!event) { event = window.event; }
+      var keycode = event.keyCode || event.which; 
+//      alert ("handleKeyUp " + keycode);
+      switch (keycode) {
+      case KEYLARR:
+      case KEYRARR:
+	  rotate (0);
+	  break;
+      case KEYUARR:
+      case KEYDARR:
+	  thrust (0);
+	  break;
+      case KEYX:
+      case KEYZ:
+	  zoom (0);
+	  break;
+      }
+  }
+
+  function update () {
+//      if (keyin) alert ("keyin " + keyin);
+      if (ZOOM > 0) scale *= 0.99;
+      if (ZOOM < 0) scale *= 1.01;
+      changeHead (shipRotate);
+      shipVx += shipThrust * Math.cos (shipHead);
+      shipVy += -1 * shipThrust * Math.sin (shipHead);
+      shipX += shipVx;
+      shipY += shipVy;
+      CTX.clearRect (-1 * CANVAS.width / 2, -1 * CANVAS.height / 2,
+		     CANVAS.width, CANVAS.height);
+      drawBody (EARTHX, EARTHY, EARTHRADIUS, EARTHCOLOR);
+      drawShip ();
+  }
+      
+  // Main process
+
+  CTX.translate (CANVAS.width/2, CANVAS.height/2);
+
+  if (window.addEventListener) {
+      document.addEventListener("keydown", handleKeyDown, false);
+      document.addEventListener("keyup", handleKeyUp, false);
+  }
+  else {
+      document.attachEvent("onkeydown", handleKeyDown);
+      document.attachEvent("onkeyup", handleKeyUp);
+  }
+  timer = setInterval (update, TICK);
+
+
+</script>
+
+  </body>
+</html>
--- a/template-spa.html
+++ b/template-spa.html
@ -0,0 +1,36 @@
+<!-- Single-Page Application Template -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SPA TEMPLATE</title>
+    <meta charset="utf-8">
+    <meta name="description"
+	  content="THIS IS A TEMPLATE FOR SINGLE-PAGE APP FILES.">
+
+<!-- [STYLE] ======================================================= -->
+    <style>
+      body {
+	  color: #009000 ;
+	  background-color: black ;
+	  font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
+		       "Lucida Console", "MS Gothic" ; 
+      }
+
+    </style>
+    
+  </head>
+
+  <body>
+<!-- [CONTENT] ===================================================== -->
+
+<h1>SPA TEMPLATE</h1>
+
+<p>CONTENT HERE &hellip;</p>
+
+<!-- [SCRIPT] ====================================================== -->
+<script>
+
+</script>
+
+  </body>
+</html>
--- a/triangle.html
+++ b/triangle.html
@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Triangle</title>
+    <meta charset="utf-8">
+    <meta name="description"
+	  content="Display green triangle on black background.">
+
+<!-- [STYLE] ======================================================= -->
+    <style>
+      body {
+	  color: #009000 ;
+	  background-color: black ;
+	  font-family: "Bitstream Vera Sans Mono", "Lucida Sans",
+		       "Lucida Console", "MS Gothic" ; 
+      }
+      canvas { border:1px solid #909090; }
+
+    </style>
+
+  </head>
+
+  <body>
+<!-- [CONTENT] ===================================================== -->
+    
+<h1>Triangle</h1>
+
+<canvas id="canvas" width="600" height="600"></canvas>
+
+<!-- [SCRIPT] ====================================================== -->
+<script>
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  var fgColor = "#009000", bgColor = "#000000";
+  var colorR = 0, colorG = 144, colorB = 0;
+
+  var aX = 290, aY = 310;
+  var bDx = 20, bDy = 0;
+  var cDx = 10, cDy = -17;
+  
+  function draw ()
+  {
+      var color = "#";
+      var hex = colorR.toString (16);
+      color += hex.length == 1 ? ("0" + hex) : hex;
+      hex = colorG.toString (16);
+      color += hex.length == 1 ? ("0" + hex) : hex;
+      hex = colorB.toString (16);
+      color += hex.length == 1 ? ("0" + hex) : hex;
+      ctx.beginPath ();
+      ctx.fillStyle = color;
+      ctx.strokeStyle = color;
+      ctx.moveTo (aX, aY);
+      ctx.lineTo (aX+bDx, aY+bDy);
+      ctx.lineTo (aX+cDx, aY+cDy);
+      ctx.closePath ();
+      ctx.stroke ();
+      ctx.fill ();
+  }
+
+  function update ()
+  {
+      r = Math.random ();
+      if (aX > 0 && r <= (1/3))  aX --; 
+      else if (aX < 600 && r > (2/3))  aX ++; 
+      r = Math.random ();
+      if (aY > 0 && r <= (1/3)) aY --; 
+      else if (aY < 600 && r > (2/3)) aY ++; 
+      r = Math.random ();
+      if (r <= (1/3)) -- bDx;
+      else if (r > (2/3)) ++ bDx;
+      r = Math.random ();
+      if (r <= (1/3)) -- bDy;
+      else if (r > (2/3)) ++ bDy;
+      r = Math.random ();
+      if (r <= (1/3)) -- cDx;
+      else if (r > (2/3)) ++ cDx;
+      r = Math.random ();
+      if (r <= (1/3)) -- cDy;
+      else if (r > (2/3)) ++ cDy;
+      r = Math.random ();
+      if (colorR > 9 && r <= (1/3)) colorR -= 10;
+      else if (colorR < 246 && r > (2/3)) colorR += 10;
+      r = Math.random ();
+      if (colorG > 9 && r <= (1/3)) colorG -= 10;
+      else if (colorG < 246 && r > (2/3)) colorG += 10;
+      r = Math.random ();
+      if (colorB > 9 && r <= (1/3)) colorB -= 10;
+      else if (colorB < 246 && r > (2/3)) colorB += 10;
+      ctx.clearRect (0, 0, 600, 600);
+      draw ();
+  }
+
+  draw ();
+  setInterval (update, 10);
+      
+</script>
+
+  </body>
+</html>
--- a/w3sjs1.html
+++ b/w3sjs1.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h2>My First JavaScript</h2>
+<button type="button"
+onclick="document.getElementById('demo').innerHTML = Date()">
+Click me to display Date and Time.</button>
+<p id="demo"></p>
+</body>
+</html>