termat/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Missile Commander Modoki</title>
</head>
<body>
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=1.0">
<table border="0" width="200"><tr>
<td id="score">score=0</td>
<td id="shot">shot=0</td>
<td id="restart"><button type="button" onClick="JavaScript:restart()">restart</button></td>
</tr>
</table>
<table border="1"><tr><td>
<canvas id="canvas" width="400" height="400"></canvas>
</td></tr></table>
</body>
</html>

## missile-commander-modoki.markdown

      
    Raw
  

              missile-commander-modoki.markdown
            
          
    Missile Commander Modoki

A Pen by termat on CodePen.
License.

  
## script.js
var ctx;
var width=400;
var height=400;
var miss=new Array();
var exp=new Array();
var tmp=new Array();
var radius=60;
var keyframe=10;
var cx;
var cy;
var damage=0;
var score=0;
var shot=0;
var maxDamage=1;
var init=function(){
  var canvas = document.getElementById('canvas');
  ctx=canvas.getContext('2d');
  $('#canvas').mousedown(function(e){
    if(damage<maxDamage){
      var m=new Missile(
        exp,
        width*0.5,height,
        e.pageX-cx,
        e.pageY-cy,1.2,true);
      tmp.push(m);
      shot++;
      $('#shot').text("shot="+shot);
    }
  });
  cx=$('#canvas').position().left;
  cy=$('#canvas').position().top;
  canvas.addEventListener("touchstart", touchDown, false);
  var timer = setInterval('update()', keyframe);
};
var touchDown=function(event){
  if(damage<maxDamage){
    var mx=event.touches[0].pageX-cx;
    var my=event.touches[0].pageY-cy;
    event.preventDefault();
    var m=new Missile(
      exp,
      width*0.5,height,
      mx,
      my,1.2,true);
    tmp.push(m);
    shot++;
    $('#shot').text("shot="+shot);
  }
};
var restart=function(){
  if(damage>=maxDamage){
    document.getElementById("restart").disabled =false;
    score=0;
    shot=0;
    $('#shot').text("shot="+shot);
    $('#score').text("score="+score);
    while(miss.length>0)miss.pop();
    while(exp.length>0)exp.pop();
    while(tmp.length>0)tmp.pop();
    damage=0;
  }
};
var gameover=function(){
  ctx.fillStyle = "#aaaaff";
  ctx.font = "36px 'Courier'";
  ctx.fillText("Game Over", 100, 150);
};
var update=function(){
  if(damage>=maxDamage){
    gameover();
    return;
  }
  ctx.clearRect(0, 0, width,height);
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, width,height);
  if(Math.random()<0.02){
    var m=new Missile(
      exp,
      Math.random()*width,0,
      Math.random()*width,height,
      0.4*Math.random()+0.2,false);
    miss.push(m);
  }
  var n0=miss.length;
  var n1=exp.length;
  for(var i=0;i<n0;i++){
    for(var j=0;j<n1;j++){
      if(miss[i].isDiff)continue;
      if(miss[i].dist(exp[j])<=exp[j].r){
        miss[i].expl();
        break;
      }
    }
  }
  for(var i=0;i<n0;i++){
    var obj=miss.shift();
    obj.update(ctx);
    if(obj.alive)miss.push(obj);
  }
  for(var i=0;i<n1;i++){
    var obj=exp.shift();
    obj.update(ctx);
    if(obj.alive)exp.push(obj);
  }
  while(tmp.length>0)miss.push(tmp.pop());
};
var Missile=function(p,x0,y0,x1,y1,sp,isDiff){
  this.len2=(x1-x0)*(x1-x0)+(y1-y0)*(y1-y0);
  this.parent=p;
  this.x0=x0;
  this.y0=y0;
  this.x=x0;
  this.y=y0;
  var len=Math.sqrt(this.len2);
  this.vx=(x1-x0)/len;
  this.vy=(y1-y0)/len;
  this.isDiff=isDiff;
  this.alive=true;
  this.dist=function(m){
    var xx=(this.x-m.x);
    var yy=(this.y-m.y);
    return Math.sqrt(xx*xx+yy*yy);
  };
  this.expl=function(){
    var expl=new Expl(this.x,this.y,radius);
    this.parent.push(expl);
    this.alive=false;
    if(!isDiff&&this.y<height){
        score++;
        $('#score').text("score="+score);
    }

  };
  this.update=function(c){
    this.x += this.vx * sp;
    this.y += this.vy * sp;
    c.strokeStyle='#ffff00';
    c.beginPath();
    c.moveTo(this.x0, this.y0);
    c.lineTo(this.x, this.y);
    c.closePath();
    c.stroke();
    var len=(this.x-this.x0)*(this.x-this.x0)+(this.y-this.y0)*(this.y-this.y0)
    if(len>this.len2){
      if(this.y>=height)damage++;
      this.expl();
    }
  };
};
var Expl=function(x,y,r){
  this.x=x;
  this.y=y;
  this.mr=r;
  this.r=1;
  this.dr=r/(1000/keyframe);
  this.alive=true;
  this.alpha=0.8;
  this.dist=function(m){
    var xx=(this.x-m.x);
    var yy=(this.y-m.y);
    return Math.sqrt(xx*xx+yy*yy);
  };
  this.update=function(c){
    ctx.globalAlpha=this.alpha;
    this.r =Math.min(this.mr,this.r+this.dr);
    c.fillStyle='#ffff88';
    c.beginPath();
    c.arc(this.x,this.y,this.r,0,2*Math.PI,false);
    c.closePath();
    c.fill();
    if(this.r>=this.mr){
      this.alpha -=0.01;
      if(this.alpha<=0)this.alive=false;
    }
    ctx.globalAlpha=1.0;
  };
};

$(document).ready(function(){
  init();
})

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

