Yearly Archives: 2014

2014-11-04 ,

JavaScriptペグソリティア

この間旅行に行ったときのこと。小さなレストラン兼お土産屋で食事をしたのですが、テーブルの上に木製のパズルが。挑戦してみたのですが全く解けませんでした。悔しかったので作りました。

JavaScript Peg Solitaire

ペグソリティアです。ペグ(黒いの)をドラッグして隣接する他のペグを飛び越えると、その飛び越えられたペグを取り除くことが出来ます。最終的にペグが一本になったら成功です。

English StyleでもEuropean Styleでも難しすぎて解ける気がしません。誰か解き方教えて!

編集機能が付いているので、簡単な問題を作って自分で解くのも楽しいです。自分の力量にあった問題を遊べますからね。出来た問題はURLで共有したり、ブログ等に埋め込むことも出来ます。

ほぼ一本道の簡単な問題(埋め込み)。


この辺りも簡単(URL共有)。

http://misohena.github.io/js_pegsolitaire/index.html?p=H+3+3+OPOPP__PP

穴15個くらいなら適当にやっても偶然解けたりしますね。


例によってソースはGitHubです。

2014-11-02 ,

JavaScript反転パズルゲーム

なんかこういうパズルってあったよなぁと思い出して作りました。

ずっと名前が思い出せなくて、少し作った後に検索してライツアウトだと思い出しました。そうそう、昔一時流行りましたよね。まぁ、私はあまりやってなかったんですけど。

その他のサンプルは使用例ページへ。ソースコードはGitHubへ。

問題が解けたらご褒美画像がもらえるような仕組みにしてみました。 でもスクリプトを見たら画像のURLが分かってしまうようだと興ざめなので、対策を施したバージョンも作ってあります。 一つは画像のファイル名に正解の手をエンコードした文字列を付加する方法。ランダムで出題できなくなりますが、一応解かないとファイル名が分かりません。正解の手は複数ある場合があるので、全ての正解をあらかじめ列挙しておく必要があります。意外と面倒くさい。 もう一つはサーバが出題・解答判定を行う方法。本当はセッション管理をして個別に問題を出題したかったのですが、面倒なのでIPアドレスと時刻などを使用して問題を決定します。解答が送られてきたときは、その問題が解答の手順で解けるかどうかを確認し、解ければ画像ファイルを送ります。 ググればSolverも見つかるようなパズルなので別にそこまでしなくても良いのでしょうが、別なゲームにも応用できそうなので少し考えてみました。

解法については未だ詳しくないのですが、5x5だけは確実に解ける方法を覚えました。

2014-10-30 ,

加速度センサーを使ったJavaScriptスキーゲーム

左右の傾きを検出できるようになったところなので何か応用を。……スキーゲームでも作りましょうか。

適当にどんな感じにするか決めて……(汚い字でスミマセン)

wpid-wp-1414652864075-150x150.jpeg

作ったのが以下(単独のプレイページはこちら)。


デバイス左右の傾きでスキーヤーが左右に動きます。ゲートをくぐって得点を競いましょう。

一応キーボードにも対応しました。あえて傾き操作のみにしようと思っていたのですが、開発中のテストプレイが面倒だったので対応しました。でも傾けるインタフェースに合わせてわざと操作しづらくしてあります。

ソースコードはGitHubで。

あ、そういえば、Nexus7(2012)で試したらdeviceorientationを使った方法だと姿勢が安定しなかったので、devicemotionを使って傾きを検出しています。Nexus5やXperia Z2だとどちらを使ってもそれほど違いは無かったのですが、Nexus7(2012)だと大きく違いが出ました。キャリブレーションすれば直るかもしれませんが、一応大丈夫な方を取りました。

スキーヤーの当たり判定は体の前半分にしかありません。なので、後ろ半分はポールに当たっても大丈夫です。

フィールドの座標系は上がY正方向、右がX正方向、原点はスタート地点下部中央という取り方をしてみました。慣れない座標系を使うと色々ミスをしますね。パパッと作りたい場合は普通にY正方向が画面下になる座標系の方が良かったかなぁと思ったり。

メモ書きではleftWallとrightWall(左右の黒い部分)というオブジェクトを見いだしていたのですが、実際に作っている途中でroad(中央の白い部分)にしました。壁だと左右を別々に管理しなければならず、かといって壁を延ばすときは同じ長さだけ伸ばすように注意しなければならないなど、少し無駄に面倒な気がしたので。

左右移動の速度調整が一番面倒でした。

あとはゲートの出現頻度。1分半(90000ms)までは100フレーム毎から40フレーム毎まで単調に減少していき、それ以降は(20+40*(100000/(100000+(time-90000))))フレーム毎という緩やかに漸近線をとりながら減少していくのを基本としつつランダムで±20フレームの揺れを入れてみました。2~3分くらいからもう少し沢山出た方が忙しくなって良いかもしれないけどどうかなぁ。