캔버스 Rain

by hohoya33

HTML

<canvas id="canvas">	Your browser does not support the canvas element.</canvas>
<audio id="soundeffect" preload="auto">
    <source src="http://gm0712.dothome.co.kr/rain/sound/thunder.mp3" type=audio/mpeg />
    <source src="http://gm0712.dothome.co.kr/rain/sound/thunder.WAV" type=audio/wav />	
    Your browser does not support the audio element.
</audio>

CSS

html, body {
	padding: 0px;
	margin: 0px;
	width:100%;
	height:100%;
	background-size:100% 100%;
	overflow-x:hidden;
	overflow-y:hidden;
}

document, body {
				margin:0;
				padding:0;
				background:#FFFFFF;
			}

JavaScript

window.addEventListener("load", init, false);
window.addEventListener("resize", onResize, false);

var m_oCanvas = null;
var m_oContext = null;
var m_oMouse = {x:0, y:0}; // 마우스 위치
var m_nCanvasWidth = 0; // 캔버스 넓이
var m_nCanvasHeight = 0; //캔버스 높이
var m_nRain = 0; // 비 내리는 수
var m_nSkyAlpha = 0; // 배경 투명도
var m_nSetTime = 0; // 번개 시간
var m_arrRain = []; // 비 배열

function init() {
	m_oCanvas = document.getElementById("canvas");

	if(!checkCanvas()) {
		return;
	}

	if(checkMobile()) {
		document.addEventListener("touchstart", lightning);
	} else {
		document.onmousedown = lightning;
	}	
	
	checkStage();
	setStage();
}

// 캔버스 지원 여부 확인
function checkCanvas()
{	
	if(m_oCanvas.getContext==null) {
		return false;
	} else {
		return true;
	}
}

// 화면 사이즈 확인
function checkStage() {
	var domElement = document.documentElement;
	var body = document.body;

	if(domElement && (domElement.clientWidth)) {
		m_nCanvasWidth = domElement.clientWidth;
		m_nCanvasHeight = domElement.clientHeight;
    } else if(body && (body.offsetWidth)) {
		m_nCanvasWidth = body.offsetWidth;
		m_nCanvasHeight = body.clientHeight;
    }

	m_oCanvas.width = m_nCanvasWidth;
	m_oCanvas.height = m_nCanvasHeight;

	// 비 내리는 양
	m_nRain = parseInt(m_nCanvasWidth / 5);

	for(var i = 0 ; i < m_nRain ; i ++) {
		setRain(i);
	}

	//setTimeout(function () { window.scrollTo(0, 1); }, 1);
}

// 스테이지 세팅
function setStage() {
	m_oContext = m_oCanvas.getContext("2d");
	m_oContext.globalAlpha = 0;

	setInterval(moveRain, 25); // 비 계속 내림
	lightning();	
}

// 빗방울 세팅
function setRain(nIndex)
{
	m_arrRain[nIndex] = [];
	var oRain = m_arrRain[nIndex];	
	oRain.nMoveX = Math.random() * m_nCanvasWidth;
	oRain.nMoveY = Math.random() * m_nCanvasHeight - m_nCanvasHeight - 100;	
	oRain.nLineX = oRain.nMoveX + Math.random() * 40 - 20;
	oRain.nLineY = oRain.nMoveY + Math.random() * 200 + 150;
	oRain.nSize = Math.random() * 1 + 1;
	oRain.nSpeed = (oRain.nLineY - oRain.nMoveY) / 4;
	oRain.nAngleX = (oRain.nLineX - oRain.nMoveX) /...