<!DOCTYPE html>
<html>
<head>
<title>NagarryTest</title>
<style>
body {
background-color: #000000;
margin: 0px;
}
canvas{
background-color: #ccccff;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600">
Sorry, Your browser doesn't support HTML5 CANVAS
</canvas>
</body>
<script>
var canvas;
var canvasCtx;
var canvasBuffer;
var bufferCtx;
var threadSpeed = 16; //Gap of Thread
var gameLoopThread; //animation Thread ID
var keyPressOn = {};//pressed - true
var spaceShipSprit;
var playerUnit = {}; //Player Unit Property
var enemyBall = {};
var LoopStatred = false;
var startTime;
window.addEventListener("load", init, false);
function init()
{
canvas = document.getElementById("canvas");
canvasCtx = canvas.getContext("2d");
canvasBuffer= document.createElement("canvas");
canvasBuffer.width = canvas.width;
canvasBuffer.height = canvas.height;
bufferCtx = canvasBuffer.getContext("2d");
document.addEventListener("keydown", getKeyDown, false);
document.addEventListener("keyup", getKeyUp, false);
setImage();
//Start Message
canvasCtx.fillStyle = "#ffffff";
canvasCtx.strokeStyle = "#ff0000";
canvasCtx.font = "bold 30px _sans";
canvasCtx.textBaseline = "top";
canvasCtx.fillText("Enter to Start", 210, 250);
canvasCtx.strokeText("Enter to Start", 210, 250);
}
function startGameLoop()
{
playerUnit = {
x:canvas.width/2 - 18, y:canvas.height/2 - 18,
width: 36, height: 36, speed:4}; //UserUnit Property
enemyBall = {speed:3, x:1, y:250, radius:4, speed:2, direct:0};
startTime = new Date();
gameLoopThread = setInterval(gameLoop, threadSpeed);
LoopStatred = true;
}
function stopGameLoop()
{
clearInterval(gameLoopThread);
LoopStatred = false;
}
function setImage()
{
spaceShipSprit = new Image();
spaceShipSprit.src = "https://t1.daumcdn.net/cfile/tistory/2564F54054D0952830";
}
function getKeyDown(event)
{
var keyValue;
if(event == null)
{
keyValue=window.event.keyCode;
window.event.preventDefault();
}
else
{
keyValue=event.keyCode;
event.preventDefault();
}
if(keyValue == "87") keyValue = "38"; //up
else if(keyValue == "83") keyValue = "40"; //down
else if(keyValue == "65") keyValue = "37"; //left
else if(keyValue == "68") keyValue = "39"; //right
keyPressOn[keyValue] = true;
}
function getKeyUp(event)
{
var keyValue;
if(event == null)
{
keyValue=window.event.keyCode;
window.event.preventDefault();
}
else
{
keyValue=event.keyCode;
event.preventDefault();
}
if(keyValue == "87") keyValue = "38"; //up
else if(keyValue == "83") keyValue = "40"; //down
else if(keyValue == "65") keyValue = "37"; //left
else if(keyValue == "68") keyValue = "39"; //right
keyPressOn[keyValue] = false;
if(keyValue == "13" && !LoopStatred) //enter
{
startGameLoop();
}
}
function gameLoop()
{
calcKeyInnput();
calcEnemy();
displayAll();
}
function calcKeyInnput()
{
if(keyPressOn["38"] && playerUnit.y >= -playerUnit.height/2)
playerUnit.y -= playerUnit.speed; //up
if(keyPressOn["40"] && playerUnit.y <= canvas.height -playerUnit.height/2)
playerUnit.y += playerUnit.speed; //down
if(keyPressOn["37"] && playerUnit.x >= -playerUnit.width/2)
playerUnit.x -= playerUnit.speed; //left
if(keyPressOn["39"] && playerUnit.x <= canvas.width -playerUnit.width/2)
playerUnit.x += playerUnit.speed; //right
}
function calcEnemy()
{
if(enemyBall.x >= canvas.width)
enemyBall.direct = 1;
else if(enemyBall.x <= 0)
enemyBall.direct = 0;
if(enemyBall.direct == 0)
enemyBall.x += enemyBall.speed;
else
enemyBall.x -= enemyBall.speed;
}
function displayAll()
{
bufferCtx.fillStyle = "#ccf";
bufferCtx.fillRect(0, 0, canvas.width, canvas.height);
displayPlayer();
displayEnemy();
checkHitPlayer();
canvasCtx.drawImage(canvasBuffer, 0, 0);
if(!LoopStatred)
{
canvasCtx.fillStyle = "rgba(0, 0, 0, 0.2)";
canvasCtx.fillRect(210, 250, 218, 34);
canvasCtx.fillStyle = "#ffffff";
canvasCtx.strokeStyle = "#ff0000";
canvasCtx.font = "bold 30px _sans";
canvasCtx.textBaseline = "top"
canvasCtx.fillText("Enter to Restart", 210, 250);
canvasCtx.strokeText("Enter to Restart", 210, 250);
canvasCtx.fillStyle = "rgba(255, 255, 255, 0.4)";
canvasCtx.fillRect(210, 285, 218, 14);
var stopTime = new Date();
var elapseSeconds = (stopTime.getTime() - startTime.getTime())/1000;
canvasCtx.fillStyle = "#000000";
canvasCtx.font = "bold 12px _sans";
canvasCtx.textBaseline = "top";
canvasCtx.fillText("Your Record : " + elapseSeconds + " Seconds", 212, 285);
}
}
function displayPlayer()
{
bufferCtx.drawImage(spaceShipSprit, //Source Image
405, 180, //X, Y Position on spaceShipSprit
playerUnit.width, playerUnit.height, //Cut Size from spaceShipSprit
playerUnit.x, playerUnit.y, //View Position
playerUnit.width, playerUnit.height //View Size
);
if(checkHitPlayer())
stopGameLoop();
}
function displayEnemy()
{
bufferCtx.fillStyle = "#aa0000";
bufferCtx.beginPath();
bufferCtx.arc(enemyBall.x, enemyBall.y, enemyBall.radius, 0, Math.PI*2, true)
bufferCtx.closePath();
bufferCtx.fill();
}
//check Player is hited or not
function checkHitPlayer()
{
var rtnVal = false;
var distanceX = (playerUnit.x + playerUnit.width/2) - enemyBall.x;
var distanceY = (playerUnit.y + playerUnit.height/2) - enemyBall.y;
var distance = distanceX*distanceX + distanceY*distanceY;
if(distance <= (enemyBall.radius + (playerUnit.width/2 -5))
* (enemyBall.radius + (playerUnit.height/2 -5)))
rtnVal = true;
return rtnVal;
}
</script>
</html>
Index.html
