"Du kommsch hier net rein" part 2 - 2D video game based on "citizen" in which the player has to keep other citizen out of the group of his/her citizen https://www.victorgiers.com/1makk
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <!--<meta name="description" content="">
  6. <meta name="keywords" content="">-->
  7. <meta name="author" content="Victor Giers">
  8. <meta name="date" content="2019-06-25" scheme="YYYY-MM-DD">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <title>1makk</title>
  11. <style>
  12. body{padding: 0; margin: 0; background-color: gray; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;}
  13. canvas {display: block; overflow: hidden;}
  14. </style>
  15. <script src="p5.min.js"></script>
  16. <script src="p5.sound.min.js"></script>
  17. <script>
  18. //p5.disableFriendlyErrors = true;
  19. var width, height;
  20. var rate = 15;
  21. var tickMS = rate;
  22. var previous;
  23. var time = 0;
  24. var purity = 100;
  25. var purityColor;
  26. var centralCitizen = [];
  27. var minEdge;
  28. var citizen = [];
  29. var citizenID = 0;
  30. var angle = 0;
  31. let center, ring, ringBuffer, mask, rotatedMask;
  32. let song;
  33. let soundReady = false;
  34. var timeS = 99;
  35. var startUp = true;
  36. var hoverButton = 0;
  37. const FOLDER = 'data/';
  38. function mouseClicked(){
  39. if(hoverButton == 1){
  40. start();
  41. }
  42. if(gameOver){
  43. location.reload();
  44. }
  45. }
  46. function preload(){
  47. center = loadImage(FOLDER + 'center.png');
  48. /*
  49. ring = loadImage(FOLDER + 'ring.png', img => {
  50. ringBuffer = img.get();
  51. ringBuffer.loadPixels();
  52. img.loadPixels();
  53. });
  54. mask = loadImage(FOLDER + 'mask.png', img => {
  55. rotatedMask = createGraphics(img.width, img.height);
  56. rotatedMask.image(img, 0, 0);
  57. });*/
  58. ring = loadImage(FOLDER + 'ring.png');
  59. }
  60. function setup() {
  61. width = window.innerWidth;
  62. height = window.innerHeight;
  63. minEdge = min(width,height);
  64. createCanvas(width,height);
  65. //rotatedMask.imageMode(CENTER);
  66. imageMode(CENTER);
  67. rectMode(CENTER);
  68. textAlign(CENTER);
  69. textFont('Helvetica')
  70. song = loadSound(FOLDER + 'music.mp3', readySound);
  71. song.setVolume(0.0);
  72. for(var i = 0; i < 50; i ++){
  73. citizen.push(new Citizen(color(255,255,255),"macabree"));
  74. }
  75. }
  76. function readySound(){
  77. soundReady = true;
  78. }
  79. function start(){
  80. if(startUp){
  81. song.setVolume(1.0);
  82. song.loop();
  83. previous = millis();
  84. interval = setInterval(clock, 1000);
  85. strokeWeight(1);
  86. startUp = false;
  87. }
  88. }
  89. function clock(){
  90. timeS--;
  91. if(timeS == 0){
  92. clearInterval(interval);
  93. end();
  94. }
  95. }
  96. gameOver = false;
  97. function end(){
  98. gameOver = true;
  99. song.setVolume(0.2);
  100. for(var i = citizen.length-1; i > 0; i--){
  101. if(citizen[i].inCenter == false){
  102. citizen[i].radius = minEdge/80;
  103. }
  104. }
  105. }
  106. function draw() {
  107. clear();
  108. //text(nf(frameRate(),0,2), 100, 50);
  109. //maxEdge = max(width,height);
  110. if(startUp){
  111. image(ring, width/2,height/2, minEdge/2, minEdge/2);
  112. image(center, width/2,height/2, minEdge/2, minEdge/2);
  113. fill(255);
  114. stroke(0);
  115. strokeWeight(3);
  116. textSize(minEdge/40);
  117. textStyle(BOLD);
  118. text("1 Macc, 1:12-15\n''10 [...] there emerged from Israel a set of renegades who led many people astray.\n'Come,' they said, 'let us ally ourselves with the gentiles surrounding us,\nfor since we separated ourselves from them many misfortunes have overtaken us.\n12 This proposal proved acceptable,\n13 and a number of the people eagerly approached the king,\nwho authorised them to practise the gentiles' observances.\n14 So they built a gymnasium in Jerusalem, such as the gentiles have,\n15 disguised their circumcision, and abandoned the holy covenant,\nsubmitting to gentile rule as willing slaves of impiety.''\n\nPROTECT YOUR LAND FROM THE WICKED STRANGERS AT ALL COST!\nDON'T LET ANYONE IN!", width/2,height/2-minEdge/5);
  119. if(soundReady){
  120. fill(255,200+(55*hoverButton));
  121. rect(width/2,height/2+minEdge/4,minEdge/7,minEdge/12,minEdge/30);
  122. if(mouseX > width/2-(minEdge/4)/2 && mouseX < width/2+(minEdge/4)/2 && mouseY > height/2+minEdge/4-(minEdge/12)/2 && mouseY < height/2+minEdge/4+(minEdge/12)/2){
  123. hoverButton = 1;
  124. } else {
  125. hoverButton = 0;
  126. }
  127. fill(0);
  128. textSize(minEdge/25);
  129. noStroke();
  130. text("GO!", width/2,height/2+minEdge/3.84);
  131. } else {
  132. text("Loading...", width/2,height/2+minEdge/3.84);
  133. }
  134. } else {
  135. angle = atan2(-width/2 + mouseX, -height/2 + mouseY);
  136. /* nice way to move masks, unfortunately very performance heavy
  137. rotatedMask.clear();
  138. rotatedMask.resetMatrix();
  139. rotatedMask.translate(ringBuffer.width/2,ringBuffer.height/2);
  140. rotatedMask.rotate(map(angle, -PI, PI, PI, -PI));
  141. rotatedMask.image(mask, 0, 0);
  142. ring.pixels.set(ringBuffer.pixels);
  143. ring.updatePixels();
  144. ring.mask(rotatedMask);
  145. */
  146. image(ring, width/2,height/2, minEdge/2, minEdge/2);
  147. noStroke();
  148. fill(window.getComputedStyle( document.body ,null).getPropertyValue('background-color'));
  149. arc(width/2, height/2, minEdge/2, minEdge/2, map(angle, -PI, PI, PI, -PI)-0.4-PI/2, map(angle, -PI, PI, PI, -PI)+0.4-PI/2);
  150. stroke(0);
  151. image(center, width/2,height/2, minEdge/2, minEdge/2);
  152. strokeWeight(1);
  153. for(var i = citizen.length-1; i > 0; i--){
  154. citizen[i].update();
  155. }
  156. var avgR = 0;
  157. var avgG = 0;
  158. var avgB = 0;
  159. var mult = 0;
  160. for(var i = 0; i < centralCitizen.length; i++){
  161. for(var j = 0; j < citizen.length; j++){
  162. if(citizen[j].id == centralCitizen[i]){
  163. avgR += red(citizen[j].color);
  164. avgG += green(citizen[j].color);
  165. avgB += blue(citizen[j].color);
  166. mult++;
  167. }
  168. }
  169. }
  170. avgR = avgR / mult;
  171. avgG = avgG / mult;
  172. avgB = avgB / mult;
  173. purity = (avgR + avgG + avgB) / (3 * 255) * 100;
  174. fill(avgR,avgG,avgB);
  175. //filter( BLUR, 6 );
  176. textStyle(BOLD);
  177. textSize(minEdge/20);
  178. strokeWeight(2);
  179. text("Purity: " + nf(purity,0,2) + "%", width/2, minEdge/6);
  180. if(gameOver){
  181. textSize(minEdge/15);
  182. strokeWeight(12);
  183. text("Game Over", width/2, height/2);
  184. textSize(minEdge/20);
  185. text("Play Again", width/2, height/2+minEdge/10);
  186. strokeWeight(1);
  187. } else {
  188. var current = millis();
  189. var elapsed = current - previous;
  190. previous = current;
  191. time += elapsed;
  192. while (time >= tickMS){
  193. time -= tickMS;
  194. var side = Math.floor(Math.random() * Math.floor(4));
  195. var randcolor = color(Math.random()*255, Math.random()*255, Math.random()*255);
  196. switch (side){
  197. case(0): citizen.push(new Citizen(randcolor, Math.random()*width, -30));
  198. break;
  199. case(1): citizen.push(new Citizen(randcolor, Math.random()*width, height+30));
  200. break;
  201. case(2): citizen.push(new Citizen(randcolor, -30, Math.random()*height));
  202. break;
  203. case(3): citizen.push(new Citizen(randcolor, width+30, Math.random()*height));
  204. break;
  205. }
  206. for(var i = citizen.length-1; i > 0; i--){
  207. citizen[i].move();
  208. }
  209. //tickMS = random(rate/100,2*rate-(rate/100));
  210. }
  211. }
  212. fill(255);
  213. text("Time left: "+nf(timeS,2),width/2,minEdge/20);
  214. }
  215. }
  216. class Citizen{
  217. constructor(arg0, arg1, arg2){
  218. this.color = arg0;
  219. this.id = citizenID;
  220. this.radius = minEdge/40;
  221. citizenID++;
  222. if(typeof arg1 === "string"){
  223. this.x = width/2+random(-minEdge/10,minEdge/10);
  224. this.y = height/2+random(-minEdge/10,minEdge/10);
  225. //this.invincible = true;
  226. } else {
  227. this.x = arg1;
  228. this.y = arg2;
  229. this.setSpeed();
  230. this.angle = atan2(width/2 - this.x, height/2 - this.y);
  231. this.target = (Math.random()+0.1)*minEdge/5.33;
  232. this.inCenter = false;
  233. //if(this.angle + 0.4 > PI || this.angle - 0.4 < -PI){
  234. // this.invalid = true;
  235. // this.despawn();
  236. //}
  237. }
  238. }
  239. setSpeed(){
  240. this.speedX = ((this.x-width/2)*-1)/dist(this.x, this.y, width/2, height/2);
  241. this.speedY = ((this.y-height/2)*-1)/dist(this.x, this.y, width/2, height/2);
  242. }
  243. update(){
  244. //if(this.invalid) this.despawn();
  245. if(!this.inCenter && dist(this.x, this.y, width/2, height/2) <= minEdge/5.33){
  246. this.inCenter = true;
  247. centralCitizen.push(this.id);
  248. }
  249. if(dist(this.x, this.y, width/2, height/2) < minEdge/4 && !this.inCenter){
  250. if(!(angle + 0.4 > this.angle && angle - 0.4 < this.angle)){
  251. this.despawn();
  252. }
  253. }
  254. fill(this.color);
  255. ellipse(this.x, this.y, this.radius);
  256. }
  257. move(){
  258. if(dist(this.x, this.y, width/2, height/2) > this.target){
  259. this.x += this.speedX;
  260. this.y += this.speedY;
  261. }
  262. }
  263. despawn(){
  264. for(var i = 0; i < citizen.length; i++){
  265. if(citizen[i].id == this.id) citizen.splice(i,1);
  266. }
  267. }
  268. }
  269. window.onresize = function() {
  270. var oldwidth = width;
  271. var oldheight = height;
  272. var w = window.innerWidth;
  273. var h = window.innerHeight;
  274. width = w;
  275. height = h;
  276. resizeCanvas(width,height);
  277. minEdge = min(width,height);
  278. for(var i = citizen.length-1; i > 0; i--){
  279. citizen[i].x = map(citizen[i].x, 0, oldwidth, 0, width);
  280. citizen[i].y = map(citizen[i].y, 0, oldheight, 0, height);
  281. citizen[i].setSpeed();
  282. citizen[i].radius = minEdge/40;
  283. }
  284. // for(var i = 0; i < 20; i ++){
  285. // citizen.push(new Citizen(random(width/2 - minEdge/16, width/2 + minEdge/16), random(height/2-minEdge/4, height/2+minEdge/4), color(255,255,255)));
  286. // }
  287. // for(var i = 0; i < citizen.length; i++){
  288. // citizen[i].speedX = ((citizen[i].x-width/2)*-1)/dist(citizen[i].x, citizen[i].y, width/2, height/2);
  289. // citizen[i].speedY = ((this.y-height/2)*-1)/dist(citizen[i].x, citizen[i].y, width/2, height/2);
  290. // citizen[i].angle = atan2(width/2 - citizen[i].x, height/2 - citizen[i].y);
  291. // citizen[i].target = random(2,minEdge/5.33);
  292. // }
  293. };
  294. </script>
  295. </head>
  296. <body>
  297. <!--<img src="data/center.png" style="z-index:-1;position:absolute;display:block;top:50%;left:50%;"></img>-->
  298. </body>
  299. </html>