Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/11/01 (木)

「キー押した時」と「マウス移動した時」でキャラを動かす

| 12:50 | 「キー押した時」と「マウス移動した時」でキャラを動かす - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 「キー押した時」と「マウス移動した時」でキャラを動かす - 雪乃☆雫のなでしこ日和 「キー押した時」と「マウス移動した時」でキャラを動かす - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ3のお試しプログラム置き場を、ジオシティーズからスターサーバーフリーにお引っ越ししました。http://snowdrops.starfree.jp/index.html

 広告無しで、1G使えるというのはイイよね。

 のところは転送サービスがあるので、記事中のURLは直してない


 さて、これでゲームが作れそう! と狂喜乱舞しておきながら放置していたけれど、とりあえず「キー押した時」や「マウス移動した時」でキャラを動かすのをやってみた。

<script type="なでしこ">
#-----------------------------------------------------------------------
# キー押した時でキャラを動かす
#-----------------------------------------------------------------------
画面w=640。画面h=480。
玉w=20。玉h=20。
玉x=画面w/2-玉w/2。玉y=画面h/2-玉h/2。

「#ball」へ描画開始。
[10,10]へ9の描画。

「#ball」の「左」に「{玉x}px」をDOMスタイル設定。
「#ball」の「top」に「{玉y}px」をDOMスタイル設定。

DOCUMENTをキー押した時には、
 もし、(押されたキー=「ArrowRight」)かつ(玉x<画面w-玉w*2)ならば、玉x=玉x+玉w。
 もし、(押されたキー=「ArrowLeft」)かつ(玉x≧玉w)ならば、玉x=玉x-玉w。
 もし、(押されたキー=「ArrowDown」)かつ(玉y<画面h-玉h*2)ならば、玉y=玉y+玉h。
 もし、(押されたキー=「ArrowUp」)かつ(玉y≧玉h)ならば、玉y=玉y-玉h。
 「#ball」の「左」に「{玉x}px」をDOMスタイル設定。
 「#ball」の「top」に「{玉y}px」をDOMスタイル設定。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ3てすと~キー押した時でキャラを動かす</H1>
<HR>
<style type="text/css">
#base {
  margin:auto;
  width:640px;
  height:480px;
  border:2px solid #999999;
}
#main {
  position:absolute;
}
#ball {
  position:absolute;
}
</style>

<div id="base">
  <div id="main">
    <canvas id="ball" width=20 height=20></canvas>
  </div>
</div>

http://snowdrops.starfree.jp/wnako3_test/15_Keyboard.html


<script type="なでしこ">
#-----------------------------------------------------------------------
# マウスの移動でキャラを動かす
#-----------------------------------------------------------------------
画面w=640。画面h=480。
玉w=20。玉h=20。
玉x=画面w/2-玉w/2。玉y=画面h/2-玉h/2。

「#ball」へ描画開始。
[10,10]へ9の描画。

「#ball」の「左」に「{玉x}px」をDOMスタイル設定。
「#ball」の「top」に「{玉y}px」をDOMスタイル設定。

「#msk」をマウス移動した時には
  もし、(マウスX<画面w-玉w)かつ(マウスY<画面h-玉h)ならば、
    玉x=マウスX。玉y=マウスY。
    「#ball」の「左」に「{玉x}px」をDOMスタイル設定。
    「#ball」の「top」に「{玉y}px」をDOMスタイル設定。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ3てすと~マウスの移動でキャラを動かす</H1>
<HR>
<style type="text/css">
#base {
  margin:auto;
  width:640px;
  height:480px;
  border:2px solid #999999;
}
#main {
  position:absolute;
}
#ball {
  position:absolute;
}
#msk {
  position:absolute;
  z-index:2;
}
</style>

<div id="base">
  <div id="main">
    <canvas id="msk" width=640 height=480></canvas>
    <canvas id="ball" width=20 height=20></canvas>
  </div>
</div>

http://snowdrops.starfree.jp/wnako3_test/15_Mouse.html


 まあ、こんだけなんですが;

 マウス移動の方の「#msk」は何かとゆうと、背景の方で「マウス移動した時」を取得しようとすると、の上に乗っているキャラなどのキャンバスの上にマウスが入ると、マウスの移動を検出しなくなっちゃうから、「z-index」で一番上に透明のキャンバスを置いて、こでマウスを検出している。

 なんか他に、うまい方法があるかなあ・・・?

ゲスト



トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20181101