今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

HTMLとjQueryで障害物よけゲームを作る(その1)

f:id:sudara_bluse:20171207210025p:plain

最近HTMLとJsvaScript(jQuery)書いてない。。

ふと思ったので、リハビリに簡単な障害物よけゲームを作ることにした。

スマホのみを対象としてます。

canvasやcreate.jsも使いません。DOMでいきます。

 

素材はこちら、友人のとりとライオン様から画像を拝借しようと思います。

toritolion | おとぼけ動物工場 とりとライオン

1、フィールドを作る

f:id:sudara_bluse:20171207143841p:plain

 

シンプルなフィールドを作ります。

コードはこちら。

gist.github.com

 

2、フィールドにキャラクターを設置する

フィールドにキャラクター画像を設置します。

index.htmlに
<img id="character" src="character.png">

style.css

#character{ position: absolute;    bottom: 35px;    left: 10px;}

を追加します。

f:id:sudara_bluse:20171207144813p:plain

 

3、タップするごとにどんどんジャンプ。重力で常に下に落ちるようにする。

index.htmlにmain.jsを読み込んでjsを記述。

ProcessingやoF風 にsetup()とdraw()を作りました。

draw()はsetInterval()によって0.1秒ごとに実行されます。

現状の完成図。 

 

3、コード

 

 

以上です。次は障害物などを配置してみようと思います〜

気が向いたらその2書きます〜完。