test1.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Copter Crash</title>
<style>
body {
                background: url("background.jpg");
            }
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
	margin-top:10px;
	margin-left:100px;
	
}
            #sendMyScore{
                position: absolute;
                top: 240px;
                left: 150px;
                /*padding-left: 15px;*/
                width: 100px;
                height: 70px;
                text-align: center;
                background-color:  #2f313d;
               color:   #ffffff;
               font-family: cooper;
               font-size: 22px;
               border: 1px dotted;
               border-radius: 25px/25px;
            }
			#play{
                position: absolute;
                top: 148px;
                left: 1148px;
                /*padding-left: 15px;*/
                width: 100px;
                height: 70px;
                text-align: center;
                background-color:  #2f313d;
               color:   #ffffff;
               font-family: cooper;
               font-size: 22px;
               border: 1px dotted;
               border-radius: 25px/25px;
            }
			#rld{
                position: absolute;
                top: 280px;
                left: 1148px;
                /*padding-left: 15px;*/
                width: 100px;
                height: 70px;
                text-align: center;
                background-color:  #2f313d;
               color:   #ffffff;
               font-family: cooper;
               font-size: 22px;
               border: 1px dotted;
               border-radius: 25px/25px;
            }
			
            .backbtn{
                position:absolute;                           
                top:160px;
                left:1000px;
                width: 70px;
                height: 20px;
				}
			#foot{
                position: absolute;
                width: 99%;
                height: 40px;
                top: 580px;
                font-family: "cooper", serif;                
                font-size: 25px;
                text-align: center;
                background-color: #fc9;
            }
			
            

</style>
</head>
<body >
<h1 style=" font-family: Comic Sans MS;font-size: 25px;background-color:red; width: 270px; left: 1050px;top:10px; position: absolute; text-align: center">Copter Crash</h1>
      <div id="controls1">
        <div style=" font-family: Comic Sans MS, bold;font-size: 22px">
				<font color="white">
                <b>Score :
                <span id="scoreboard">0</span>
				</b>
				</font>
        </div>
      </div>
      <div id="controls2" >
        <div style=" font-family: Comic Sans MS, bold;font-size: 22px;">
				<font color="white">
                <b>Best Score :
                <span id="bestscore">0</span>
				</b>
				</font>
        </div>
      </div>
      <div class="backbtn">
                
            <a id="sendMyScore" onclick="goBack();
                   window.location.href='game4.php?pid=' + pid + '&score=' + score;">
                       <br>Quit
            </a>
                   <!--<input type="button" id="homebtn" class="hmebtn" value="Quit" name="goHome" onclick="goBack();"  
                   <//%=request.getParameter("type")%> <//%=request.getParameter("myScore")%>/>       -->
               
        </div>
		<div>
                       <button id="play" onclick="startGame()">Play</button>

					   </div>
		<div>
			 <button id="rld" onclick="location.reload()">Play Again</button>
			  
		</div>
		<div id="foot">Copyright &#169; flashnfun.info</div>
					   
		<script>

var myGamePiece;
var myObstacles = [];
var myBackground;
var myScore=0;
var mySound;
var myMusic;
var myMusic2;
var score;
var temp2;
var m;
//	temp=document.getElementById("scoreboard").innerHTML;
//	temp2=document.getElementById("bestscore").innerHTML;
//	if{
//		temp>temp1;
//		temp1=temp;
//		document.getElementById("bestscore").innerHTML=temp1;
//	}

function startGame() {
    myGamePiece = new component(50, 50, "copter2.png", 10, 120, "image");
	myGamePiece.gravity = 0.05;
	myBackground = new component(880, 430, "new_cave_bg.jpg", 0, 0, "image");
	
	mySound = new sound("blast.mp3");
	myMusic = new sound("background_main.mp3");
    myMusic.play(loop="true");
	myMusic2 = new sound("copter.mp3");
	myMusic2.play();
    myGameArea.start();
	
}
var bestScr = localStorage.getItem('scr');
	if(bestScr){
		document.getElementById('bestscore').innerHTML = bestScr;
	}

function goBack(){
        score = document.getElementById('bestscore').innerHTML;
    }

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 880;
        this.canvas.height = 430;
		this.canvas.style.cursor = "none"; //hide the original cursor
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 10);
		 window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        })
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
	
}

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
	this.gravity = 0.05;
	this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image,
                this.x,
                this.y,
                this.width, this.height);
        } 
		//else if (this.type == "text") {
       //     ctx.font = this.width + " " + this.height;
       //     ctx.fillStyle = color;
       //     ctx.fillText(this.text, this.x, this.y);
      //  }
		else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }

    
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
		
    }
}
function GameOver(){
	ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
	ctx.fillstyle="red";
	ctx.font='60ps Comic Sans MS, bold';
	ctx.filltext('Game Over',220,210);
	}


function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
			localStorage.setItem('scr', document.getElementById('bestscore').innerHTML );
			
			myMusic.stop();
			myMusic2.stop();
			mySound.play(loop="false");
			GameOver();
			mySound.stop();
			
			
			myGameArea.stop();
			
            return;
        }
    }
    myGameArea.clear();
	myGameArea.frameNo += 1;
	myBackground.newPos(); 
    myBackground.update();
	myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
    
    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
    if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
    myGamePiece.newPos();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(300)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 70;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(15, height, "grey", x, 0));
        myObstacles.push(new component(15, x - height - gap, "grey", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
	myGamePiece.update();
    myScore = myGameArea.frameNo;
	document.getElementById("scoreboard").innerHTML = myScore;
	if(myScore>bestScr){
		document.getElementById('bestscore').innerHTML=myScore;
	}
    myScore.update();
    myGamePiece.update();
	
}
function sound(src) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    this.play = function(){
        this.sound.play();
    }
    this.stop = function(){
        this.sound.pause();
    }
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

</script>
</body>
</html>
