Last active
March 4, 2024 05:26
-
-
Save fureweb-com/a47b22bad873b1326c00ae4bd691132a to your computer and use it in GitHub Desktop.
CodeSpitz 74 - 6강 코드
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head></head> | |
| <body> | |
| <section id="stage"> | |
| </section> | |
| <nav id="controller"> | |
| <button class="up"></button> | |
| <button class="down"></button> | |
| <button class="left"></button> | |
| <button class="right"></button> | |
| <button class="space"></button> | |
| </nav> | |
| <section id="title" style="display:none"> | |
| <h1>TETRIS</h1> | |
| <button class="start">START</button> | |
| </section> | |
| <section id="stageIntro" style="display:none"> | |
| STAGE | |
| <section class="stage"></section> | |
| </section> | |
| <section id="game" style="display:none"> | |
| <section class="next"></section> | |
| <section class="play"></section> | |
| <section class="stage"> | |
| STAGE | |
| <section class="stage"></section> | |
| </section> | |
| <section class="score"> | |
| <div>SCORE</div> | |
| <div>current: <span class="curr"></span></div> | |
| <div>total: <span class="total"></span></div> | |
| </section> | |
| </section> | |
| <section id="stageEnd" style="display:none"> | |
| <div>Stage: <span class="stage"></span></div> | |
| <div>Current: <span class="curr"></span></div> | |
| <div>Total: <span class="total"></span></div> | |
| <button class="next">NEXT</button> | |
| </section> | |
| <section id="clear" style="display:none"> | |
| Thank you! | |
| <button class="rank">Rank</button> | |
| <button class="title">Title</button> | |
| </section> | |
| <section id="dead" style="display:none"> | |
| You are dead. | |
| <button class="rank">Rank</button> | |
| <button class="title">Title</button> | |
| </section> | |
| <ul id="ranking" style="display:none"></ul> | |
| <script src="setting.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const APP = (SET=>{ | |
| 'use strict'; | |
| const repeat = (count, ...arg) => { | |
| const f = arg.pop(); | |
| for(let i = 0; i < count; i++) f(i, ...arg); | |
| }; | |
| const PROP = (self, ...v) => Object.assign(self, ...v); | |
| const ERR = v => { throw v; }; | |
| const IS_OVERRIDE = _ => ERR('override!'); | |
| const TMPL = (self, method, ...arg) => '_' + method in self ? self['_' + method](arg) : ERR(); | |
| const HOOK = (p, method) => typeof p.prototype[method] === 'function' ? '_' + method : ERR(); | |
| const SubData = class{ | |
| constructor(listener) { PROP(this, {listener}); } | |
| notify() { if(this.listener) this.listener(); } | |
| clear() { | |
| TMPL(this, 'clear'); | |
| } | |
| } | |
| const Stage = class extends SubData { | |
| [HOOK(SubData, 'clear')]() { | |
| this.stage = 0; | |
| this.isNext(); | |
| } | |
| isNext() { | |
| if(this.stage++ === SET.stage.max) return false; | |
| else { | |
| this.notify(); | |
| return true; | |
| } | |
| } | |
| get speed() { | |
| const {stage: {speed: [min, max], max: stageMax}} = SET; | |
| return min - (min - max) * (this.stage - 1) / stageMax; | |
| } | |
| get count() { | |
| const {stage: {count: [max, inc]}} = SET; | |
| return max + inc * (this.stage - 1); | |
| } | |
| } | |
| const Score = class extends SubData { | |
| [HOOK(SubData, 'clear')]() { | |
| this.curr = this.total = 0; | |
| this.notify(); | |
| } | |
| add(line, stage) { | |
| //... | |
| } | |
| } | |
| const Block = class { | |
| static get() {} | |
| constructor() {} | |
| left() {} | |
| right() {} | |
| get block() {} | |
| } | |
| const Data = class extends Array { | |
| constructor(row, col) { | |
| super(row); | |
| this.fill([]); | |
| PROP(this, {col}); | |
| } | |
| cell() {} | |
| row() {} | |
| all() {} | |
| } | |
| const Renderer = class { | |
| constructor() {} | |
| clear() { | |
| IS_OVERRIDE(); | |
| } | |
| render(v) { | |
| TMPL(this, 'render', v); | |
| } | |
| } | |
| const TableRenderer = class extends Renderer { | |
| [HOOK(Renderer, 'render')]() {} | |
| [OVERRIDE(Renderer, 'clear')]() {} | |
| } | |
| const Panel = class { | |
| constructor(game, _init, _render) { | |
| PROP(this, {game, _init, _render}); | |
| } | |
| init(...arg) { | |
| return this.base = this._init(this.game, ...arg); | |
| } | |
| render(...arg) { | |
| this._render(this.base, this.game, ...arg); | |
| } | |
| } | |
| const Game = class { | |
| constructor(col, row, basePanel) { | |
| } | |
| addState(state, {init, render}, f) { | |
| this.state[state] = f; | |
| this.panel[panel] = new Panel(this, init, render); | |
| } | |
| } | |
| return { | |
| init() { | |
| const game = new Game(10, 20, { | |
| init: ()=> sel('#stage'), | |
| render: (base, game, panel, {base: el = panel.init()}) => { | |
| base.innerHTML = ''; | |
| base.appendChild(el); | |
| } | |
| }); | |
| game.addState(Game.title, { | |
| init: (game, ...arg) => { | |
| sel('#title').style.display = 'block'; | |
| sel('#title.start').onclick =_=>game.setState(Game.stageIntro); | |
| return sel('#title'); | |
| }, | |
| render: null | |
| }, (_, {stage, score}) => { | |
| stage.clear(); | |
| score.clear(); | |
| }); | |
| } | |
| } | |
| })(SET); | |
| APP.init(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const SET = { | |
| stage: { | |
| max: 10, | |
| count: [10, 3], | |
| speed: [500, 100] | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment