初めてのJavaScriptでのプログラミング

Posted by : Izumikawa Fukumi 2013年6月7日金曜日

今回初めて自分のデータベース内にある情報だけで、
JavaScriptのプログラミングをしてみました。

↑

↓

→

←

今回ゲームでもなんでもないですが青い■が動くだけのプログラムを作りました。
応用すればなんとかゲームは、作れます。
でも今回は、時間がなかったので、これだけのプログラムとなりました。

<style type="text/css">
#gamecontainer{ margin: 0 auto; border-width: 5px; border-color: #666666; border-style: solid; height: 400px; width: 400px; }
#imgg{ height: 40px; width: 40px; background-color: #0026ff; }
#botan{ text-align: center; vertical-align: middle; margin-right: 5px; float: left; height: 20px; width: 20px; background-color: #FFCCFF; cursor: pointer;}
</style>
<script>
 
//操作ボタンの動作
var x=0;
var y=0;
    function imgxy(yil) 
    {
      if(yil == 'y0') 
      {
          //↑へ進む
          var img=document.getElementById("imgg");
          x-=10;
          img.style.top=x+"px";
      }else if(yil == 'y1')
      {
          //↓へ進む
          var img=document.getElementById("imgg");
          x+=10;
          img.style.top=x+"px";
      }else if(yil == 'x1') 
      {
          //→へ進む
          var img=document.getElementById("imgg");
          y+=10;
          img.style.left=y+"px";
      }else if(yil == 'x0') 
      {
          //←へ進む
          var img=document.getElementById("imgg");
          y-=10;
          img.style.left=y+"px";
      }
    } 
 
</script>
<!--操作ボタン-->
    <div id="botan" onmousedown="imgxy('y0')">↑</div><div id="botan" onmousedown="imgxy('y1')">↓</div>
    <div id="botan" onmousedown="imgxy('x1')">→</div><div id="botan" onmousedown="imgxy('x0')">←</div>
<div id="gamecontainer"><div id="imgg" style="position: relative; left: 0px; top: 0px;"> </div></div>