タイマンのインベーダーゲーム！ってこれが？　でもこれで連射可能！

JavaScript JavaScript


きもちよく連射できます。　当たり判定は組み込んでないのですが・・・。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Game</title>
<style type="text/css">
#waku { width:480px; height:640px; border :2px #888 inset; position:relative;}
#waku img { position:absolute; }
#TAMA { display:none; }
</style>

<body>
<div id="waku">
<img src="jiki.png" width="20" height="20" alt="自機" id="JIKI">
<img src="teki.png" width="20" height="20" alt="敵機" id="TEKI">
<img src="tama0.png" width="20" height="20" alt="玉"  id="TAMA">
</div>

<script type="text/Javascript">

var offset = getPosition(document.getElementById('waku'));
var teki = {x: 0, y: 0, m: 4, e: document.getElementById('TEKI') };
var jiki = {x: 240, y: 600, e: document.getElementById('JIKI') };
var tama = {x: 0, y:0 , e: document.getElementById('TAMA') };
var FEND = true;
var Pmouse = {x:240, y:600};

document.getElementById('waku').onmousemove = function (evt) {
  evt = evt ? evt: window.event;
  Pmouse.x = evt.clientX - offset.x;
  Pmouse.y = evt.clientY - offset.y;
}

document.getElementById('waku').onclick = function (evt) {
  start_tama();
  return evt ? evt.preventDefault(): event.returnValue = false;
};

start = function LOOP () {
  //ここに何か書く？

  FEND && setTimeout( LOOP, 10);
};

start_teki = function LOOP1 () { 
  teki.x += teki.m;
  if (teki.x < 0 || teki.x > 460) teki.m *=-1, teki.y += 20;
  teki.e.style.top = teki.y + 'px';
  teki.e.style.left = teki.x + 'px';

  FEND = teki.y < 600;
  FEND && setTimeout(LOOP1, 20);
};

start_jiki = function LOOP2 () {
  jiki.x += (Pmouse.x < jiki.x -8 ) * -4 + (Pmouse.x > jiki.x +8) *4;
  jiki.e.style.left = jiki.x + 'px';
  jiki.e.style.top = jiki.y + 'px';
  FEND && setTimeout(LOOP2, 60);
};

start_tama = function () {
  var x = jiki.x;
  var y = jiki.y;
  var e = document.getElementById('TAMA').cloneNode(false);
  e.id = null;
  e.style.display = 'inline';
  document.getElementById('waku').appendChild(e);
  var P = function LOOP3 () {
    y-= 8;
    e.style.left = x + 'px';
    e.style.top = y + 'px';
    if (y>4) setTimeout(LOOP3, 20); else {
      document.getElementById('waku').removeChild(e);
    }
  };
  P();
};

function getPosition(node) {
  var x = 0, y = x;
  do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent)
  return {x: x, y:y};
}

start();
start_teki();
start_jiki();

</script>