John 7 年之前
父节点
当前提交
5fdd1be651
共有 3 个文件被更改,包括 15 次插入59 次删除
  1. 12 27
      code.js
  2. 1 4
      index.html
  3. 2 28
      style.css

+ 12 - 27
code.js

@@ -1,24 +1,6 @@
-var hidden = true;
-document.getElementById('show').onclick = function(){
-	if(hidden) {
-        	document.getElementById('side').style.width = '200px';
-	} else {
-        	document.getElementById('side').style.width = '0';
-	}
-	hidden = !hidden;
-};
-document.getElementById('full').onclick = function(){
-	if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement)
-	{
-		var elem = document.getElementsByTagName('body')[0];
-		var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen;
-		requestFullScreen.call(elem);
-	}
-	else {
-		var exitFullScreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
-		exitFullScreen.call(document);
-	}
-
+var pause = false;
+document.getElementById('pause').onclick = function(){
+	pause = !pause;
 };
 
 var canvas = document.getElementById('canvas');
@@ -54,13 +36,15 @@ function loop(t)
 
 	let newArray = []; newArray.length = dim*dim
 
-	for(var i = 0; i < sq.length; i++) {
-		newArray[i] = decideOutcome(i)
-		context.fillStyle = newArray[i] ? 'red' : 'blue'
-		context.fillRect((i % dim)*size+1, Math.floor(i/dim) * size+1, size-2, size-2);
-	}
+	if (!pause) {
+		for(var i = 0; i < sq.length; i++) {
+			newArray[i] = decideOutcome(i)
+			context.fillStyle = newArray[i] ? 'red' : 'blue'
+			context.fillRect((i % dim)*size+2, Math.floor(i/dim) * size, size-4, size-4);
+		}
 
-	sq = newArray;
+		sq = newArray;
+	}
 
 	window.requestAnimationFrame(loop);
 }
@@ -77,6 +61,7 @@ function decideOutcome(i) {
 		}
 	}
 
+	op(sq[i])
 	if(i % dim == 0) {
 		// first column
 		op(sq[i+1]) // search right

+ 1 - 4
index.html

@@ -6,11 +6,8 @@
 <title>COPTINET/VIZ</title>
 </head>
 <body>
-<div id="side">
-  <a href="#" id="full">fullscreen()</a>
-</div>
 <canvas id="canvas"></canvas>
-<input type="button"  id="show" value="menu">
+<input type="button"  id="pause" value="pause">
 </body>
 <script src="code.js"></script>
 </html>

+ 2 - 28
style.css

@@ -20,32 +20,6 @@ h1,h2,h3 {
     color:#0068ff;
 }
 
-#side {
-  padding-top: 60px;
-  height: 100%;
-  width: 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color:#121212;
-  z-index: 1;
-  overflow-x: hidden;
-  opacity:0.9;
-  transition: 0.4s;
-}
-#side a {
-    padding: 8px 8px 8px 32px;
-    text-decoration: none;
-    font-size: 20px;
-    color:#0068ff;
-    display: block;
-    transition: 0.3s
-}
-
-#side a:hover, .offcanvas a:focus{
-    color: #f1f1f1;
-}
-
 #canvas {
   position: fixed;
   background-color:#000;
@@ -57,7 +31,7 @@ h1,h2,h3 {
   height: 100%;
 }
 
-#show {
+#pause {
     left: 10px;
     z-index: 2;
     position: fixed;
@@ -73,6 +47,6 @@ h1,h2,h3 {
     font-size: 16px;
     transition: 0.3s
 }
-#show:hover {
+#pause:hover {
     opacity:1.0;
 }