エディタで■を消すゲーム

完成してる

-.icon

onepass at 2022/02/06 17:07:58

https://gyazo.com/b85823534909a5683493fd6b0ced0d4b

イメージ

https://gyazo.com/a72c9f2d0e089642ba2a192b9c971be7

1

code:5行、10文字、3■の場合

□

□□■■□□□□■□

□□■□□■□■□□

□□□□■□□■□■

□□■□■□□□■□

■□□□■□□■□□

2 スタートする前

code:5行、10文字、3■の場合

I□□■■□□□□■□

□□■□□■□■□□

□□□□■□□■□■

□□■□■□□□■□

■□□□■□□■□□

3 スタート

ファイル保存がスタートの合図

（バックで計測スクリがファイルサイズ監視しているので、これでスタートが切られる）

4 全部消した

code:5行、10文字、3■の場合

□□□□□□□

□□□□□□□

□□□□□□□

□□□□□□□

I□□□□□□□

ここで再び保存

バックで計測スクリが判定に入る

間違って過剰に消した場合

code:a

□□□□□□□

□□□□□□□

□□□□□□□

□□□□□□□

I□□□□□

カット済なので、貼り付けをする

code:a

□□□□□□□

□□□□□□□

□□□□□□□

□□□□□□□

I□□□□□□□

ルール

使っていいキーは以下のみ

cursor

backspace

delete

ctrl + s（保存操作）

以下は使ってもいいが、ペナルティを食らう

ctrl + v

これ以外のキーは即行で失格となる

ペナルティ

一回食らうとカウントが+1される

スコア

nペナルティで正解したときのタイムがTとする

nが小さいほどスコアが高い

Tが小さいほどスコアが高い

60sで正解した場合と、13sで1ペナの場合は前者がスコアが高い

実装

ブラウザのtextareaでできそうなので、jsでやろうか

jQueryでいいや

スタートキー

code:a

I□

□□■■□□□□■□

□□■□□■□■□□

code:a

I

□□■■□□□□■□

□□■□□■□■□□

code:この状態になったら即スタートする

I□□■■□□□□■□

□□■□□■□■□□

ストップキー

競技性持たせるためには自動判定ではなく「ストップ押したら判定する」「ミスってたらペナルティ」にしたい

spaceでいいか。押しやすいし。

curosor, bs, delete, ctrl + v 以外を認めない

フォーカスそれても認めない

クリップボードの変化も認めない

□ ← これのはず

js久々なので1-2時間じゃたぶんつくれん

明日やろう

実装1

名前

sports deleting editing erasing

delete_timeattackとかでいいか

3個なら3個必ずつくりたい

code:a

o o o o o o o

1 2 3 4 5 6 7 8

0 1 2 3 4 5 6 7

7個の場合、間に6と左右2

nの場合、n+1個

insertを考えると

最後だけoutofするので場合分けが要る

あ、でもこれ繰り返したら偏らね？

code:a

ooooo

oooxoo

いや、毎回 n+1 計算し直して insert すればいいか

泥臭い

もっとかんたんにかけないか？

ランダムソート？

xxxoooooo

で、これをランダムに並べ替えればいい

code:a

ooooo

ランダムに2つ選ぶ。たとえば3と1だとする

その位置に■入れる

残りには□入れる（最初から入れておけばいい）

なんか結構しんどい感じ

https://gyazo.com/bce184baa0d3e66c3a6c74381833a916

できた

https://gyazo.com/954b4afee9fad3e414a65e438876cc03

code:js

// pureCharで構成された文字列に、n個分のdirtyCharを挿入する。

// 実際は（string は immtable なので）挿入後の文字列を返す。

function getInsertedString_RandomlyNtimes(beforestr, n, dirtyChar) {

const afterLength = beforestr.length + n

const pureChar = beforestr.charAt(0)

// 計9個、3個挿入したいとする

// oooooo

// xxx

//

// ooooooxxx まずは全連結時の長さを計算して、

// この配列から一つランダムに取り除くことで、ランダムな挿入位置を計算する

// why?

// このように「取り除く対象から "すでに採用した位置" を消す」処理をしないと

// 同じ位置に再度挿入するみたいな重複が起こるから.

let selectee = new Array(afterLength)

for(var i=0; i<selectee.length; i++){

}

const inserteePositions = [];

for(var i=0; i<n; i++){

const indexOfInserteePos = getRandomNumber0toX(selectee.length)

const inserteePos = selectee.splice(indexOfInserteePos, 1)

inserteePositions.push(inserteePos);

}

let afterstrByList = []

for(var i=0; i<afterLength; i++){

}

for(var i=0; i<n; i++){

}

const afterstr = arraystrToString(afterstrByList)

return afterstr

}

timer

現在時刻差分で求める感じがいいですよね？

Dateオブジェクトでいい

