지난번 뱅기게임 완성작에 터치 이벤트를 추가해봤다.
인터넷익스플로어를 사용하는 PC에서는 canvas게임을 할 수 없지만,
스마트폰으로 이 포스트를 본다면 게임이 가능할 것이다.
Canvas위에 떠있는 반투명레이어를 올리고, 그 레이어에 마우스 또는 터치 이벤트를 추가했다.
<!DOCTYPE html>
<html>
<head>
<title>NagarryTest</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body style="background-color: #000000;margin: 0px;">
<canvas id="canvas" width="600" height="600" style="background-color: #ccccff;">
Sorry, Your browser doesn't support HTML5 CANVAS
</canvas>
<div class="controlLayer" id="controlLayer" style="position:absolute;top:20px;left:100px;visibility:hidden;">
<table>
<tr class="controlTR" style="height:50px;">
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
ontouchstart="getMouseOver('LeftUp')" ontouchend="getMouseOut('LeftUp')" onmouseover="getMouseOver('LeftUp')" onmouseout="getMouseOut('LeftUp')">↖</td>
<td class="controlTD" ontouchstart="getMouseOver('Up')" ontouchend="getMouseOut('Up')" onmouseover="getMouseOver('Up')" onmouseout="getMouseOut('Up')">↑</td>
<td class="controlTD" ontouchstart="getMouseOver('RightUp')" ontouchend="getMouseOut('RightUp')" onmouseover="getMouseOver('RightUp')" onmouseout="getMouseOut('RightUp')">↗</td>
</tr>
<tr class="controlTR" style="height:50px;">
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
ontouchstart="getMouseOver('Left')" ontouchend="getMouseOut('Left')" onmouseover="getMouseOver('Left')" onmouseout="getMouseOut('Left')">←</td>
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
onmousedown="getMouseDown('Ent')">Ent</td>
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
ontouchstart="getMouseOver('Right')" ontouchend="getMouseOut('Right')" onmouseover="getMouseOver('Right')" onmouseout="getMouseOut('Right')">→</td>
</tr>
<tr class="controlTR" style="height:50px;">
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
ontouchstart="getMouseOver('LeftDown')" ontouchend="getMouseOut('LeftDown')" onmouseover="getMouseOver('LeftDown')" onmouseout="getMouseOut('LeftDown')">↙</td>
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
ontouchstart="getMouseOver('Down')" ontouchend="getMouseOut('Down')" onmouseover="getMouseOver('Down')" onmouseout="getMouseOut('Down')">↓</td>
<td class="controlTD" style="background-color:rgba(255, 255, 255, 0.2);width:50px;text-align:center;"
ontouchstart="getMouseOver('RightDown')" ontouchend="getMouseOut('RightDown')" onmouseover="getMouseOver('RightDown')" onmouseout="getMouseOut('RightDown')">↘</td>
</tr>
</table>
</div>
<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 timeCheckLevel1 = 0;
var timeCheckLevel2 = 0;
var playerUnit = {}; //Player Unit Property
var enemyBalls;
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();
var controlPanel = document.getElementById("controlLayer");
controlPanel.style.visibility = "visible";
controlPanel.style.top
= canvas.style.left + "420px";
controlPanel.style.left
= canvas.style.left + "420px";
//Start Message
canvasCtx.fillStyle = "#ffffff";
canvasCtx.strokeStyle = "#ff0000";
canvasCtx.font = "bold 30px _sans";
canvasCtx.textBaseline = "middle";
canvasCtx.textAlign = "center";
canvasCtx.fillText("Enter to Start", canvas.width/2, canvas.height/2);
canvasCtx.strokeText("Enter to Start", canvas.width/2, canvas.height/2);
canvasCtx.font = "bold 14px _sans";
canvasCtx.fillText("Control : Arrow Key or W/A/S/D",
canvas.width/2, canvas.height/2+20);
}
function startGameLoop()
{
playerUnit = {x:canvas.width/2 - 18, y:canvas.height/2 - 18,
width: 36, height: 36, speed:4}; //UserUnit Property
timeCheckLevel1 = 0;
timeCheckLevel2 = 0;
enemyBalls = new Array();
createEnemyBalls(35);
startTime = new Date();
gameLoopThread = setInterval(gameLoop, threadSpeed);
LoopStatred = true;
}
function createEnemyBalls(iCount)
{
for(var i=0; i<iCount; i++)
{
var startX = Math.floor(Math.random() * (canvas.width - 1)) + 1;
var startY = Math.floor(Math.random() * (canvas.height - 1)) + 1;
var startPos = Math.floor(Math.random() * 4);
if(startPos == 1)
startX = 0;
else if(startPos == 2)
startY = 0;
else if(startPos == 3)
startX = canvas.width;
else
startY = canvas.height;
var startAngle = Math.floor(Math.random() * 360);
var startSpeed = Math.floor(Math.random() * (2)) + 2;
var startColor;
if(startSpeed == 2)
startColor = "#000000";
else
startColor = "#aa0000";
var enemy = {x:startX, y:startY, color:startColor,
radius:4, speed:startSpeed, angle:startAngle,radians:Math.PI/180};
enemyBalls.push(enemy);
}
}
function stopGameLoop()
{
clearInterval(gameLoopThread);
LoopStatred = false;
}
function setImage()
{
spaceShipSprit = new Image();
spaceShipSprit.src = "https://t1.daumcdn.net/cfile/tistory/2564F54054D0952830";
}
function getMouseOver(key)
{
if(key == "RightUp") keyValue = "3938";
else if(key == "LeftUp") keyValue = "3738";
else if(key == "RightDown") keyValue = "3940";
else if(key == "LeftDown") keyValue = "3740";
else if(key == "Up") keyValue = "38";
else if(key == "Left") keyValue = "37";
else if(key == "Right") keyValue = "39";
else if(key == "Down") keyValue = "40";
keyPressOn[keyValue] = true;
}
function getMouseOut(key)
{
if(key == "RightUp") keyValue = "3938";
else if(key == "LeftUp") keyValue = "3738";
else if(key == "RightDown") keyValue = "3940";
else if(key == "LeftDown") keyValue = "3740";
else if(key == "Up") keyValue = "38";
else if(key == "Left") keyValue = "37";
else if(key == "Right") keyValue = "39";
else if(key == "Down") keyValue = "40";
keyPressOn[keyValue] = false;
}
function getMouseDown(key)
{
if(key == "Ent" && !LoopStatred) //enter
{
startGameLoop();
}
}
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();
checkHitPlayer();
displayAll();
}
function calcKeyInnput()
{
if((keyPressOn["3738"] || keyPressOn["3938"] || keyPressOn["38"]) && playerUnit.y >= -playerUnit.height/4)
playerUnit.y -= playerUnit.speed; //up
if((keyPressOn["3740"] || keyPressOn["3940"] || keyPressOn["40"]) && playerUnit.y <= canvas.height -playerUnit.height*0.75)
playerUnit.y += playerUnit.speed; //down
if((keyPressOn["3738"] || keyPressOn["3740"] || keyPressOn["37"]) && playerUnit.x >= -playerUnit.width/4)
playerUnit.x -= playerUnit.speed; //left
if((keyPressOn["3938"] || keyPressOn["3940"] || keyPressOn["39"]) && playerUnit.x <= canvas.width -playerUnit.width*0.75)
playerUnit.x += playerUnit.speed; //right
}
function calcEnemy()
{
if(timeCheckLevel1 > 600)
{
createEnemyBalls(2);
timeCheckLevel1 = 0;
}
timeCheckLevel1++;
for(var i=0;i<enemyBalls.length;i++)
{
enemyBalls[i].radians = enemyBalls[i].angle * Math.PI/180;
enemyBalls[i].x += Math.cos(enemyBalls[i].radians) * enemyBalls[i].speed;
enemyBalls[i].y += Math.sin(enemyBalls[i].radians) * enemyBalls[i].speed;
if(enemyBalls[i].x > canvas.width || enemyBalls[i].x < 0)
enemyBalls[i].angle = 180 - enemyBalls[i].angle;
else if(enemyBalls[i].y > canvas.height || enemyBalls[i].y < 0)
enemyBalls[i].angle = 360 - enemyBalls[i].angle;
}
}
function displayAll()
{
bufferCtx.fillStyle = "#ccf";
bufferCtx.fillRect(0, 0, canvas.width, canvas.height);
displayPlayer();
displayEnemy();
displayEnemyCount();
canvasCtx.drawImage(canvasBuffer, 0, 0);
if(!LoopStatred)
showRecord();
}
function showRecord()
{
canvasCtx.fillStyle = "rgba(0, 0, 0, 0.2)";
canvasCtx.fillRect(canvas.width/2 - 109, canvas.height/2 - 17, 218, 34);
canvasCtx.fillStyle = "#ffffff";
canvasCtx.strokeStyle = "#ff0000";
canvasCtx.font = "bold 30px _sans";
canvasCtx.textBaseline = "middle";
canvasCtx.textAlign = "center";
canvasCtx.fillText("Enter to Restart", canvas.width/2, canvas.height/2);
canvasCtx.strokeText("Enter to Restart", canvas.width/2, canvas.height/2);
canvasCtx.fillStyle = "rgba(255, 255, 255, 0.4)";
canvasCtx.fillRect(canvas.width/2 - 109, canvas.height/2 +20, 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.textAlign = "center";
canvasCtx.fillText("Your Record : " + elapseSeconds + " Seconds",
canvas.width/2, canvas.height/2 +20);
}
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()
{
for(var i=0;i<enemyBalls.length;i++)
{
bufferCtx.fillStyle = enemyBalls[i].color;
bufferCtx.beginPath();
bufferCtx.arc(enemyBalls[i].x, enemyBalls[i].y, enemyBalls[i].radius, 0, Math.PI*2, true);
bufferCtx.closePath();
bufferCtx.fill();
}
}
function displayEnemyCount()
{
bufferCtx.fillStyle = "#000000";
bufferCtx.fillRect(0, canvas.height-15, 40, 15);
bufferCtx.fillStyle = "#eeeeee";
bufferCtx.font = "12px _sans";
bufferCtx.textBaseline = "middle";
bufferCtx.textAlign = "center";
bufferCtx.fillText(enemyBalls.length, 20, canvas.height-6);
}
//check Player is hited or not
function checkHitPlayer()
{
var rtnVal = false;
for(var i=0;i<enemyBalls.length;i++)
{
var distanceX = (playerUnit.x + playerUnit.width/2) - enemyBalls[i].x;
var distanceY = (playerUnit.y + playerUnit.height/2) - enemyBalls[i].y;
var distance = distanceX*distanceX + distanceY*distanceY;
if(distance <= (enemyBalls[i].radius + (playerUnit.width/2 -5))
* (enemyBalls[i].radius + (playerUnit.height/2 -5)))
{
rtnVal = true;
break;
}
}
return rtnVal;
}
</script>
</body>
</html>
| ↖ | ↑ | ↗ |
| ← | Ent | → |
| ↙ | ↓ | ↘ |
'끄적끄적 > HTML5' 카테고리의 다른 글
| HTML5 Canvas WebGL 기초 of 기초 (0) | 2015.03.09 |
|---|---|
| HTML5 Canvas WebGL 시작하기 (0) | 2015.03.07 |
| HTML5 디버깅하기 - 크롬이용 (0) | 2015.02.08 |
| [HTML5]뱅기게임 - Canvas 충돌검사하기 (0) | 2015.02.05 |
| [HTML5]뱅기게임 - Canvas에서 키입력으로 그림 움직이기 (1) | 2015.02.03 |