ddit/JavaScript&JQuery

Python 테트리스만들기 - 2 / 자바스크립트 class만들기

ssong2ku 2022. 9. 14. 19:01
728x90

class연습

<html>
<head>
<title>class</title>

<script type="text/javascript">
class Animal {
	constructor() {
		this.flagMove = true;
	}

	die() {
		this.flagMove = false;
	}
}
var ani = new Animal();
console.log(ani.flagMove);
ani.die();
console.log(ani.flagMove);


</script>

</head>
<body>


</body>
</html>

 

테트리스 각각의 블럭 만들고 위쪽방향키로 회전해보기

type = 블럭모양

status = 회전하는 블럭모양

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


</style>

<script type="text/javascript">

class Block {
	constructor() {
		this.type = 7;
		this.status = 1;
		this.i = 2;
		this.j = 2;
		
	}
}

var b = new Block();
var td2D = [];

function myinit(){
	var tds  = document.querySelectorAll("td");
	for(var i=0;i<25;i++){
		var line = [];
		for(var j=0;j<10;j++){
			line.push(tds[i*10+j]);
		}
		td2D.push(line);
	}
	
	myrender();
}
function changeStatus(){
	if(b.type == 2 || b.type == 3 ||b.type == 4){
		if(b.status == 1){
			b.status = 2;
		}else if(b.status == 2){
			b.status = 1;
		}
	}
	if(b.type == 5 || b.type == 6 ||b.type == 7){
		if(b.status == 1){
			b.status = 2;
		}else if(b.status == 2){
			b.status = 3;
		}else if(b.status == 3){
			b.status = 4;
		}else if(b.status == 4){
			b.status = 1;
		}
	}
	

	
}

function myrender(){
	for(var i=0;i<25;i++){
		for(var j=0;j<10;j++){
			td2D[i][j].style.backgroundColor = "white";
		}
	}
	if(b.type == 1){
		td2D[b.i	][b.j	].style.backgroundColor = "red";
		td2D[b.i	][b.j+1	].style.backgroundColor = "red";
		td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		td2D[b.i+1	][b.j+1	].style.backgroundColor = "red";		
	}
	if(b.type == 2){
		if(b.status == 1){
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i	][b.j+2	].style.backgroundColor = "red";
		}
		if(b.status == 2){
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
			td2D[b.i+2	][b.j	].style.backgroundColor = "red";
		}
	
	}
	if(b.type == 3){
		if(b.status == 1){
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j+1	].style.backgroundColor = "red";
		}
		if(b.status == 2){
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		}
	
	}
	if(b.type == 4){
		if(b.status == 1){
			td2D[b.i-1	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		}
		if(b.status == 2){
			td2D[b.i-1	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
		}
	
	}
	if(b.type == 5){
		if(b.status == 1){
			td2D[b.i-1	][b.j].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j+1	].style.backgroundColor = "red";
		}
		if(b.status == 2){
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j-1	].style.backgroundColor = "red";
		}
		if(b.status == 3){
			td2D[b.i-1	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		}
		if(b.status == 4){
			td2D[b.i-1	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
		}
	
	}	
	if(b.type == 6){
		if(b.status == 1){
			td2D[b.i-1	][b.j].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j-1	].style.backgroundColor = "red";
		}
		if(b.status == 2){
			td2D[b.i-1	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
		}
		if(b.status == 3){
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i-1	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		}
		if(b.status == 4){
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j+1	].style.backgroundColor = "red";
		}
	
	}	
	
	if(b.type == 7){
		if(b.status == 1){
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
		}
		if(b.status == 2){
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
		}		
		if(b.status == 3){
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i	][b.j+1	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		}
		if(b.status == 4){
			td2D[b.i	][b.j-1	].style.backgroundColor = "red";
			td2D[b.i	][b.j	].style.backgroundColor = "red";
			td2D[b.i-1	][b.j	].style.backgroundColor = "red";
			td2D[b.i+1	][b.j	].style.backgroundColor = "red";
		}

	
	}		

}
window.addEventListener("keydown", (e) => 
{
	if(e.code == "ArrowUp"){
		changeStatus();
	}
	if(e.code == "ArrowDown"){
		b.i++;
	}
	if(e.code == "ArrowLeft"){
		b.j--;
	}
	if(e.code == "ArrowRight"){
		b.j++;
	}
	myrender()
}
);


</script>
</head>
<body onload="myinit()">
	
<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>

 

728x90
저작자표시 비영리 변경금지

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

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

'ddit/JavaScript&JQuery'의 다른글

  • 현재글Python 테트리스만들기 - 2 / 자바스크립트 class만들기

관련글

댓글

티스토리툴바