差分はdateとdate引けばいい

判定処理

配列a1とa2の一致判定ってどうやる？

https://gyazo.com/71334f47a1bdd7165d4abaaebce9b14d

どういうこと

あ、参照？

stringfyでいいか

code:js

function equalArrayXandArrayY(x, y){

const stringX = JSON.stringify(x)

const stringY = JSON.stringify(y)

return stringX===stringY

}

const r = equalArrayXandArrayY(a1, a2)

console.log(r)

キーボード検出

keydonw, keyup, さらにはフラグまで持ち出して繊細なコントロールが要る

keydownだけでいける

preventDefaultが動かん

https://gyazo.com/ebb2499d163faa67e6246c39284ac881

space押してもbooのとこに行っちゃう（kc=32）

keyupはdefault actionの後に開始されるらしい（つまり使えない）

マジかよ……

状態遷移整理

状態

not started

starting

stopped

操作

start

stop

fail

table:t

start stop fail

NOT STARTED NS S - -

STARTING S - E? E1

STOPPED(END) E NS - -

E?

判定結果がtrueならE

E1

失格なので即行でE

とりあえずワンパス at 2022/02/06 17:08:36

生産性しょぼすぎない？

jsの書き方全部ググってるのがまず遅い

まあ慣れるしかないのであまり考察しない

実装2

.

✅テキストエリアへのフォーカスとキャレット位置の制御

✅esc押下で何回もやり直したい

✅失格の実装

✅リファクタリング

最低限遊べるくらいはできた

あとはどこまでこだわるか、かな

実装3

不正解時のペナルティの実装

space押して正解判定するが、ミスったときはペナルティにしたい

コピペ時のペナルティの実装

deleteミスって余分に消した後は、□のコピペで凌ぐことになるが、これもペナルティにしたい

スコア計算やら記録やら

まあこれはだるいのでいいや

ペナルティは表示を増やせばいいか

ペナルティは2種類？1種類？

同じでいいか。シンプルだし。

done

https://gyazo.com/4e766b909caf81002c4c508e9cdb2d3f

正解じゃなくても増えるし、消しすぎて□をコピペする必要があってコピペしても増える

ああ、あと盤面サイズの変更はサポートしたい

urlパラメーターで与えればいいかしら

textareaのコントロールも必要だなぁ

now

code:cssですね.css

margin-left: 20px;

margin-right: 20px;

width: 480px;

height: 240px;

}

code:本体.js

const XSIZE = 10

const YSIZE = 5

const TARGET_COUNT_PER_LINE = 3

const questioner = new Questioner(XSIZE, YSIZE, TARGET_COUNT_PER_LINE)

パラメータ

questioner x,y size

textarea x y size

fontsize

パラメータパッシング

url parameterくらいしかないよね？

UIつくるのもだるいし

index.html?k1=value&k2=hoge

https://gyazo.com/558e14de00e52f523938439311512912

cols

平均的な文字幅による、テキストコントロールの外見上の幅です。

rows

コントロールで見ることが可能なテキストの行数です。

wrap

デフォはsoft、水平スクロールしたければoff

うーん、ガバガバじゃない？

https://gyazo.com/a59502d6c1a26e49a576f38ef09cd80b

https://gyazo.com/69b4e74b21cd4fa40ab0d0d9bd196ddc

cols 50 なのに 50 文字になってない

いや、余白が確保されていると考えるべきか

全角1文字で2文字換算、でいいのか？

いけたかな？

https://gyazo.com/299580b0351013cea3e19b56b5f1f4d6

https://gyazo.com/29615f7de28fa7c61c8b843886e37182

ok

validation

x, y, d

xは2以上

yは2以上

dはx未満

以下でもいいけど（ただの連打チキンレースゲーになるがｗ

がー、thisの罠にはまってる

https://gyazo.com/fb6743b9b941d14408cf7e564b804d0c

code:error

Uncaught TypeError: this is undefined

display file:///D:/work/github/stakiran_sub/delete_timeattack/main.js:468

validateGameSize file:///D:/work/github/stakiran_sub/delete_timeattack/main.js:190

<anonymous> file:///D:/work/github/stakiran_sub/delete_timeattack/main.js:608

アロー関数でも function 定義でもダメだった

pythonだとこういうことは起きない

jsだとこんな感じでエイリアス貼りまくってたらどこかでthisが狂って死ぬ

たぶん

最悪bindで目的のthisを渡せばいい

functionが動的で、arrowがレキシカル

class構文はどっちだろ？

たぶんどっかで動的なのが混ざってる気がする

https://gyazo.com/2595359c5afb4ad4fae9f840403a4774

エイリアスやめることで解決

-.icon

2022/02/11 08:18:46 で、一通り実装できましたけども、どうですか。

疲れて他にやることなくなったときの手段として、今度これを試してみたい