갑자기 마려워서 한번 만들어 봤슴니다.
한글 영어 다 되는데 n글자 이상 적어야함 이런 기능 안넣음
나중에 만들게염
아 그리고 이상한 단어 넣어도 안걸러짐 ㅅㄱ
들어가기 귀찮은 사람을 위한 소스코드는
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/css/default.css" />
<title>끝말잇기 게임</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">메인</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/function/countspace.html"
>공백 글자수 세기 <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/function/randomNum.html"
>랜덤 숫자 뽑기</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="function/connectLastword.html"
>끝말잇기</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/">또 뭐를 만들어볼까</a>
</li>
</ul>
</div>
</nav>
<div class="center">
<div id="LastWord">
<input id="name" onkeypress="enterkey()" />
<div id="word">제시어 : <span id="result">◼︎</span></div>
<button class="btn btn-primary" id="sumbitBtn">등록</button>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"
></script>
</body>
</html>
<script>
$name = document.getElementById("name");
$result = document.getElementById("result");
$btn = document.getElementById("sumbitBtn");
var word = null;
var nWord;
function enterkey() {
if (window.event.keyCode === 13) {
// 엔터키가 눌렸을 때
if (!word) {
console.log("if");
var name = $name.value; // input에 들어온 값을 name 으로 묶고
$result.innerText = name; // span에 그 값을 넣음
word = name; // 그리고 비어있는 word에 name 넣고
$name.value = null; // 그리고 input을 비워주면 끗
} else {
console.log("else");
var name = $name.value; // input에 들어온 값을 name 으로 묶고
if (name[0] === word[word.length - 1]) {
// 일단 새로 들어온 name(input의 값)의 첫번째와 원래 있던 word의 마지막 값을 비교함
nWord = word; // 그리고 서로 이어지는 단어라면 비어있는 nWord에 word 넣고
if (word[0] === nWord[nWord.length - 1]) console.log("확인");
$result.innerText = name; // span에 그 값을 넣음
word = name; // 워드는 새로 인풋 들어온걸로 바꿔줌
} else {
alert("틀렸습니당");
}
}
$name.value = null; // 그리고 input을 비워주면 끗
}
}
onClickSumbit = () => {
if (!word) {
console.log("if");
var name = $name.value; // input에 들어온 값을 name 으로 묶고
$result.innerText = name; // span에 그 값을 넣음
word = name; // 그리고 비어있는 word에 name 넣고
$name.value = null; // 그리고 input을 비워주면 끗
} else {
console.log("else");
var name = $name.value; // input에 들어온 값을 name 으로 묶고
if (name[0] === word[word.length - 1]) {
// 일단 새로 들어온 name(input의 값)의 첫번째와 원래 있던 word의 마지막 값을 비교함
nWord = word; // 그리고 서로 이어지는 단어라면 비어있는 nWord에 word 넣고
if (word[0] === nWord[nWord.length - 1]) console.log("확인");
$result.innerText = name; // span에 그 값을 넣음
word = name; // 워드는 새로 인풋 들어온걸로 바꿔줌
} else {
alert("틀렸습니당");
}
}
$name.value = null; // 그리고 input을 비워주면 끗
};
$name.value = null; // 그리고 input을 비워주면 끗
$btn.addEventListener("click", onClickSumbit);
</script>CSS
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
}
* {
font-family: "Pretendard-Regular";
}
.center {
text-align: center;
}
#LastWord input {
margin-top: 50px;
font-size: 60px;
width: 80%;
height: 120px;
}
#LastWord button {
margin-top: 30px;
width: 200px;
height: 120px;
font-size: 50px;
}
#LastWord #word {
margin-top: 30px;
font-size: 40px;
}
남들 개발 공부할 때 일기 쓰는 사람