elsfkDifficult.vue 11 KB

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