小は、遠位練習の手を投写する - 白いブロックはないステップを行います
実際には、それは言うことができる、彼らはそれの中で最も困難な段階たいか、ボックス(ブロック)が上方に移動させる純粋です
1、初期化イベントリスナー
リスニングを過ごすには、2つの場所があります(存在するが、実際に、それは自分自身の手書きモニタ機能です)
- [スタート]ボタン
- スタートページフェードアウト
- ページが移動を開始します
- プラス独自の手書き機能がリスニング(内部のsetInterval)
- イベントの更新ミリ秒タイミングと内部の内容を取得します。
- 再開ボタン
- 上記のすべてに加えても持っています:
- ページの終わりフェードアウト
- 画分はクリアしてみましょう
- クリアイベントをしてみましょう
- 黒と白のブロックをクリック
- ここでは、使用したイベントのデリゲートを上にセルは、その後バインドに、新しい要素から作成されるため、バインドに
- jQueryのトラバース法と各要素はそれぞれにバインドされています
2は、ページが移動を開始します
ここでの私の主なアイデアは、シームレスを実現するために(実際には... SON1呼び出された場合、son2を2)(父と呼ばれている場合)ゲームのインターフェイスの子どもたちに追加され、移動するには大きな箱を使用することです
- 父はスタート位置-460(ボックスの高さ)、全体隠されています
- ハードコードされた変更は、スコアがバックに増加してゲーム体験を向上させることができるのではなく、スピードとスピードダウンここから移動するごとに20ミリ秒
- あなたがトップ= 0に移動した場合は、一番下、今回の動きは、ボックスの内容の前に子を追加することです追加son2を、開始するには、高さ460(子供がいない配置されている文書の流れから分離できることに注意してください、ように)気晴らしに父を絶対置くことです
- それを説明するには、以下の図を使用します
最後に子どもの数はあまりないAのようなことを保証するために、子どもたちの最後の番号を削除するには、3に達したときに
3、およびランダム黒ブロックの子を追加
次の手順を実行する関数を、書きます:
- ノードを作成します。
- ノードのランダム(Math.random())の黒ブロックの表示されます(パフォーマンスベースノークリックの添加による)の各行に
- ゲームのページを追加します。フロントを
4、ゲームは、ルールの実装を超えています
ゲームを終了するには、2つの方法があります。
1)黒ブロックの下縁を横切ってクリックされていません
私は100ms毎に一度見、リスナー関数自分の手書きだ(のsetIntervalを使用して)
- 一开始获取了整个游戏框距离文档的偏移量,现在每100ms获取一次所有黑块相对文档的偏移量,它俩相减,看有没有超过一定数值就能判断了
2)点击到了白块
这部分比较简单,就在之前绑定元素事件的时候写就行,判断以下当前点的是白还是黑,白就结束游戏调用gameover,黑就加分
5、游戏开始时间的计算
就是上面那个毫秒计数器,采用的方法是获取游戏开始前一刻的时间戳,与当前结束时刻的时间戳相减,得到了游戏开始的毫秒数,再做一下简单的处理 直接反应到页面中。
这里也是用的一个定时器 setInterval,时间间隔是1ms,刚好就对应了要显示的内容。
注意,一开始没有那个页面,以及游戏结束后也没有。
6、游戏结束函数的实现
游戏结束要做以下几件事情
- 清除三个定时器:
- domMove,用于判断游戏规则1的定时器
- timer,盒子移动的定时器
- countTime,游戏时间计算的定时器
- 让当前发生错误的盒子变一下颜色(提高体验)
- 隔0.5秒后(为了让客户反应),继续进行下面几步
- alert弹出分数和游戏结束
- end页面fadeIn
- 清除游戏盒子里面剩余的所有黑白块(也就是把移动的盒子给删了)
- 时间给删了