elsfk.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <div>
  3. <canvas :id="id" width="320" height="620" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { Component, Prop, Vue } from "vue-property-decorator";
  8. import { v1 as uuid } from "uuid";
  9. import {SCanvasView, SColor, SPainter} from "@persagy-web/draw/lib";
  10. class TestView extends SCanvasView {
  11. map: number[][] = [];
  12. fkType: number = Number((Math.random() * 6).toFixed()); // 0-6
  13. dir: number = Number((Math.random() * 2).toFixed()); // 0-3
  14. fk: number[][][]=[
  15. [
  16. [0, 0, 0, 0],
  17. [0, 1, 1, 0],
  18. [0, 1, 1, 0],
  19. [0, 0, 0, 0],
  20. ],
  21. [
  22. [0, 0, 0, 0],
  23. [0, 1, 1, 0],
  24. [0, 1, 1, 0],
  25. [0, 0, 0, 0],
  26. ],
  27. [
  28. [0, 0, 0, 0],
  29. [0, 1, 1, 0],
  30. [0, 1, 1, 0],
  31. [0, 0, 0, 0],
  32. ],
  33. [
  34. [0, 0, 0, 0],
  35. [0, 1, 1, 0],
  36. [0, 1, 1, 0],
  37. [0, 0, 0, 0],
  38. ],
  39. [
  40. [0, 1, 0, 0],
  41. [0, 1, 0, 0],
  42. [0, 1, 0, 0],
  43. [0, 1, 0, 0],
  44. ],
  45. [
  46. [0, 0, 0, 0],
  47. [1, 1, 1, 1],
  48. [0, 0, 0, 0],
  49. [0, 0, 0, 0],
  50. ],
  51. [
  52. [0, 0, 1, 0],
  53. [0, 0, 1, 0],
  54. [0, 0, 1, 0],
  55. [0, 0, 1, 0],
  56. ],
  57. [
  58. [0, 0, 0, 0],
  59. [0, 0, 0, 0],
  60. [1, 1, 1, 1],
  61. [0, 0, 0, 0],
  62. ],
  63. [
  64. [0, 0, 0, 0],
  65. [0, 1, 1, 0],
  66. [1, 1, 0, 0],
  67. [0, 0, 0, 0],
  68. ],
  69. [
  70. [0, 1, 0, 0],
  71. [0, 1, 1, 0],
  72. [0, 0, 1, 0],
  73. [0, 0, 0, 0],
  74. ],
  75. [
  76. [0, 0, 0, 0],
  77. [0, 0, 1, 1],
  78. [0, 1, 1, 0],
  79. [0, 0, 0, 0],
  80. ],
  81. [
  82. [0, 0, 0, 0],
  83. [0, 1, 0, 0],
  84. [0, 1, 1, 0],
  85. [0, 0, 1, 0],
  86. ],
  87. [
  88. [0, 0, 0, 0],
  89. [0, 1, 1, 0],
  90. [0, 0, 1, 1],
  91. [0, 0, 0, 0],
  92. ],
  93. [
  94. [0, 0, 0, 0],
  95. [0, 0, 1, 0],
  96. [0, 1, 1, 0],
  97. [0, 1, 0, 0],
  98. ],
  99. [
  100. [0, 0, 0, 0],
  101. [1, 1, 0, 0],
  102. [0, 1, 1, 0],
  103. [0, 0, 0, 0],
  104. ],
  105. [
  106. [0, 0, 1, 0],
  107. [0, 1, 1, 0],
  108. [0, 1, 0, 0],
  109. [0, 0, 0, 0],
  110. ],
  111. [
  112. [0, 0, 0, 0],
  113. [0, 1, 1, 0],
  114. [0, 0, 1, 0],
  115. [0, 0, 1, 0],
  116. ],
  117. [
  118. [0, 0, 0, 0],
  119. [0, 0, 1, 0],
  120. [1, 1, 1, 0],
  121. [0, 0, 0, 0],
  122. ],
  123. [
  124. [0, 1, 0, 0],
  125. [0, 1, 0, 0],
  126. [0, 1, 1, 0],
  127. [0, 0, 0, 0],
  128. ],
  129. [
  130. [0, 0, 0, 0],
  131. [0, 1, 1, 1],
  132. [0, 1, 0, 0],
  133. [0, 0, 0, 0],
  134. ],
  135. [
  136. [0, 0, 0, 0],
  137. [0, 1, 1, 0],
  138. [0, 1, 0, 0],
  139. [0, 1, 0, 0],
  140. ],
  141. [
  142. [0, 0, 0, 0],
  143. [1, 1, 1, 0],
  144. [0, 0, 1, 0],
  145. [0, 0, 0, 0],
  146. ],
  147. [
  148. [0, 0, 1, 0],
  149. [0, 0, 1, 0],
  150. [0, 1, 1, 0],
  151. [0, 0, 0, 0],
  152. ],
  153. [
  154. [0, 0, 0, 0],
  155. [0, 1, 0, 0],
  156. [0, 1, 1, 1],
  157. [0, 0, 0, 0],
  158. ],
  159. [
  160. [0, 0, 0, 0],
  161. [0, 0, 1, 0],
  162. [0, 1, 1, 1],
  163. [0, 0, 0, 0],
  164. ],
  165. [
  166. [0, 0, 0, 0],
  167. [0, 1, 0, 0],
  168. [0, 1, 1, 0],
  169. [0, 1, 0, 0],
  170. ],
  171. [
  172. [0, 0, 0, 0],
  173. [1, 1, 1, 0],
  174. [0, 1, 0, 0],
  175. [0, 0, 0, 0],
  176. ],
  177. [
  178. [0, 0, 1, 0],
  179. [0, 1, 1, 0],
  180. [0, 0, 1, 0],
  181. [0, 0, 0, 0],
  182. ]
  183. ];
  184. x = 5;
  185. y = 0;
  186. t = Date.now();
  187. constructor(id: string) {
  188. super(id);
  189. this.initMap();
  190. }
  191. onKeyDown(event: KeyboardEvent): void {
  192. console.log(event.code);
  193. if (event.code == "KeyW") {
  194. if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
  195. this.dir = (this.dir + 1) % 4;
  196. }
  197. } else if (event.code == "KeyA") {
  198. if (!this.isPz(this.x - 1, this.y, this.dir)) {
  199. this.x--;
  200. }
  201. } else if (event.code == "KeyD") {
  202. if (!this.isPz(this.x + 1, this.y, this.dir)) {
  203. this.x++;
  204. }
  205. }
  206. else if (event.code == "KeyS") {
  207. if (!this.isPz(this.x, this.y + 1, this.dir)) {
  208. this.y++;
  209. } else {
  210. this.fullMap();
  211. this.xc();
  212. }
  213. }
  214. this.update();
  215. }
  216. onDraw(painter: SPainter): void {
  217. painter.clearRect(0,0,this.width, this.height);
  218. painter.pen.color = SColor.Transparent;
  219. painter.brush.color = SColor.Red;
  220. this.drawMap(painter);
  221. this.drawFk(painter);
  222. if (Date.now() - this.t > 500) {
  223. if (!this.isPz(this.x, this.y + 1, this.dir)) {
  224. this.y++;
  225. } else {
  226. this.fullMap();
  227. this.xc();
  228. }
  229. this.t = Date.now();
  230. }
  231. this.update();
  232. }
  233. private initMap(): void {
  234. this.map = [];
  235. for (let row = 0; row < 22; row++) {
  236. const m1:number[] = []
  237. for (let col = 0; col < 14; col++) {
  238. if (row > 19 || col < 2 || col > 11) {
  239. m1.push(2);
  240. } else {
  241. m1.push(0);
  242. }
  243. }
  244. this.map.push(m1);
  245. }
  246. }
  247. private drawMap(painter: SPainter): void {
  248. for (let row = 0; row < 22; row++) {
  249. for (let col = 0; col < 14; col++) {
  250. if (this.map[row][col] == 1) {
  251. painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
  252. }
  253. if (this.map[row][col] == 2) {
  254. painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
  255. }
  256. }
  257. }
  258. }
  259. private drawFk(painter: SPainter): void {
  260. for (let row = 0; row < 4; row++) {
  261. for (let col = 0; col < 4; col++) {
  262. if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
  263. painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
  264. }
  265. }
  266. }
  267. }
  268. private isPz(x: number, y: number, dir: number): boolean {
  269. for (let row = 0; row < 4; row++) {
  270. for (let col = 0; col < 4; col++) {
  271. if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
  272. return true;
  273. }
  274. }
  275. }
  276. return false;
  277. }
  278. private fullMap() {
  279. for (let row = 0; row < 4; row++) {
  280. for (let col = 0; col < 4; col++) {
  281. if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
  282. this.map[this.y + row][this.x + col] = 1;
  283. }
  284. }
  285. }
  286. this.x = 5;
  287. this.y = 0;
  288. this.fkType = Number((Math.random() * 6).toFixed());
  289. this.dir = Number((Math.random() * 2).toFixed());
  290. }
  291. private xc(): void{
  292. for (let row = 0; row < 20; row++) {
  293. let flag = true;
  294. for (let col = 0; col < 14; col++) {
  295. if (this.map[row][col] == 0) {
  296. flag = false;
  297. break;
  298. }
  299. }
  300. if(flag){
  301. this.map.splice(row,1);
  302. this.map.unshift([2,2,0,0,0,0,0,0,0,0,0,0,2,2]);
  303. // row--;
  304. }
  305. }
  306. }
  307. }
  308. @Component
  309. export default class ElsfkCanvas extends Vue {
  310. id: string = uuid();
  311. mounted(): void {
  312. new TestView(this.id);
  313. }
  314. }
  315. </script>