Tetris

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Da ich momentan einwenig mehr im JS Bereich lernen möchte habe ich heute mithilfe eines Tutorials ein kleines Tetris Spiel "programmiert" an dem ich noch ein wenig lernen möchte.
      Das Spiel hat momentan die Tetris Grundfunktionen und wird von mir noch erweitert ( Multiplayer).

      Das ganze ist als OpenSource auf Github falls es jemand haben möchte^^

      Gespielt wird das ganze mit den Pfeiltasten und Q und W zum drehen.

      Github
      Live-Demo


      Bildschirmfoto 2018-05-25 um 13.33.02.png


      HTML-Quellcode: index.html

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>Teter</title>
      6. 00b;
      7. <style>
      8. body {
      9. background-color: #19181e;
      10. color: #fff;
      11. font-family: Verdana;
      12. font-size: 2em;
      13. text-align: center ;
      14. }
      15. #tetris {
      16. border: white 5px solid;
      17. height: 90vh;
      18. }
      19. </style>
      20. </head>
      21. <body>
      22. <div id="score"></div>
      23. <canvas id="tetris" width="240" height="400"></canvas>
      24. <script src="js/tetris.js"></script>
      25. </body>
      26. </html>
      Alles anzeigen

      JavaScript-Quellcode: js/tetris.js

      1. const canvas = document.getElementById('tetris');
      2. const context = canvas.getContext('2d');
      3. context.scale(20,20);
      4. function arenaSweep() {
      5. let rowCounter = 1;
      6. outer: for (let y = arena.length - 1; y > 0; --y){
      7. for (let x = 0; x < arena[y].length; ++x){
      8. if(arena[y][x] === 0){
      9. continue outer;
      10. }
      11. }
      12. const row = arena.splice(y, 1)[0].fill(0);
      13. arena.unshift(row);
      14. ++y;
      15. player.score += rowCounter * 10;
      16. rowCounter *= 2;
      17. }
      18. }
      19. function collides(player, arena) {
      20. const [m,o] = [player.matrix, player.pos];
      21. for (let y = 0; y < m.length; ++y){
      22. for (let x = 0; x < m[y].length; ++x){
      23. if (m[y][x] !== 0 &&
      24. (arena[y + o.y] &&
      25. arena[y + o.y][x + o.x]) !== 0 ){
      26. return true;
      27. }
      28. }
      29. }
      30. return false;
      31. }
      32. const colors = [
      33. null,
      34. 'red',
      35. 'blue',
      36. 'green',
      37. 'purple',
      38. 'yellow',
      39. 'pink',
      40. 'orange'
      41. ];
      42. function createMatrix(w,h) {
      43. const matrix = [];
      44. while (h--){
      45. matrix.push(new Array(w).fill(0))
      46. }
      47. return matrix;
      48. }
      49. function createPiece(type) {
      50. switch (type){
      51. case 'O':
      52. return [
      53. [2, 2],
      54. [2, 2],
      55. ];
      56. case 'I':
      57. return [
      58. [0, 3, 0 ,0],
      59. [0, 3, 0, 0],
      60. [0, 3, 0, 0],
      61. [0, 3, 0, 0],
      62. ];
      63. case 'S':
      64. return [
      65. [0, 4, 4],
      66. [4, 4, 0],
      67. [0, 0, 0],
      68. ];
      69. case 'Z':
      70. return [
      71. [5, 5, 0],
      72. [0, 5, 5],
      73. [0, 0, 0],
      74. ];
      75. case 'L':
      76. return [
      77. [0, 6, 0],
      78. [0, 6, 0],
      79. [0, 6, 6],
      80. ];
      81. case 'J':
      82. return [
      83. [0, 7, 0],
      84. [0, 7, 0],
      85. [7, 7, 0],
      86. ];
      87. case 'T':
      88. return [
      89. [0, 0, 0],
      90. [1 , 1, 1],
      91. [0, 1, 0],
      92. ];
      93. }
      94. }
      95. function draw(){
      96. context.fillStyle = '#000';
      97. context.fillRect(0, 0, canvas.width, canvas.height);
      98. drawMatrix(arena, {x: 0, y: 0});
      99. drawMatrix(player.matrix, player.pos);
      100. }
      101. function drawMatrix(matrix, offset) {
      102. matrix.forEach((row, y) => {
      103. row.forEach((value, x) => {
      104. if (value !== 0){
      105. //let color = colors[Math.floor(Math.random()*colors.length)]; //epileptic color change
      106. context.fillStyle = colors[value];
      107. context.fillRect(x + offset.x,
      108. y + offset.y, 1, 1,);
      109. }
      110. });
      111. });
      112. }
      113. function merge(player,arena) {
      114. player.matrix.forEach((row, y) => {
      115. row.forEach((value, x) => {
      116. if (value !== 0) {
      117. arena[y + player.pos.y][x + player.pos.x] = value;
      118. }
      119. })
      120. })
      121. }
      122. function playerDrop() {
      123. player.pos.y++;
      124. if(collides(player, arena)){
      125. player.pos.y--;
      126. merge(player,arena);
      127. playerReset();
      128. arenaSweep();
      129. updateScore();
      130. }
      131. dropCounter = 0;
      132. }
      133. function playerMove(dir) {
      134. player.pos.x += dir;
      135. if(collides(player,arena)){
      136. player.pos.x -= dir;
      137. }
      138. }
      139. function playerReset() {
      140. const pieces = 'OISZLJT';
      141. player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
      142. player.pos.y = 0;
      143. player.pos.x = (arena[0].length / 2 | 0)-
      144. (player.matrix[0].length / 2 | 0);
      145. if (collides(player,arena)){
      146. arena.forEach(row => row.fill(0));
      147. player.score = 0;
      148. updateScore();
      149. }
      150. }
      151. function playerRotate(dir) {
      152. const pos = player.pos.x;
      153. let offset = 1;
      154. rotate(player.matrix, dir);
      155. while (collides(player ,arena)){
      156. player.pos.x += offset;
      157. offset = -(offset + (offset > 0 ? 1 : -1));
      158. if(offset > player.matrix[0].length){
      159. rotate(player.matrix, -dir);
      160. player.pos.x = pos;
      161. return;
      162. }
      163. }
      164. }
      165. function rotate(matrix, dir) {
      166. for (let y = 0; y < matrix.length; ++y){
      167. for (let x = 0; x < y; ++x){
      168. [
      169. matrix[x][y],
      170. matrix[y][x],
      171. ] = [
      172. matrix[y][x],
      173. matrix[x][y],
      174. ]
      175. }
      176. }
      177. if (dir > 0) {
      178. matrix.forEach(row => row.reverse());
      179. } else {
      180. matrix.reverse();
      181. }
      182. }
      183. function updateScore() {
      184. document.getElementById('score').innerText = player.score;
      185. }
      186. let dropCounter = 0;
      187. let dropInterval = 1000;
      188. let lastTime = 0;
      189. function update(time = 0) {
      190. const deltaTime = time - lastTime;
      191. lastTime = time;
      192. dropCounter += deltaTime;
      193. if(dropCounter > dropInterval){
      194. playerDrop();
      195. }
      196. draw();
      197. requestAnimationFrame(update);
      198. }
      199. const arena = createMatrix(12,20);
      200. const player = {
      201. pos: {x: 0, y: 0},
      202. matrix: createPiece(null),
      203. score: 0,
      204. };
      205. document.addEventListener('keydown', event => {
      206. switch (event.keyCode){
      207. case 37:
      208. playerMove(-1);
      209. break;
      210. case 39:
      211. playerMove(1);
      212. break;
      213. case 40:
      214. playerDrop();
      215. break;
      216. case 81:
      217. playerRotate(-1);
      218. break;
      219. case 87:
      220. playerRotate( 1);
      221. break;
      222. }
      223. });
      224. playerReset();
      225. updateScore();
      226. update();
      Alles anzeigen