HTML 5ミニゲーム

遊び方:
1.大きな魚が実を食べる2.大きな魚が小さな魚に餌をやる.小魚が体力を回復する
ステージ1の目標:
1.静止したヒマワリ2.ヒマワリが実を生む.果実が自動的に浮かぶ4.大きな魚が実を食べる.大きな魚が小さな魚に餌をやる
HTMLページ構造の構築

背景を描画
...
オクラを描く
直線のAPIを描画し、HTML 5 Canvas:beginPath()を参照します.closePath(); strokeStyle(); stroke(); lineWidth; lineCap; globalAlpha; ...
果実を描く
黄色い果実と青い果実に使用されるAPI:drawImage()成長=>成熟したゲームルール:画面に15個の果実を保持
大きな魚の描画
大きな魚、体、尻尾、目を描くAPI:translate()rotate(); Math.atan2(y,x);
大きな魚がマウスで動く
大きな魚の座標、マウスの座標、大きな魚はマウスの位置によって回転します.
大きな魚と果実の衝突検出
原理:大きな魚と果実の距離を検出する最適化:ブラウザラベルを切り替えた後jsは実行せず、果実は無限大である.
小魚を描く
原理は大きな魚と同じです
ステージ2の目標:
1.イソギンチャク動画2.大きな魚の目、尻尾アニメーション3.小魚の目、尻尾アニメーション4.小魚の生命値判断5.ゲームスコア計算6.浮遊物
小魚アニメーション
尾振り:轮播尾画像、时间规则まばたき:轮播眼画像、闭眼时间ずっと、开眼时间ランダム保持2000 ms-3000 ms身体变白:大きい鱼は直ちに食品を小鱼に伝えることができなくて、小さい鱼の発生のアニメーション、小さい鱼の体は彻底的に白くなってそれではゲームgame over(GAMEOVERフォントの移行表示とマウス制御の大きい鱼の失効を含む);体の画像の輪番は行ったり来たりする状態に設計されています.
大きな魚が小さな魚に餌をやる
原理は大きな魚が果実を食べるのと似ていて、まず大きな魚と小さな魚の間の距離を検出して、それからある距離より小さいと判断して小さな魚が血で復活します(体の色の変化).
大魚アニメーション
尻尾を振る:同小魚原理まばたき:同小魚原理身体アップグレード:食べるのは青い果実かオレンジ色の果実かを判断し、体はそれぞれ異なる色を変え、小魚に餌を与えた後、大魚の体は元の色に戻った.
ゲームスコアの計算
オレンジ色の果実は1粒100点で、青い果実を食べた後、現在食べているオレンジ色の果実に2を乗じます.およびゲームインタフェースのスコアの表示;
特効(ユーザーエクスペリエンスの向上)

大魚が果実を食べる特効物体プール(pool)は、空いている物体の半径が徐々に増大し、色が徐々に浅くなるかどうかを検出し、反比関係図API

大魚が小魚に与える特効物体プール(pool)は、空いている物体の半径が徐々に増大し、色が徐々に浅くなり、反比関係

があるか否かを検出する.
イソギンチャク動画
二次Bessel曲線の正弦波関数Mathを描画します.sinヒマワリが揺れた後、果実の出生位置を最適化し、ヒマワリの揺れに伴って移動して出生する.