ddit/JavaScript&JQuery

테트리스만들기 - 1 / 방향키 이벤트주기

ssong2ku 2022. 9. 13. 20:00
728x90

블럭

1. type = 1~7

2.  status =1~2, 1~4

 

블럭위치 지정하여 색바꾸기

<html>
<head>
<title>테트리스</title>
<style type="text/css">
	td{
		width: 20px;
		height: 20px;
	}

</style>
<script type="text/javascript">
var i =4;
var j =3;

function myrender(){
	var tds = document.querySelectorAll("td");
	tds[i*10+j].style.backgroundColor="red";
	
}


</script>
</head>
<body onload="myrender()">
	
<table border="1px">
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	
	

</table>


</body>
</html>

 

방향키 콘솔에 출력해보기

<html>
<head>
<title>방향키이벤트</title>
<script type="text/javascript">
window.addEventListener("load",function(){
	//window.addEventListener("keydown", (e) => {
	document.body.addEventListener("keydown",function(){
		var x;
		switch(event.keyCode){
		case 37:
			x="왼쪽방향키";
			break;
		case 38:
			x="위쪽방향키";
			break;
		case 39:
			x="오른쪽방향키";
			break;
		case 40:
			x="아래쪽방향키";
			break;
		
		}
		console.log("입력버튼 :",x);
	})
}) 



</script>

</head>
<body>


</body>
</html>

 

방향키 움직이는대로 배경색바꾸기

<html>
<head>
<title>방향키이벤트2</title>
<style type="text/css">
	td{
		width: 20px;
		height: 20px;
	}

</style>
<script type="text/javascript">
//i가 수직,
var i =4;
//j는 수평
var j =3; 


function myrender(){
	tds = document.querySelectorAll("td");
	cnt =i*10+j;
	tds[cnt].style.backgroundColor="red";
	
	
}

window.addEventListener("load",function(){
	//window.addEventListener("keydown", (e) => {
	document.body.addEventListener("keydown",function(){
		tds[cnt].style.backgroundColor="transparent";
		switch(event.keyCode){
		case 37:
			//좌
			j=j-1;
			break;
		case 38:
			//상
			i=i-1;
			break;
		case 39:
			//우
			j=j+1;
			break;
		case 40:
			//하
			i=i+1;
			break;
		}
		myrender();
		
	})
}) 


</script>

</head>
<body onload="myrender()">
	
<table border="1">
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td><td></td><td></td><td></td>
		<td></td><td></td><td></td><td></td><td></td>
	</tr>
	
	

</table>


</body>
</html>

선생님코드

<html>
<head>
<title>테트리스</title>
<style type="text/css">
	td{
		width: 20px;
		height: 20px;
	}


</style>

<script type="text/javascript">
var i = 2;
var j = 1;

function myrender(){
	var tds  = document.querySelectorAll("td");
	for(var ii=0;ii<tds.length;ii++){
		tds[ii].style.backgroundColor = "white";
	}
	tds[i*10+j].style.backgroundColor = "red";
}
window.addEventListener("keydown", (e) => 
{
	if(e.code == "ArrowUp"){
		i--;
	}
	if(e.code == "ArrowDown"){
		i++;
	}
	if(e.code == "ArrowLeft"){
		j--;
	}
	if(e.code == "ArrowRight"){
		j++;
	}
	myrender()
}
);
728x90
저작자표시 비영리 변경금지 (새창열림)

'ddit > JavaScript&JQuery' 카테고리의 다른 글

테트리스 - 4 / 자동으로 내려오기/setTimeout(), setInterval()  (0) 2022.09.19
0915 테트리스 - 3  (0) 2022.09.15
Python 테트리스만들기 - 2 / 자바스크립트 class만들기  (0) 2022.09.14
웹표준과 웹접근성, JQuery, AJAX  (0) 2022.09.12
자바스크립트에서 제이쿼리로 변환해보기  (1) 2022.09.08

'ddit/JavaScript&JQuery'의 다른글

  • 현재글테트리스만들기 - 1 / 방향키 이벤트주기

관련글

댓글

티스토리툴바