読者です 読者をやめる 読者になる 読者になる

ゆらのふなびと

競プロ, Python, C++

JavaScriptの練習に○×ゲーム的なものを作った

↓こういうものを作りました。

○× Time Attack

ベースは○×ゲームで、10秒間で何回AI*1に勝てるかを競うゲームです。

JavaScriptを始めて4日ですが一応動くものを作ることができたので、制作の記録をまとめておきたいと思います。

背景

プログラミングというと僕は普段は競技プログラミングしかしていません。言語はC++, Pythonで、Web系は全然触ったことがありませんでした。

きっかけは最近あったICFPCというチーム戦のコンテストです。このとき一緒にチームを組んでいた@さんが目の前でビジュアライザやら提出管理ツールやらをささーっと作っていてかっこよかったので、僕も少し勉強してみることにしました。

勉強したこと(基礎)

ドットインストールの以下のシリーズを見ました。

シンプルにまとまっていていいと思います。「作ろう」系の動画があるのもイメージがつかめてよいです。

HTML入門はお好みでという感じ。ずっと基礎をやっていると飽きるので、僕は「入門」をやっていて飽きたら「作ろう」をやる……という風にしていました。

なぜ○×ゲームにしたか

なにか1つ作ってみたいと思ったときに、ハードルとして適切な感じがしたからです。

たとえばオセロだとオセロ自体の実装に手間がかかりそうだし、○×ゲームでAIランダムでいいなら楽かなーと思っていました。

調べたこと(Tips的な)

  • マスを2次元に並べる方法

http://home.a00.itscom.net/hatada/js01/array/array01.js.html

本当はCSSでやるのがいいのかもしれない。

  • キーボード操作を受け付ける方法

http://hakuhin.jp/js/key_board.html

document.onkeydown = function…でOK

自分で遊んでいる途中でタイムアタック要素を入れることを思いついて、それならキーボードの方が早く操作できてよいと思ったので入れることにしました。

  • tweetボタンの設置

qiita.com

↑の記事の一番下の方法をお借りしました。

ツイート文を動的に変える(結果を表示する)というのがちょっと難しいので注意。tweetボタンをつけておくと反応が見られて面白いかなーと思ったのでつけました。

  • github pagesでプロジェクトを公開する方法

公開するプロジェクトでgh-pagesというブランチを切るだけ。超便利。

一応参考にリンク↓を貼っておきますが、特にコマンドを叩く必要はなかったです。(repositoryのページでGUIいじるだけ)

qiita.com

困ったこと

  • github pages から http にリンクを貼ると怒られる

コードの上の方でtweetボタンを使うために以下の行を入れていたのですが、「"http"にアクセスするな」というエラーがでました。

<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>

httpをhttpsにしたら直りました。github pages のページがhttpsなので、そこからはhttpsにしかアクセスできないということらしい(よくわかってない)。

できたもの

↓これ

github.com

感想

とりあえず動くものが作れてよかった。ドットインストールは神。

JavaScript部分だけで200行くらい書いてますが、これを仕上げられたのは競プロで培った実装力のおかげだと思っています。ICPC埋めで鍛えられました…(300までやるだけでも結構違う)。

デザインはからっきしなのでドットインストールで作ったやつをほぼそのまま使ってしまいました。CSSの本とかいくつか読んでパターンを仕入れておくと引き出しが増えていいのかもしれません。

次は折り紙シミュレータでも作れればと考えています(ICFPCで書いた折り紙のコードがあるので)。

*1:AIとか言いつつランダムに置いてるだけです。ごめんね。