1단계 : 좌표 출력하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
$(function() {
$(document).on("keydown", keyEventFnc);
// e : 이벤트 객체, 여기서는 키가 눌린 정보를 저장함
// 2차원 배열에서 좌표를 생각해보면
// x는 행, y는 열에 해당
// 밑으로 갈 수록 y 증가
// 위로 갈 수록 y 감소
function keyEventFnc(e) {
var direct = "";
switch(e.keyCode) {
case 37:
direct = "LEFT";
x--;
break;
case 38:
direct = "TOP";
y--;
break;
case 39:
direct = "RIGHT";
x++;
break;
case 40:
direct = "BOTTOM";
y++;
break;
}
if(direct) {
$("#user_id").val(direct);
}
document.getElementById("text").innerHTML = ("x:" + x + " y:" + y);
}
})
</script>
</head>
<body>
<div id="text"></div>
</body>
</html>
2단계 : 맵 및 사용자 출력하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var map_text = "";
var map = new Array();
// 10x10 2차원 배열 만들기
for (var i = 0; i <= 10; i++) {
map[i] = new Array();
}
// 맵을 초기화
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map[i][j] = "□";
}
}
$(function () {
$(document).on("keydown", keyEventFnc);
// e : 이벤트 객체, 여기서는 키가 눌린 정보를 저장함
// 2차원 배열에서 좌표를 생각해보면
// x는 행, y는 열에 해당
// 밑으로 갈 수록 y 증가
// 위로 갈 수록 y 감소
function keyEventFnc(e) {
var direct = "";
switch (e.keyCode) {
case 37:
direct = "LEFT";
map[y][x] = "□";
x--;
break;
case 38:
direct = "TOP";
map[y][x] = "□";
y--;
break;
case 39:
direct = "RIGHT";
map[y][x] = "□";
x++;
break;
case 40:
direct = "BOTTOM";
map[y][x] = "□";
y++;
break;
}
if (direct) {
$("#user_id").val(direct);
document.getElementById("location").innerHTML = ("[현재 좌표]<br>x:" + x + " y:" + y);
}
map[y][x] = "■";
// 이동한 위치에 따라 맵을 그림
draw();
}
function draw() {
map_text = "";
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map_text += map[i][j] + " ";
}
map_text += "<br>";
}
document.getElementById("map").innerHTML = map_text;
}
})
</script>
<style>
* {
margin: 0 auto;
}
#location {
width: 250px;
height: 47px;
background-color: cyan;
border-radius: 10px;
font-weight: bold;
text-align: center;
margin-top: 10px;
padding-top: 3px;
}
#map {
width: 240px;
height: 240px;
background-color: palegreen;
border-radius: 10px;
font-weight: bold;
margin-top: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="location"></div>
<div id="map"></div>
</body>
</html>
3단계 : 맵 바깥으로 나가지 못하게 막기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var map_text = "";
var map = new Array();
// 10x10 2차원 배열 만들기
for (var i = 0; i <= 10; i++) {
map[i] = new Array();
}
// 맵을 초기화
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map[i][j] = "□";
}
}
$(function () {
$(document).on("keydown", keyEventFnc);
// e : 이벤트 객체, 여기서는 키가 눌린 정보를 저장함
// 2차원 배열에서 좌표를 생각해보면
// x는 행, y는 열에 해당
// 밑으로 갈 수록 y 증가
// 위로 갈 수록 y 감소
function keyEventFnc(e) {
var direct = "";
switch (e.keyCode) {
case 37:
direct = "LEFT";
if (check_x(direct)) {
map[y][x] = "□";
x--;
}
break;
case 38:
direct = "TOP";
if (check_y(direct)) {
map[y][x] = "□";
y--;
}
break;
case 39:
direct = "RIGHT";
if (check_x(direct)) {
map[y][x] = "□";
x++;
}
break;
case 40:
direct = "BOTTOM";
if (check_y(direct)) {
map[y][x] = "□";
y++;
}
break;
}
if (direct) {
$("#user_id").val(direct);
document.getElementById("location").innerHTML = ("[현재 좌표]<br>x:" + x + " y:" + y);
}
map[y][x] = "■";
// 이동한 위치에 따라 맵을 그림
draw();
}
function draw() {
map_text = "";
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map_text += map[i][j] + " ";
}
map_text += "<br>";
}
document.getElementById("map").innerHTML = map_text;
}
function check_x(direct) {
if (direct == "LEFT") {
if (x - 1 < 0) {
return false;
}
else {
return true;
}
}
else if (direct =="RIGHT") {
if (x + 1 > 10) {
return false;
}
else {
return true;
}
}
}
function check_y(direct) {
if (direct == "TOP") {
if (y - 1 < 0) {
return false;
}
else {
return true;
}
}
else if (direct =="BOTTOM") {
if (y + 1 > 10) {
return false;
}
else {
return true;
}
}
}
})
</script>
<style>
* {
margin: 0 auto;
}
#location {
width: 250px;
height: 47px;
background-color: cyan;
border-radius: 10px;
font-weight: bold;
text-align: center;
margin-top: 10px;
padding-top: 3px;
}
#map {
width: 240px;
height: 240px;
background-color: palegreen;
border-radius: 10px;
font-weight: bold;
margin-top: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="location"></div>
<div id="map"></div>
</body>
</html>
4단계 : 벽 만들기 및 충돌 판정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var map_text = "";
var map = new Array();
var is_duplicate = false;
// 10x10 2차원 배열 만들기
for (var i = 0; i <= 10; i++) {
map[i] = new Array();
}
// 맵을 초기화
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map[i][j] = "□";
}
}
map[10][10] = "★";
// 벽 만들기
for (var i = 0; i < 20; i++) {
var location_x = Math.floor(Math.random() * 9) + 0;
var location_y = Math.floor(Math.random() * 9) + 0;
map[location_y][location_x] = "벽";
}
$(function () {
$(document).on("keydown", keyEventFnc);
// e : 이벤트 객체, 여기서는 키가 눌린 정보를 저장함
// 2차원 배열에서 좌표를 생각해보면
// x는 행, y는 열에 해당
// 밑으로 갈 수록 y 증가
// 위로 갈 수록 y 감소
function keyEventFnc(e) {
var direct = "";
switch (e.keyCode) {
case 37:
direct = "LEFT";
if (check_x(direct)) {
map[y][x] = "□";
x--;
}
break;
case 38:
direct = "TOP";
if (check_y(direct)) {
map[y][x] = "□";
y--;
}
break;
case 39:
direct = "RIGHT";
if (check_x(direct)) {
map[y][x] = "□";
x++;
}
break;
case 40:
direct = "BOTTOM";
if (check_y(direct)) {
map[y][x] = "□";
y++;
}
break;
}
if (direct) {
$("#user_id").val(direct);
document.getElementById("location").innerHTML = ("[현재 좌표]<br>x:" + x + " y:" + y);
}
map[y][x] = "■";
// 이동한 위치에 따라 맵을 그림
draw();
}
function draw() {
map_text = "";
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map_text += map[i][j] + " ";
}
map_text += "<br>";
}
document.getElementById("map").innerHTML = map_text;
}
function check_x(direct) {
if (direct == "LEFT") {
if (x - 1 < 0) {
return false;
}
else {
if (map[y][x - 1] != "벽") {
return true;
}
}
}
else if (direct == "RIGHT") {
if (x + 1 > 10) {
return false;
}
else {
if (map[y][x + 1] != "벽") {
return true;
}
}
}
}
function check_y(direct) {
if (direct == "TOP") {
if (y - 1 < 0) {
return false;
}
else {
if (map[y - 1][x] != "벽") {
return true;
}
}
}
else if (direct == "BOTTOM") {
if (y + 1 > 10) {
return false;
}
else {
if (map[y + 1][x] != "벽") {
return true;
}
}
}
}
})
</script>
<style>
* {
margin: 0 auto;
}
#location {
width: 250px;
height: 47px;
background-color: cyan;
border-radius: 10px;
font-weight: bold;
text-align: center;
margin-top: 10px;
padding-top: 3px;
}
#map {
width: 240px;
height: 240px;
background-color: palegreen;
border-radius: 10px;
font-weight: bold;
margin-top: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="location"></div>
<div id="map"></div>
</body>
</html>
5단계 : 도착 지점 설정하고 도착 여부 판별하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var map_text = "";
var map = new Array();
var is_duplicate = false;
// 10x10 2차원 배열 만들기
for (var i = 0; i <= 10; i++) {
map[i] = new Array();
}
$(function () {
set_map();
$(document).on("keydown", keyEventFnc);
// e : 이벤트 객체, 여기서는 키가 눌린 정보를 저장함
// 2차원 배열에서 좌표를 생각해보면
// x는 행, y는 열에 해당
// 밑으로 갈 수록 y 증가
// 위로 갈 수록 y 감소
function keyEventFnc(e) {
var direct = "";
switch (e.keyCode) {
case 37:
direct = "LEFT";
if (check_x(direct)) {
map[y][x] = "□";
x--;
}
break;
case 38:
direct = "TOP";
if (check_y(direct)) {
map[y][x] = "□";
y--;
}
break;
case 39:
direct = "RIGHT";
if (check_x(direct)) {
map[y][x] = "□";
x++;
}
break;
case 40:
direct = "BOTTOM";
if (check_y(direct)) {
map[y][x] = "□";
y++;
}
break;
}
if (direct) {
$("#user_id").val(direct);
}
map[y][x] = "■";
// 이동한 위치에 따라 맵을 그림
draw();
}
function draw() {
map_text = "";
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map_text += map[i][j] + " ";
}
map_text += "<br>";
}
document.getElementById("location").innerHTML = ("[현재 좌표]<br>x:" + x + " y:" + y);
document.getElementById("map").innerHTML = map_text;
}
function check_x(direct) {
if (direct == "LEFT") {
if (x - 1 < 0) {
return false;
}
else {
if (map[y][x - 1] != "벽" && map[y][x - 1] != "★") {
return true;
}
else if (map[y][x + 1] == "★") {
clear();
}
}
}
else if (direct == "RIGHT") {
if (x + 1 > 10) {
return false;
}
else {
if (map[y][x + 1] != "벽" && map[y][x + 1] != "★") {
return true;
}
else if (map[y][x + 1] == "★") {
clear();
}
}
}
}
function check_y(direct) {
if (direct == "TOP") {
if (y - 1 < 0) {
return false;
}
else {
if (map[y - 1][x] != "벽" && map[y - 1][x] != "★") {
return true;
}
else if (map[y - 1][x] == "★") {
clear();
}
}
}
else if (direct == "BOTTOM") {
if (y + 1 > 10) {
return false;
}
else {
if (map[y + 1][x] != "벽" && map[y + 1][x] != "★") {
return true;
}
else if (map[y + 1][x] == "★") {
clear();
}
}
}
}
function set_map() {
document.getElementById("location").innerHTML = "The Maze";
document.getElementById("map").innerHTML = "Press any key to start.";
// 좌표 및 화면 표시 위치 초기화
map[y][x] = "□";
x = 0;
y = 0;
// 맵을 초기화
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= 10; j++) {
map[i][j] = "□";
}
}
map[10][10] = "★";
// 벽 만들기
for (var i = 0; i < 20; i++) {
var location_x = Math.floor(Math.random() * 9) + 0;
var location_y = Math.floor(Math.random() * 9) + 0;
map[location_y][location_x] = "벽";
}
}
function clear() {
alert("도착!");
set_map();
}
})
</script>
<style>
* {
margin: 0 auto;
}
#location {
width: 250px;
height: 47px;
background-color: cyan;
border-radius: 10px;
font-weight: bold;
text-align: center;
margin-top: 10px;
padding-top: 3px;
}
#map {
width: 240px;
height: 240px;
background-color: palegreen;
border-radius: 10px;
font-weight: bold;
margin-top: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="location"></div>
<div id="map"></div>
</body>
</html>
'Web Project' 카테고리의 다른 글
| [자바 스크립트] 그림판 (0) | 2020.08.16 |
|---|---|
| [자바 스크립트] To Do List (0) | 2020.08.14 |
| [제이쿼리] 배열과 라디오 버튼을 활용한 설문지 (0) | 2020.08.13 |
| [자바 스크립트] 가위바위보 개선 (0) | 2020.06.02 |
| [자바 스크립트] 가위바위보 (0) | 2020.05.14 |
