elsfkDifficult.vue 11 KB

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