고정 헤더 영역
상세 컨텐츠
본문
자바스크립트가 지금 처럼 제대로 언어로 대우받기 이전에도 사람들은 사실 대부분
자바스크립트를 무시하면서도 맘 속으로는 잘 하고 싶었고 부러워 했당.
2000년대 초반까지도 dhtml(dynamic html 동적 html)이란 말이 있었고,
자바스크립트를 쪼메 한다고 말하려면 마우스에 글자 따라 다니기를 구현할 수 있어야
했는데, snake 게임을 글자로 구현한 것이었당.
마리 기럭지가 기러지면 피곤하닝, 먼저 아래 소스를 실행해 보고 이야기 하장!
mouseStr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E7E 그리웡</title>
</head>
<body>
<script>
let backImgURL = "url('https://img1.daumcdn.net/thumb/R750x0/?";
backImgURL += "scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2";
backImgURL += "Fc8Ie13%2FbtslZnGZYMH%2FjSpkVSu45sx9WkynKetTB1%2Fimg.jpg')";
// 화면 전체영역과 같은 DIV 일부러 생성
const wrapDiv = document.createElement("div");
wrapDiv.setAttribute("id","wrapper");
wrapDiv.style.width = "100vw";
wrapDiv.style.height = "100vh";
wrapDiv.style.backgroundImage = backImgURL;
wrapDiv.style.backgroundSize="100% 100%";
wrapDiv.addEventListener("mousemove",mouseXY);
document.body.appendChild(wrapDiv);
// 전역변수 선언
let msgStr;
let x,y;
let xPos = [], yPos =[];
const xDist = 40;
const loopTime = 50;
// 기능 함수 정의
function ranColor() {
return `rgb(${Math.floor(Math.random()*256)},
${Math.floor(Math.random()*256)},
${Math.floor(Math.random()*256)})`;
}
function ranFontSize(pMin,pMax){
return `${Math.random()*(pMax-pMin)+pMin}em`;
}
const likeNames = [
"국현","지혜","수진","지완","정민",
"정수","영우","지현","성희","재균","성일",
"민욱","지영","현성","미나","대환","문기",
"기태","승우","동혁","민정","은지",
"이현","현근","다미","윤수","기현"
]
// 문자열에서 이름 있는 곳 2곳만 바꾸깅
function ranName(){
let rName = likeNames[Math.floor(Math.random()*likeNames.length)];
document.querySelector("#e7e10").innerHTML = rName[0];
document.querySelector("#e7e11").innerHTML = rName[1];
}
// 이름 바꾸는 곳 계속 불렁(3초마당)
function ranChg(){
ranName();
setTimeout(ranChg,3000);
}
// 초기화 블럭
// 문자여을 글자 1개씩 쪼개 Div로 둘러싸깅
function fInit(){
msgStr = `**** 사랑해요 로제님 ****`.split("");
for(var i=0; i< msgStr.length; i++){
xPos[i] = -100;
yPos[i] = -100;
}
let charDiv;
for(var i=0; i< msgStr.length; i++){
charDiv = document.createElement("div");
charDiv.innerHTML = msgStr[i];
charDiv.id = `e7e${i}`;
charDiv.style.display = "inline-block";
charDiv.style.position = "absolute";
charDiv.style.left = "-100px";
charDiv.style.top = "-100px";
wrapDiv.appendChild(charDiv);
}
//시작
moveMouse();
ranChg();
}
// wrapper위에서 마우스 움직일 때 마우스 좌표 가져오깅
function mouseXY(){
x= event.clientX;
y= event.clientY;
}
// 계속 주기적 반복으로 읽히는 마우스 좌표에 따라 글자 움직이기
function moveMouse(){
xPos[0] = x + xDist;
yPos[0] = y;
// 앞글자 따르깅, index값 주의(*)
for(var i=1; i< msgStr.length-1; i++){
xPos[i] = xPos[i-1]+xDist;
yPos[i] = yPos[i-1];
}
// 랜덤 글자 선택 재미 주깅
for(var i=0;i<msgStr.length; i++){
let charDiv= document.querySelector("#e7e"+i);
charDiv.style.left = `${xPos[i]}px`;
charDiv.style.top = `${yPos[i]}px`;
charDiv.style.color = ranColor();
charDiv.style.fontSize = ranFontSize(1,5);
}
//계속 반복
setTimeout(moveMouse,loopTime);
}
window.addEventListener("load",fInit);
</script>
</body>
</html>아래 그림처럼 실행 될 것이당.
단 글자들이 뱀처럼 따라다니지 않고 한줄로 고정되어 따라다닌당.!(개선하장)
사실 이 로직은 쉬운 것은 아니지만, 한번은 해 볼 필요가 있당.
타이머에 의한 비동기 개념과, 다른 함수가 사용하고 있는 자원을 또 다른 함수가
접근해서 값을 바꾸는 과장하면 공유자원에 대한 비동기 사용에 대한 개념도
얻을 수가 있을 뿐 더러, 다양한 재미난 아이디어와 퍼포먼스(성능) 향상에 대한
아이디어도 얻을 수가 있당. (물론 생각에 빠져야 한당)
뽀인토는 moveMouse() 함수 안의 index 반복문을 거꾸로 돌리는 거시당
(아래 처럼 수정하장!)
// 앞글자 따르깅, index값 주의(*)
for(var i= msgStr.length-1; i>0 ; i--){
xPos[i] = xPos[i-1]+xDist;
yPos[i] = yPos[i-1];
}
또 안돼요! 하는 사람이 있을 수 있어서, 수정된 코드 전부를 아래 붙인당!
다시 실행해 보면 글자들이 뱀처럼 따라 다니는 것을 볼 수 있당!
(이런 소스는 결과보다 과정에서 많은 걸 얻을 수 있음을 잊지 말고, 꼭 흐름파악하장)
mouseFollowStr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E7E 그리웡</title>
</head>
<body>
<script>
let backImgURL = "url('https://img1.daumcdn.net/thumb/R750x0/?";
backImgURL += "scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2";
backImgURL += "Fc8Ie13%2FbtslZnGZYMH%2FjSpkVSu45sx9WkynKetTB1%2Fimg.jpg')";
// 화면 전체영역과 같은 DIV 일부러 생성
const wrapDiv = document.createElement("div");
wrapDiv.setAttribute("id","wrapper");
wrapDiv.style.width = "100vw";
wrapDiv.style.height = "100vh";
wrapDiv.style.backgroundImage = backImgURL;
wrapDiv.style.backgroundSize="100% 100%";
wrapDiv.addEventListener("mousemove",mouseXY);
document.body.appendChild(wrapDiv);
// 전역변수 선언
let msgStr;
let x,y;
let xPos = [], yPos =[];
const xDist = 40;
const loopTime = 50;
// 기능 함수 정의
function ranColor() {
return `rgb(${Math.floor(Math.random()*256)},
${Math.floor(Math.random()*256)},
${Math.floor(Math.random()*256)})`;
}
function ranFontSize(pMin,pMax){
return `${Math.random()*(pMax-pMin)+pMin}em`;
}
const likeNames = [
"국현","지혜","수진","지완","정민",
"정수","영우","지현","성희","재균","성일",
"민욱","지영","현성","미나","대환","문기",
"기태","승우","동혁","민정","은지",
"이현","현근","다미","윤수","기현"
]
// 문자열에서 이름 있는 곳 2곳만 바꾸깅
function ranName(){
let rName = likeNames[Math.floor(Math.random()*likeNames.length)];
document.querySelector("#e7e10").innerHTML = rName[0];
document.querySelector("#e7e11").innerHTML = rName[1];
}
// 이름 바꾸는 곳 계속 불렁(3초마당)
function ranChg(){
ranName();
setTimeout(ranChg,3000);
}
// 초기화 블럭
// 문자여을 글자 1개씩 쪼개 Div로 둘러싸깅
function fInit(){
msgStr = `**** 사랑해요 로제님 ****`.split("");
for(var i=0; i< msgStr.length; i++){
xPos[i] = -100;
yPos[i] = -100;
}
let charDiv;
for(var i=0; i< msgStr.length; i++){
charDiv = document.createElement("div");
charDiv.innerHTML = msgStr[i];
charDiv.id = `e7e${i}`;
charDiv.style.display = "inline-block";
charDiv.style.position = "absolute";
charDiv.style.left = "-100px";
charDiv.style.top = "-100px";
wrapDiv.appendChild(charDiv);
}
//시작
moveMouse();
ranChg();
}
// wrapper위에서 마우스 움직일 때 마우스 좌표 가져오깅
function mouseXY(){
x= event.clientX;
y= event.clientY;
}
// 계속 주기적 반복으로 읽히는 마우스 좌표에 따라 글자 움직이기
function moveMouse(){
xPos[0] = x + xDist;
yPos[0] = y;
// 앞글자 따르깅, index값 주의(*)
for(var i= msgStr.length-1; i>0 ; i--){
xPos[i] = xPos[i-1]+xDist;
yPos[i] = yPos[i-1];
}
// 랜덤 글자 선택 재미 주깅
for(var i=0;i<msgStr.length; i++){
let charDiv= document.querySelector("#e7e"+i);
charDiv.style.left = `${xPos[i]}px`;
charDiv.style.top = `${yPos[i]}px`;
charDiv.style.color = ranColor();
charDiv.style.fontSize = ranFontSize(1,5);
}
//계속 반복
setTimeout(moveMouse,loopTime);
}
window.addEventListener("load",fInit);
</script>
</body>
</html>잘 되었길 바란당.
마우스를 화면 위에서 마구 휘저어 보장!(재밌당!)
본인의 아이디어를 코드로 추가하고 즐긴다면 금상첨화 일거시당.
독립된 삶을 찾기 위해서는 어쩔 수 없이 두려움과 마빡친당.
낯선 집단에 나를 넣어야 한다는 불편함도 엄씁한당.
막상 독립하면 모두 거만해 질 텐데, 지레 겁을 먹는당.
걱정할 시간에 그냥 하면 더 좋을텐데, 구찌구찌
걱정으로 소화불량과 시간낭비, 추가 소화제비용까지 지불한당
잘 하려면 잘 알아야 하고
잘 알려면 많이 해봐야 한당.
시행착오는 베스트 프렌드며
향후 추억의 빨판이며, 튼튼한 기초공사당.
그냥 당장 시작행!~~~
https://www.youtube.com/watch?v=6LDg0YGYVw4
'자바스크립트' 카테고리의 다른 글
| GUI 로또번호발생기 이번주 예상 번호는...? (0) | 2023.07.05 |
|---|---|
| 마방진 맹글엉 원리이해 (0) | 2023.07.05 |
| ag-grid 간단 사용법(사용법 쪼메 바뀜!) (6) | 2023.06.29 |
| 시베리안 허숙희의 자바스크립트 비기닝 32 (무한 스크롤) (0) | 2023.06.28 |
| 시베리안 허숙희의 자바스크립트 비기닝 31 (3D 움직임 맛보깅...) (0) | 2023.06.28 |
