added 2d

jehovahsays · Jun 23, 2024 · 0e63507 · 0e63507
1 parent be80f7a
commit 0e63507
Show file tree

Hide file tree

Showing 6 changed files with 207 additions and 14 deletions.
diff --git a/css/merge.css b/css/merge.css
@@ -1,10 +1,12 @@
 /* mobile */
 .earth {
+	    width:50px; 
+		height:50px;
 	    position: fixed;
 	    padding: 0;
-        margin: 0;
-	    top: 140px;
-        left: 150px;			
+        margin: 0px;
+	    top: 0px;
+        left: 0px;			
         font-size: 1.0em;
 
 } 
@@ -19,13 +21,13 @@
 } 
 .fieldset {
 	    position: fixed;
-        margin: 80px;   
-		border-radius: 25px;
+        margin: 0px;   
+		border-radius: 0px;
 	    padding: 0;
 	    position: center;
-	    top: 200;
-		left: 0;
-		right: 0;
+	    top: 10;
+		left: 10;
+		right: 10;
         width: 50%;
 }
 .input-field {

diff --git a/css/style.css b/css/style.css
@@ -1,4 +1,14 @@
+.fieldset {
+
+        margin: 0px;   
+		border-radius: 0px;
+	    padding: 0px;
 
+	    top: 0px;
+		left: 0px;
+		right: 0px;
+        width: 100%;
+}
 .chatbot-container {
     width: 80%;
     margin: 0 auto;

diff --git a/en/knowledge.html b/en/knowledge.html
@@ -0,0 +1,3 @@
+
+<!DOCTYPE html><html lang="en"><head><meta name="viewport"content="width=device-width"><title>knowledge</title><link rel="stylesheet" href="./css/merge.css" /></link></head><body><center><fieldset><legend><ahref="./knowledge.html">knowledge</a></legend><form class="form-group"action="../action.php"method="post"><input type="text"class="form-control"id="secure-form-answer-Human"type="text"name="secure-form-answer"maxlength="40"autocomplete="true"autocorrect="off"autocapitalize="off"spellcheck="true"placeholder="what word defines this word"required><noscript><labelfor="secure-form-answer-Human">Human</label></noscript></form><br><a href="../index.html">return to homepage</a><br><br><a href="../delete.php?action=delete&filename=./en/knowledge.html">delete this page</a><br><br><article>knowledge definitions go here</article></fieldset></center></body></html>
+
diff --git a/index.html b/index.html
@@ -1,9 +1,7 @@
 <!DOCTYPE html>
 <html 
 lang="en">
-
 <head>
-
 <meta 
 charset="UTF-8">
 
@@ -28,16 +26,46 @@
 <script 
 src="./js/jquery-3.7.1.min.js">
 </script>
+
+<style>
+/* mobile */
+canvas {
+		position: fixed;
+	    padding: 0;
+        margin: 0;
+	    top: 60px;
+        left: 180px;			
+        font-size: 1.0em;
+	    margin-top: 60px;	
+	    width: 200px;
+	    height: 200px;    
+        background-color: transparent;
+
 
+}
+fieldset {
+
+        margin: 0px;   
+		border-radius: 0px;
+	    padding: 0px;
+
+	    top: 0px;
+		left: 0px;
+		right: 0px;
+        width: 100%;
+		height: 100%;
+}
+</style>
 </head>
-<body>
-
+<body onload="startGame()">
+<fieldset>
 <center>
 
 <div class="chatbot-container">
 
 <div id="header">	
-
+
+<br>	
 <form 
 action="./action.php" 
 method="post">	
@@ -54,6 +82,9 @@
 placeholder="create a keyword"
 required>
 
+<button id="submit-button" 
+type="submit">submit</button>
+
 <noscript>
 <label 
 for="secure-form-answer-Human">
@@ -69,6 +100,7 @@
 <div id="conversation">
 
 <div class="chatbot-message">
+
 <p class="chatbot-text">
 Bot uses the keywords from the user input box above.
 </p>
@@ -104,6 +136,7 @@
 
 <div 
 class="content">
+
 <!-- content -->
  <script 
 type="text/javascript" 
@@ -112,8 +145,17 @@
 </div>
 
 <br>
+<div style="text-align:center;width:320px;">
+  <button onclick="moveup()">UP</button><br><br>
+  <button onclick="moveleft()">LEFT</button>
+  <button onclick="moveright()">RIGHT</button><br><br>
+  <button onclick="movedown()">DOWN</button>
+</div>
 
-</center>	
+<br><br>
+</center>
+</fieldset>
+
 <center>
 <ul id="input-field">
 <a href="./en/magnetic-polarity.html"class="edges"><button class="core">magnetic-polarity</button></a><br>
@@ -161,3 +203,4 @@
 <a href="./en/mutoscope.html"class="edges"><button class="core">mutoscope</button></a><br>
 <a href="./en/reflection.html"class="edges"><button class="core">reflection</button></a><br>
 <a href="./en/echo.html"class="edges"><button class="core">echo</button></a><br>
+<a href="./en/knowledge.html"class="edges"><button class="core">knowledge</button></a><br>
diff --git a/js/chatbot.js b/js/chatbot.js
@@ -84,4 +84,5 @@ function generateResponse(input) {
 "mutoscope💡",
 "reflection💡",
 "echo💡",
+"knowledge💡",
 ];return responses[Math.floor(Math.random() * responses.length)];}window.onblur = function (tabs) {alert('switch tabs alert');};
diff --git a/js/merge.js b/js/merge.js
@@ -1,3 +1,136 @@
+
+var myGamePiece;
+var myObstacles = [];
+var myScore;
+
+function startGame() {
+    myGamePiece = new component(30, 30, "red", 10, 120);
+
+    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
+    myGameArea.start();
+}
+
+var myGameArea = {
+    canvas : document.createElement("canvas"),
+    start : function() {
+        this.canvas.width = 480;
+        this.canvas.height = 270;
+        this.context = this.canvas.getContext("2d");
+        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
+        this.frameNo = 0;
+        this.interval = setInterval(updateGameArea, 20);
+        },
+    clear : function() {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+    stop : function() {
+        clearInterval(this.interval);
+    }
+}
+
+function component(width, height, color, x, y, type) {
+    this.type = type;
+    this.width = width;
+    this.height = height;
+    this.speedX = 0;
+    this.speedY = 0;    
+    this.x = x;
+    this.y = y;    
+    this.update = function() {
+        ctx = myGameArea.context;
+        if (this.type == "text") {
+            ctx.font = this.width + " " + this.height;
+            ctx.fillStyle = color;
+            ctx.fillText(this.text, this.x, this.y);
+        } else {
+            ctx.fillStyle = color;
+            ctx.fillRect(this.x, this.y, this.width, this.height);
+        }
+    }
+
+    this.newPos = function() {
+        this.x += this.speedX;
+        this.y += this.speedY;        
+    }
+    this.crashWith = function(otherobj) {
+        var myleft = this.x;
+        var myright = this.x + (this.width);
+        var mytop = this.y;
+        var mybottom = this.y + (this.height);
+        var otherleft = otherobj.x;
+        var otherright = otherobj.x + (otherobj.width);
+        var othertop = otherobj.y;
+        var otherbottom = otherobj.y + (otherobj.height);
+        var crash = true;
+        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
+            crash = false;
+        }
+        return crash;
+
+    }
+}
+
+function updateGameArea() {
+    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
+    for (i = 0; i < myObstacles.length; i += 1) {
+        if (myGamePiece.crashWith(myObstacles[i])) {
+            myGameArea.stop();
+            return;
+        } 
+    }
+    myGameArea.clear();
+    myGameArea.frameNo += 1;
+    if (myGameArea.frameNo == 1 || everyinterval(150)) {
+        x = myGameArea.canvas.width;
+        minHeight = 20;
+        maxHeight = 200;
+
+        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
+        minGap = 50;
+        maxGap = 200;
+        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
+        myObstacles.push(new component(10, height, "green", x, 0));
+        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
+    }
+    for (i = 0; i < myObstacles.length; i += 1) {
+        myObstacles[i].speedX = -1;
+        myObstacles[i].newPos();
+        myObstacles[i].update();
+    }
+    myScore.text="SCORE: " + myGameArea.frameNo;
+    myScore.update();
+    myGamePiece.newPos();    
+
+    myGamePiece.update();
+}
+
+function everyinterval(n) {
+    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
+    return false;
+}
+
+function moveup() {
+    myGamePiece.speedY = -1; 
+}
+
+function movedown() {
+    myGamePiece.speedY = 1; 
+}
+
+function moveleft() {
+    myGamePiece.speedX = -1; 
+}
+
+
+function moveright() {
+    myGamePiece.speedX = 1; 
+}
+
+function clearmove() {
+    myGamePiece.speedX = 0; 
+    myGamePiece.speedY = 0; 
+}
+
 var texts = [
 
 "magnetic-polarity",
@@ -45,4 +178,5 @@ var texts = [
 "mutoscope",
 "reflection",
 "echo",
+"knowledge",
 ];var tc = TagCloud('.content', texts);console.log(tc);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@

		<!DOCTYPE html><html lang="en"><head><meta name="viewport"content="width=device-width"><title>knowledge</title><link rel="stylesheet" href="./css/merge.css" /></link></head><body><center><fieldset><legend><ahref="./knowledge.html">knowledge</a></legend><form class="form-group"action="../action.php"method="post"><input type="text"class="form-control"id="secure-form-answer-Human"type="text"name="secure-form-answer"maxlength="40"autocomplete="true"autocorrect="off"autocapitalize="off"spellcheck="true"placeholder="what word defines this word"required><noscript><labelfor="secure-form-answer-Human">Human</label></noscript></form><br><a href="../index.html">return to homepage</a><br><br><a href="../delete.php?action=delete&filename=./en/knowledge.html">delete this page</a><br><br><article>knowledge definitions go here</article></fieldset></center></body></html>