## style.css
body { background-color: #DDDDDD; font: 30px sans-serif; }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Missile Commander Modoki</title>
	</head>
	<body>
	<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=1.0">
	<table border="0" width="200"><tr>
	<td id="score">score=0</td>
	<td id="shot">shot=0</td>
	<td id="restart"><button type="button" onClick="JavaScript:restart()">restart</button></td>
	</tr>
	</table>
	<table border="1"><tr><td>
	<canvas id="canvas" width="400" height="400"></canvas>
	</td></tr></table>
	</body>
	</html>
	var ctx;
	var width=400;
	var height=400;
	var miss=new Array();
	var exp=new Array();
	var tmp=new Array();
	var radius=60;
	var keyframe=10;
	var cx;
	var cy;
	var damage=0;
	var score=0;
	var shot=0;
	var maxDamage=1;
	var init=function(){
	var canvas = document.getElementById('canvas');
	ctx=canvas.getContext('2d');
	$('#canvas').mousedown(function(e){
	if(damage<maxDamage){
	var m=new Missile(
	exp,
	width*0.5,height,
	e.pageX-cx,
	e.pageY-cy,1.2,true);
	tmp.push(m);
	shot++;
	$('#shot').text("shot="+shot);
	}
	});
	cx=$('#canvas').position().left;
	cy=$('#canvas').position().top;
	canvas.addEventListener("touchstart", touchDown, false);
	var timer = setInterval('update()', keyframe);
	};
	var touchDown=function(event){
	if(damage<maxDamage){
	var mx=event.touches[0].pageX-cx;
	var my=event.touches[0].pageY-cy;
	event.preventDefault();
	var m=new Missile(
	exp,
	width*0.5,height,
	mx,
	my,1.2,true);
	tmp.push(m);
	shot++;
	$('#shot').text("shot="+shot);
	}
	};
	var restart=function(){
	if(damage>=maxDamage){
	document.getElementById("restart").disabled =false;
	score=0;
	shot=0;
	$('#shot').text("shot="+shot);
	$('#score').text("score="+score);
	while(miss.length>0)miss.pop();
	while(exp.length>0)exp.pop();
	while(tmp.length>0)tmp.pop();
	damage=0;
	}
	};
	var gameover=function(){
	ctx.fillStyle = "#aaaaff";
	ctx.font = "36px 'Courier'";
	ctx.fillText("Game Over", 100, 150);
	};
	var update=function(){
	if(damage>=maxDamage){
	gameover();
	return;
	}
	ctx.clearRect(0, 0, width,height);
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, width,height);
	if(Math.random()<0.02){
	var m=new Missile(
	exp,
	Math.random()*width,0,
	Math.random()*width,height,
	0.4*Math.random()+0.2,false);
	miss.push(m);
	}
	var n0=miss.length;
	var n1=exp.length;
	for(var i=0;i<n0;i++){
	for(var j=0;j<n1;j++){
	if(miss[i].isDiff)continue;
	if(miss[i].dist(exp[j])<=exp[j].r){
	miss[i].expl();
	break;
	}
	}
	}
	for(var i=0;i<n0;i++){
	var obj=miss.shift();
	obj.update(ctx);
	if(obj.alive)miss.push(obj);
	}
	for(var i=0;i<n1;i++){
	var obj=exp.shift();
	obj.update(ctx);
	if(obj.alive)exp.push(obj);
	}
	while(tmp.length>0)miss.push(tmp.pop());
	};
	var Missile=function(p,x0,y0,x1,y1,sp,isDiff){
	this.len2=(x1-x0)(x1-x0)+(y1-y0)(y1-y0);
	this.parent=p;
	this.x0=x0;
	this.y0=y0;
	this.x=x0;
	this.y=y0;
	var len=Math.sqrt(this.len2);
	this.vx=(x1-x0)/len;
	this.vy=(y1-y0)/len;
	this.isDiff=isDiff;
	this.alive=true;
	this.dist=function(m){
	var xx=(this.x-m.x);
	var yy=(this.y-m.y);
	return Math.sqrt(xxxx+yyyy);
	};
	this.expl=function(){
	var expl=new Expl(this.x,this.y,radius);
	this.parent.push(expl);
	this.alive=false;
	if(!isDiff&&this.y<height){
	score++;
	$('#score').text("score="+score);
	}

	};
	this.update=function(c){
	this.x += this.vx * sp;
	this.y += this.vy * sp;
	c.strokeStyle='#ffff00';
	c.beginPath();
	c.moveTo(this.x0, this.y0);
	c.lineTo(this.x, this.y);
	c.closePath();
	c.stroke();
	var len=(this.x-this.x0)(this.x-this.x0)+(this.y-this.y0)(this.y-this.y0)
	if(len>this.len2){
	if(this.y>=height)damage++;
	this.expl();
	}
	};
	};
	var Expl=function(x,y,r){
	this.x=x;
	this.y=y;
	this.mr=r;
	this.r=1;
	this.dr=r/(1000/keyframe);
	this.alive=true;
	this.alpha=0.8;
	this.dist=function(m){
	var xx=(this.x-m.x);
	var yy=(this.y-m.y);
	return Math.sqrt(xxxx+yyyy);
	};
	this.update=function(c){
	ctx.globalAlpha=this.alpha;
	this.r =Math.min(this.mr,this.r+this.dr);
	c.fillStyle='#ffff88';
	c.beginPath();
	c.arc(this.x,this.y,this.r,0,2*Math.PI,false);
	c.closePath();
	c.fill();
	if(this.r>=this.mr){
	this.alpha -=0.01;
	if(this.alpha<=0)this.alive=false;
	}
	ctx.globalAlpha=1.0;
	};
	};

	$(document).ready(function(){
	init();
	})