shubham808/missiles.html

## missiles.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">

	<title>Dotchaser</title>


	<style>
	canvas {
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	</style>
</head>
<body>
<noscript>
<p>For full functionality of this page it is necessary to enable JavaScript.
Here are the <a href="http://www.enable-javascript.com/" target="_blank">
instructions how to enable JavaScript in your web browser</a>.</p>
</noscript>
<script type="text/javascript">


var

// Game vars //

canvas,
ctx,
width,
height,
theta = 0 ,
beta = 0,
speed = 0,
m = [],
omega = 4/180,
gamma = 0.05,
delta = 0,
tx = 0,
ty = 0,
evt;

function dist(x,y,x1,y1){
	return  Math.sqrt( Math.pow((x1-x), 2) + Math.pow((y1-y), 2) );
}

function onpress(evt){

	tx=evt.offsetX;
	ty=evt.offsetY;
	//console.log(tx +" and "+ty);
}


var draw = function() {
	 ctx.fillStyle = "rgb(179, 179, 255)";
     ctx.fillRect(0, 0, width, height);
     ctx.beginPath();
     ctx.arc(width/2, height-height/5, width/6, 0, Math.PI * 2);
     ctx.fillStyle = "rgb(0, 82, 102)";
	 ctx.fill();
	 ctx.stroke();
	 ctx.closePath();
};

var pad = function(x,y) {
    this.x=x;
    this.y=y;
    //console.log(tx+"  "+ty);
    this.update = function(){
        this.x=tx;
        this.y=ty;

        //console.log("1 )"+tx+"  "+ty);

        var c = dist(tx,ty,width/2,height-height/5);
        var b = dist(tx,ty,width,height-height/5);
        var a = dist(width/2, height-height/5,width, height-height/5);

        ctx.beginPath();
        ctx.closePath();
		if(c>width/10) {
            this.x=((width/10)*tx+(c-(width/10))*width/2)/c;
            this.y=height-(((width/10)*(height-ty)+(c-(width/10))*(height/5))/c);

        }

        theta = Math.acos(((a*a)+(c*c)-(b*b))/(2*c*a));
        if(ty>height-height/5){
            theta=Math.PI*2-theta;
        }
        //console.log(c+" z "+theta);
        ctx.beginPath();
        ctx.arc(this.x,this.y,width/8, 0, Math.PI * 2);
     	ctx.fillStyle = "rgb(255, 153, 194)";
	 	ctx.fill();
	 	ctx.stroke();
	 	ctx.closePath();
    };
};

var Plane = function(){
	this.angle = theta ;
	this.update = function(){

	    if(this.angle!==theta){
        if(this.angle>theta){
            if(this.angle-theta>=Math.PI){
            this.angle+=omega;
            this.angle%=Math.PI*2;
            }
            else{
            this.angle-=omega;
            }

        }
        else if(this.angle<theta){
            if(theta-this.angle>Math.PI){
            this.angle-=omega;
            if(this.angle<0){
                this.angle+=Math.PI*2;
            }
            }
            else{
            this.angle+=omega;
            }
        }
    }	console.log(this.angle+" q "+theta);

    	ctx.beginPath();
    	ctx.moveTo(width/2 +width*Math.cos(this.angle)/16,height/3 - width*Math.sin(this.angle)/16);
		ctx.lineTo(width/2 -width*Math.cos(this.angle)/16,height/3 + width*Math.sin(this.angle)/16);
		ctx.fill();
	 	ctx.stroke();
		ctx.closePath();

    	ctx.beginPath();
        ctx.arc(width/2+width*Math.cos(this.angle)/16,height/3 - width*Math.sin(this.angle)/16,width/50, 0, Math.PI * 2);
     	ctx.fillStyle = "rgb(255, 153, 194)";
	 	ctx.fill();
	 	ctx.stroke();
	 	ctx.closePath();
	};


};

var control = new pad(tx,ty);
var plane = new Plane();
function main() {
	// create canvas and set width/height
	canvas = document.createElement("canvas");

	width = window.innerWidth;
	height = window.innerHeight;

	evt = "touchstart";
	if (width >= 500) {
		width  = 320;
		height = 480;
		canvas.style.border = "1px solid #000";
		evt = "mousemove";
	}

	// listen for input event
	document.addEventListener(evt, onpress);

	canvas.width = width;
	canvas.height = height;
	if (!(!!canvas.getContext && canvas.getContext("2d"))) {
		alert("Your browser doesn't support HTML5, please update to latest version");
	}
	ctx = canvas.getContext("2d");

	// currentstate = states.Splash;
	// append canvas to document
	document.body.appendChild(canvas);

	// initate graphics and okbtn
	 var img = new Image();
	img.onload = function() {
	// 	initSprites(this);
	// 	ctx.fillStyle = s_bg.color;

	// 	okbtn = {
	// 		x: (width - s_buttons.Ok.width)/2,
	// 		y: height - 200,
	// 		width: s_buttons.Ok.width,
	// 		height: s_buttons.Ok.height
	// 	}
		console.log("test");

	}

	img.src = "res/sheet.png";
	run();
}

function run() {
	var loop = function() {
		draw();
		update();
		window.requestAnimationFrame(loop, canvas);
	}
	window.requestAnimationFrame(loop, canvas);
}

function update(){

	control.update();
    plane.update();
 //   m.update();

}
main();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">

	<title>Dotchaser</title>


	<style>
	canvas {
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	</style>
	</head>
	<body>
	<noscript>
	<p>For full functionality of this page it is necessary to enable JavaScript.
	Here are the <a href="http://www.enable-javascript.com/" target="_blank">
	instructions how to enable JavaScript in your web browser</a>.</p>
	</noscript>
	<script type="text/javascript">


	var

	// Game vars //

	canvas,
	ctx,
	width,
	height,
	theta = 0 ,
	beta = 0,
	speed = 0,
	m = [],
	omega = 4/180,
	gamma = 0.05,
	delta = 0,
	tx = 0,
	ty = 0,
	evt;

	function dist(x,y,x1,y1){
	return Math.sqrt( Math.pow((x1-x), 2) + Math.pow((y1-y), 2) );
	}

	function onpress(evt){

	tx=evt.offsetX;
	ty=evt.offsetY;
	//console.log(tx +" and "+ty);
	}


	var draw = function() {
	ctx.fillStyle = "rgb(179, 179, 255)";
	ctx.fillRect(0, 0, width, height);
	ctx.beginPath();
	ctx.arc(width/2, height-height/5, width/6, 0, Math.PI * 2);
	ctx.fillStyle = "rgb(0, 82, 102)";
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	};

	var pad = function(x,y) {
	this.x=x;
	this.y=y;
	//console.log(tx+" "+ty);
	this.update = function(){
	this.x=tx;
	this.y=ty;

	//console.log("1 )"+tx+" "+ty);

	var c = dist(tx,ty,width/2,height-height/5);
	var b = dist(tx,ty,width,height-height/5);
	var a = dist(width/2, height-height/5,width, height-height/5);

	ctx.beginPath();
	ctx.closePath();
	if(c>width/10) {
	this.x=((width/10)tx+(c-(width/10))width/2)/c;
	this.y=height-(((width/10)(height-ty)+(c-(width/10))(height/5))/c);

	}

	theta = Math.acos(((aa)+(cc)-(bb))/(2c*a));
	if(ty>height-height/5){
	theta=Math.PI*2-theta;
	}
	//console.log(c+" z "+theta);
	ctx.beginPath();
	ctx.arc(this.x,this.y,width/8, 0, Math.PI * 2);
	ctx.fillStyle = "rgb(255, 153, 194)";
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	};
	};

	var Plane = function(){
	this.angle = theta ;
	this.update = function(){

	if(this.angle!==theta){
	if(this.angle>theta){
	if(this.angle-theta>=Math.PI){
	this.angle+=omega;
	this.angle%=Math.PI*2;
	}
	else{
	this.angle-=omega;
	}

	}
	else if(this.angle<theta){
	if(theta-this.angle>Math.PI){
	this.angle-=omega;
	if(this.angle<0){
	this.angle+=Math.PI*2;
	}
	}
	else{
	this.angle+=omega;
	}
	}
	} console.log(this.angle+" q "+theta);

	ctx.beginPath();
	ctx.moveTo(width/2 +widthMath.cos(this.angle)/16,height/3 - widthMath.sin(this.angle)/16);
	ctx.lineTo(width/2 -widthMath.cos(this.angle)/16,height/3 + widthMath.sin(this.angle)/16);
	ctx.fill();
	ctx.stroke();
	ctx.closePath();

	ctx.beginPath();
	ctx.arc(width/2+widthMath.cos(this.angle)/16,height/3 - widthMath.sin(this.angle)/16,width/50, 0, Math.PI * 2);
	ctx.fillStyle = "rgb(255, 153, 194)";
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	};



	};

	var control = new pad(tx,ty);
	var plane = new Plane();
	function main() {
	// create canvas and set width/height
	canvas = document.createElement("canvas");

	width = window.innerWidth;
	height = window.innerHeight;

	evt = "touchstart";
	if (width >= 500) {
	width = 320;
	height = 480;
	canvas.style.border = "1px solid #000";
	evt = "mousemove";
	}

	// listen for input event
	document.addEventListener(evt, onpress);

	canvas.width = width;
	canvas.height = height;
	if (!(!!canvas.getContext && canvas.getContext("2d"))) {
	alert("Your browser doesn't support HTML5, please update to latest version");
	}
	ctx = canvas.getContext("2d");

	// currentstate = states.Splash;
	// append canvas to document
	document.body.appendChild(canvas);

	// initate graphics and okbtn
	var img = new Image();
	img.onload = function() {
	// initSprites(this);
	// ctx.fillStyle = s_bg.color;

	// okbtn = {
	// x: (width - s_buttons.Ok.width)/2,
	// y: height - 200,
	// width: s_buttons.Ok.width,
	// height: s_buttons.Ok.height
	// }
	console.log("test");

	}

	img.src = "res/sheet.png";
	run();
	}

	function run() {
	var loop = function() {
	draw();
	update();
	window.requestAnimationFrame(loop, canvas);
	}
	window.requestAnimationFrame(loop, canvas);
	}

	function update(){

	control.update();
	plane.update();
	// m.update();

	}
	main();
	</script>
	</body>
	</html>