Advertisement
Guest User

Untitled

a guest
Dec 13th, 2018
81
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.50 KB | None | 0 0
  1. <html>
  2. <head>
  3. <title></title>
  4. <style>
  5. body{
  6. text-align: center;
  7. margin-top: 2%;
  8.  
  9. }
  10. canvas {
  11. border: 3px solid black;
  12.  
  13.  
  14. }
  15.  
  16. .empty {
  17. width: 50px;
  18. height: 50px;
  19. display: inline-block;
  20. }
  21. .squareShape {
  22. width: 50px;
  23. height: 50px;
  24. background-color: blue;
  25. outline: 2px solid black;}
  26. </style>
  27. </head>
  28. <body>
  29. <canvas id="HongT" width="200px" height="440px">
  30.  
  31. </canvas>
  32.  
  33. <script type="text/javascript">
  34. /*var x=[[1,2],[3,4]];
  35. //Recorrido por filas
  36. for (var i=0;i<2;i++){
  37. for (var j=0;j<2;j++){
  38. document.write(x[i][j]);
  39. }
  40. }
  41. document.write("<br />");
  42.  
  43. //Recorrido por filas inverso
  44. for (var i=1;i>=0;i--){
  45. for (var j=0;j<2;j++){
  46. document.write(x[i][j]);
  47. }
  48. }
  49. document.write("<br />");
  50.  
  51.  
  52.  
  53.  
  54. //Recorrido por columnas
  55. for (var i=0;i<2;i++){
  56. for (var j=0;j<2;j++){
  57. document.write(x[j][i]);
  58. }
  59. }
  60. document.write("<br />");
  61.  
  62. //Recorrido por columnas inverso
  63. for (var i=1;i>=0;i--){
  64. for (var j=0;j<2;j++){
  65. document.write(x[j][i]);
  66. }
  67. }
  68. document.write("<br />");*/
  69. var canvas=document.getElementById('HongT');
  70. var ctx=canvas.getContext('2d');
  71. var actual=[];
  72. var ancho=20;
  73. var alto=20;
  74. var posicion=0;
  75.  
  76. actual['top']=0;
  77. actual['left']=80;
  78. var columna=10;
  79. var fila=22;
  80.  
  81. function fondo(){
  82. for (var i=0;i<columna;i++){
  83. for (var j=0;j<fila;j++){
  84. ctx.fillStyle="white";
  85. ctx.fillRect(i*ancho,j*ancho,ancho,ancho);
  86. ctx.strokeStyle="black";
  87. ctx.strokeRect(i*ancho,j*ancho,ancho,ancho);
  88. }
  89. }
  90. }
  91.  
  92. function nuevaPieza(){
  93. actual['top']=0;
  94. actual['left']=80;
  95. fondo();
  96. x=Math.floor(Math.random()*7);
  97. if (x==0) {//T
  98. actual["mapa"]=[[1,1,1],[0,1,0],[0,0,0]];
  99. actual["size"]=3;
  100. actual['color']='purple';
  101.  
  102. }
  103. if (x==1) {///J
  104. actual["mapa"]=[[0,1,0],[0,1,0],[1,1,0]];
  105. actual["size"]=3;
  106. actual['color']='blue';
  107.  
  108. }
  109. if (x==2) {//L
  110. actual["mapa"]=[[0,1,0],[0,1,0],[0,1,1]];
  111. actual["size"]=3;
  112. actual['color']="orange";
  113.  
  114. }
  115. if (x==3) {//cuadrado
  116. actual["mapa"]=[[1,1,0],[1,1,0],[0,0,0]];
  117. actual["size"]=3;
  118. actual['color']='yellow';
  119.  
  120. }
  121. if (x==4) {///S
  122. actual["mapa"]=[[0,0,0],[0,1,1],[1,1,0]];
  123. actual["size"]=3;
  124. actual['color']='green';
  125.  
  126. }
  127. if (x==5) {//Z
  128. actual["mapa"]=[[0,0,0],[1,1,0],[0,1,1]];
  129. actual["size"]=3;
  130. actual['color']='red';
  131.  
  132. }
  133. if (x==6) {//linea
  134. actual["mapa"]=[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  135. actual["size"]=4;
  136. actual['color']='skyblue';
  137.  
  138. }
  139. }
  140. nuevaPieza();
  141.  
  142. function pintar(){
  143. fondo();
  144. actual['top']+=alto;
  145. for (var i=0;i<actual["size"];i++){
  146. for (var j=0;j<actual["size"];j++){
  147. if (actual["mapa"][i][j]!=0) {
  148. ctx.fillStyle=actual['color'];
  149. ctx.fillRect(actual['left']+(j*20), actual['top']+(i*20), 20,20);
  150. ctx.strokeRect(actual['left']+(j*20), actual['top']+(i*20), 20, 20);
  151.  
  152. colocar();
  153. }
  154. }
  155. }
  156. }
  157. function zuo(){
  158. if (actual["left"]>0) {
  159. actual["left"]-=20;
  160. }
  161.  
  162. }
  163. function you(){
  164. if (actual["left"]<140) {
  165. actual["left"]+=20;
  166. }
  167.  
  168. }
  169.  
  170. var tab=[
  171. [0,0,0,0,0,0,0,0,0,0],
  172. [0,0,0,0,0,0,0,0,0,0],
  173. [0,0,0,0,0,0,0,0,0,0],
  174. [0,0,0,0,0,0,0,0,0,0],
  175. [0,0,0,0,0,0,0,0,0,0],
  176. [0,0,0,0,0,0,0,0,0,0],
  177. [0,0,0,0,0,0,0,0,0,0],
  178. [0,0,0,0,0,0,0,0,0,0],
  179. [0,0,0,0,0,0,0,0,0,0],
  180. [0,0,0,0,0,0,0,0,0,0],
  181. [0,0,0,0,0,0,0,0,0,0],
  182. [0,0,0,0,0,0,0,0,0,0],
  183. [0,0,0,0,0,0,0,0,0,0],
  184. [0,0,0,0,0,0,0,0,0,0],
  185. [0,0,0,0,0,0,0,0,0,0],
  186. [0,0,0,0,0,0,0,0,0,0],
  187. [0,0,0,0,0,0,0,0,0,0],
  188. [0,0,0,0,0,0,0,0,0,0],
  189. [0,0,0,0,0,0,0,0,0,0],
  190. [0,0,0,0,0,0,0,0,0,0],
  191. [0,0,0,0,0,0,0,0,0,0],
  192. [0,0,0,0,0,0,0,0,0,0]];
  193.  
  194. var columnas = (actual["left"]/20);
  195. var filas = (actual["top"]/20);
  196.  
  197. function colocar(){
  198. for(var i=0; i<tab.length; i++) {
  199. for(var j=0; j<tab[i].length; j++) {
  200.  
  201.  
  202. }
  203. }
  204.  
  205. if (actual['top']>380) {
  206. nuevaPieza();
  207. }
  208.  
  209. }
  210.  
  211.  
  212.  
  213.  
  214.  
  215. /*
  216. function freeze(){
  217. for(var y=world.length-1; y>=0; y--) {
  218. for(var x=0; x<world[y].length; x++) {
  219. if(world[y][x] > 0 && world[y][x] < 20 ){
  220. world[y][x] = world[y][x] + 20;
  221. }
  222. }
  223. }
  224. validar();
  225. nuevaPieza();
  226. }
  227. function bajar() {
  228. canMove = true;
  229. for(var y=world.length-1; y>=0; y--) {
  230. for(var x=0; x<world[y].length; x++) {
  231. if(world[y][x] > 0 && world[y][x] < 20 ){
  232. if(y+1 === world.length || world[y+1][x] > 20){
  233. canMove = false;
  234. freeze();
  235. }
  236. }
  237. }
  238. }
  239. if (canMove) {
  240. for(var y=world.length-1; y>=0; y--) {
  241. for(var x=0; x<world[y].length; x++) {
  242. if(world[y][x] > 0 && world[y][x] < 20 ){
  243. world[y+1][x] = world[y][x];
  244. world[y][x] = 0;
  245. }
  246. }
  247. }
  248. tab();
  249. }
  250. validar();
  251. }
  252. function validar(){
  253. for(var y=world.length-1; y>=0; y--) {
  254. fullLine = true;
  255. for(var x=0; x<world[y].length; x++) {
  256. if(world[y][x] < 20) {
  257. fullLine = false;
  258. }
  259. }
  260. if (fullLine) {
  261. world.splice(y, 1);
  262. world.splice(0, 0, [0,0,0,0,0,0,0,0,0,0])
  263. y++;
  264. }
  265. }
  266. }
  267. bajar();*/
  268. function rotar(){
  269. if (posicion>3) {
  270. posicion=0;
  271. }
  272. if(x==0){
  273. if (posicion==1) {
  274. actual["mapa"]=[[0,0,1],[0,1,1],[0,0,1]];
  275. }else if (posicion==2) {
  276. actual["mapa"]=[[0,0,0],[0,1,0],[1,1,1]];
  277. }else if (posicion==3) {
  278. actual["mapa"]=[[1,0,0],[1,1,0],[1,0,0]];
  279. }else{
  280. actual["mapa"]=[[1,1,1],[0,1,0],[0,0,0]];
  281. } }
  282.  
  283. if(x==1){
  284. if (posicion==1) {
  285. actual["mapa"]=[[1,0,0],[1,1,1],[0,0,0]];
  286. }else if (posicion==2) {
  287. actual["mapa"]=[[0,1,1],[0,1,0],[0,1,0]];
  288. }else if (posicion==3) {
  289. actual["mapa"]=[[0,0,0],[1,1,1],[0,0,1]];
  290. }else{
  291. actual["mapa"]=[[0,1,0],[0,1,0],[1,1,0]];
  292. } }
  293.  
  294. if(x==2){
  295. if (posicion==1) {
  296. actual["mapa"]=[[0,0,0],[1,1,1],[1,0,0]];
  297. }else if (posicion==2) {
  298. actual["mapa"]=[[1,1,0],[0,1,0],[0,1,0]];
  299. }else if (posicion==3) {
  300. actual["mapa"]=[[0,0,1],[1,1,1],[0,0,0]];
  301. }else{
  302. actual["mapa"]=[[0,1,0],[0,1,0],[0,1,1]];
  303. } }
  304.  
  305. if(x==3){
  306. actual["mapa"]=[[1,1,0],[1,1,0],[0,0,0]];
  307. }
  308. if(x==4){
  309. if (posicion%2!=0) {
  310. actual["mapa"]=[[1,0,0],[1,1,0],
  311. [0,1,0]];
  312. }else{
  313. actual["mapa"]=[[0,0,0],[0,1,1],[1,1,0]];
  314. }}
  315. if(x==5){
  316. if (posicion%2!=0) {
  317. actual["mapa"]=[[0,0,1],[0,1,1],[0,1,0]];
  318. }else{
  319. actual["mapa"]=[[0,0,0],[1,1,0],[0,1,1]];
  320. }}
  321. if(x==6){
  322. if (posicion%2!=0) {
  323. actual["size"]=4;
  324. actual["mapa"]=[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]];}
  325. else{
  326. actual["mapa"]=[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  327. }}}
  328. document.onkeydown=tecla;
  329. function tecla(e){
  330. e=e||window.event;
  331. if (e.keyCode === 37) {
  332. zuo();
  333. } else if (e.keyCode === 39) {
  334. you();
  335. } else if (e.keyCode === 38) {
  336. posicion++;
  337. rotar();
  338. }
  339. else if (e.keyCode === 40) {
  340. actual['top']+=20;
  341. }
  342. }
  343. setInterval(pintar,1000);
  344. </script>
  345. </body>
  346. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement