자동차 경주 만들기 웹버전


심심해서 만들어본


자동차 경주 웹버전


자바스크립트 제이쿼리를 이용해서 만들었다


https://jsbin.com/diqiwiroho/1/edit?output


1. html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <h1>자동차 경주</h1>
  <h4>경주할 자동차 대수를 입력 후 경주 시작을 누르시면 됩니다.</h4>
  <h4>이름적용 체크 박스 체크 후엔 자동차의 이름을 지정 할 수 있습니다.</h4>
  <h4>자동차 최대 입력 대수는 30대 입니다.</h4>
  <h4>트랙 최대 길이는 100 입니다.</h4>
  <h4>속도제한은 없습니다. 1000당 1초 입니다.</h4>
  <h4>만든 사람은 잘생긴 야매 개발자 In★ 입니다. 경주 할때마다 감사함을 느끼세요.</h4>
   <label for="nameCheck">이름적용</label><input id="nameCheck" type='checkbox' onchange="countCar();" />
  <br>
  <label for="nameCheck">트랙길이</label><input id="trackLength" type='number' onchange="countCar();" value="10"/>
  <br>
  <label for="nameCheck">속도(ms)</label><input id="raceSpeed" type='number' value="400"/>
  
  
  
  <br>
  <br>
  <label>경주할 자동차 대수</label>
  <input type="number" id="inputCarCnt" onchange="countCar();"/>
  
  <button onclick="startRace();">경주시작</button>
  <button onclick="countCar();">리셋</button>
  
  <div id="carNameContainer">
    
  
  </div>
  
  <div id="trackContainer" class="track-container">
  </div>
  
  <div id="finshBox">
  </div>
  
</body>
</html>
cs




2. css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.track-container{
  width:100%;
  display:inline-block;
  
}
.track{
  width:100%;
  float: left;
}
.car-label{
  float:left;
  display:inline-block;
  
}
.cell{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
}
.move{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
  background:black;
}
h4{
 margin:0px;
  margin-bottom:5px;
 font-size:15px;
  
}
cs



3. js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var carArr = [];
var finshNum = 0;
//var carNameArr = [];
 
function countCar(){
  carNameArr = [];
  carArr = [];
  finshNum = 0;
  var carCnt = $("#inputCarCnt").val();
  
  if(carCnt > 30){
    alert("최대 자동차 입력 개수는 30대 입니다.");
    return false;
  }
  
  
  var trackLen =  $("#trackLength").val();
  
  
  if(trackLen > 100){
    alert("최대 트랙 길이는 100 입니다.");
    return false;
  }else if(trackLen == 0 || trackLen ==""){
    alert("트랙길에 공백 혹은 0은 실행 할 수 없습니다.");
    return false;
  }
 
  
  var trackCon = $("#trackContainer");
  
  trackCon.empty();
   $("#finshBox").empty();
  $("#carNameContainer").empty();
  for(trackCnt=0; trackCnt < carCnt; trackCnt++){
    var track = $("<div class='track'></div>");
    track.append($("<div id='name"+trackCnt+"' class='car-label'>"+(trackCnt+1)+"번 차 : </div>"));
    
    for(cellCnt = 0; cellCnt < trackLen; cellCnt++){
      track.append($("<div class='cell'></div>"));
    }
    
    trackCon.append(track);
    
    if($("#nameCheck").prop("checked")){
        $("#carNameContainer").append($("<div><label>차이름 : </label><input class='car-nm-input' type='text' onkeyup='applyCarName();'/></div>"));
    }
    var carObj = {};
    carObj.num = trackCnt+1;
    carObj.name ="";
    carObj.move = 0;
    carObj.track = track;
    carObj.finshNum =0;
    carArr.push(carObj);
  }
}
 
 
function applyCarName(){
  var carNames = $(".car-nm-input");
  $.each(carArr, function(index, item) {
     item.name = carNames.eq(index).val();
    
    if(item.name != ""){
      $("#name"+index).text(item.name+" : ");
    }
    
  });
  
  
}
 
function startRace(){
  console.log("start");
  var startNmCheck = true;
  if($("#nameCheck").prop("checked")){
    $.each(carArr, function(index, item) {
      if(item.name == ""){
        startNmCheck = false;
      }
    });
   }
  
  var raceSpd =  $("#raceSpeed").val();
  
  if(raceSpd==""){
    alert("속도에 값을 입력 하여 주십시오");
    return false;
  }
  
  if(!startNmCheck){
    alert("경주할 차 이름을 모두 입력하여 주십시오.");
     return false;
  }
  
  
  
  
  moveAction();
}
 
 
function moveAction(){
  var finsh = true;
  
      $.each(carArr, function(index, item) {
      var moveVal = Math.round( Math.random()*10 );
      if(moveVal > 4){
        item.move++;
         var trackCell = item.track.find(".cell");
        trackCell.eq(0).attr("class","move");
      }
      
      
      if(item.finshNum==0){
        var trackLen =  $("#trackLength").val();
        if(item.move==trackLen){
          finshNum++;
          item.finshNum = finshNum;
          if($("#nameCheck").prop("checked")){
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.name+"</div>"));
          }else{
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.num+"번차</div>"));
          }
          
       
        }
        finsh = false;
      }
      
      
    });
  
  
  if(!finsh){
    setTimeout(function() {
       moveAction();
    }, $("#raceSpeed").val());
  }else{
   
  }
  
}
cs



이렇게 하면


트랙길이, 경주할자동차 대수, 시간 설정이 가능한 자동차 경주 만들수 있음


차이름에 메뉴이름 같은거 적어놓고 사다리 타기 대용으로도 할수 있음.

저작자표시

'Yame Daily Life' 카테고리의 다른 글

나의 부채 이야기  (0) 2019.10.25
[합죽선] 전주 미선공예사, 부채박물관 방문기  (0) 2019.10.11
[달빛조각사] 달조 개꿀팁 및 노하우 모음  (0) 2019.10.10
[리니지2 M] 리니지2 M 공식 영상 및 플레이 영상 모음  (0) 2019.09.06
[리니지2 M] 리니지2 모바일 사전 예약및 사전예약 방법  (2) 2019.09.06

+ Recent posts

티스토리툴바