>

그러므로 과제를하려면 cgi를 사용하여 c에서 악성 게임을 프로그래밍해야합니다. 그리고 자바 스크립트를 사용하여 svg 태그 내의 특정 링크에 키 입력을 바인딩 할 수 있습니다. 나는 전에 자바 스크립트를 만지지 않았으며, 내가 뭘 잘못하고 있는지 모르겠다.  이 작업을 수행하는 몇 가지 방법을 이미 검색했지만 아무 효과가 없습니다.

여기에 무엇이 잘못 되었습니까?

생성 된 페이지의 소스 코드는 다음과 같습니다.

$(document).keydown(function(e){
		 		if(e.keyCode == 87) {
			 			e.preventDefault();
			 			document.getElementById("0").click();
		 		}
	  		if(e.keyCode == 81) {
			 			e.preventDefault();
			 			document.getElementById("1").click();
		 		}
	  		if(e.keyCode == 69) {
			 			e.preventDefault();
			 			document.getElementById("2").click();
		 		}
	  		if(e.keyCode == 90) {
			  			e.preventDefault();
			 			document.getElementById("3").click();
		 		}
	  		if(e.keyCode == 65) {
			 			e.preventDefault();
			 			document.getElementById("4").click();
		 		}
	  		if(e.keyCode == 83) {
			 			e.preventDefault();
			 			document.getElementById("5").click();
		 		}
	  		if(e.keyCode == 68) {
			 			e.preventDefault();
			 			document.getElementById("6").click();
		 		}
	  		if(e.keyCode == 13) {
			 			e.preventDefault();
			 			document.getElementById("single").click();
		 		}
	  		if(e.keyCode == 8) {
			 			e.preventDefault();
			 			document.getElementById("double").click();
		 		}
	 	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 	<svg width=1300 height=900>
<image x=0 y=0 width=670 height=900 xlink:href=http://localhost/images/backgame.png />
<image x=95 y=18 width=40 height=40 xlink:href=http://localhost/images/1.png />
<polygon points="295,125 313,157 350,157 370,125 350,93 313,93" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="240,157 258,189 295,189 315,157 295,125 258,125" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="352,157 370,189 407,189 427,157 407,125 370,125" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="185,189 203,221 240,221 260,189 240,157 203,157" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="297,189 315,221 352,221 372,189 352,157 315,157" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="409,189 427,221 464,221 484,189 464,157 427,157" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="130,221 148,253 185,253 205,221 185,189 148,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="242,221 260,253 297,253 317,221 297,189 260,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="354,221 372,253 409,253 429,221 409,189 372,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="466,221 484,253 521,253 541,221 521,189 484,189" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,253 93,285 130,285 150,253 130,221 93,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,253 205,285 242,285 262,253 242,221 205,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,253 317,285 354,285 374,253 354,221 317,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,253 429,285 466,285 486,253 466,221 429,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,253 541,285 578,285 598,253 578,221 541,221" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,285 38,317 75,317 95,285 75,253 38,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,285 150,317 187,317 207,285 187,253 150,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,285 262,317 299,317 319,285 299,253 262,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,285 374,317 411,317 431,285 411,253 374,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,285 486,317 523,317 543,285 523,253 486,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,285 598,317 635,317 655,285 635,253 598,253" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,317 93,349 130,349 150,317 130,285 93,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,317 205,349 242,349 262,317 242,285 205,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,317 317,349 354,349 374,317 354,285 317,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,317 429,349 466,349 486,317 466,285 429,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,317 541,349 578,349 598,317 578,285 541,285" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,349 38,381 75,381 95,349 75,317 38,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,349 150,381 187,381 207,349 187,317 150,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,349 262,381 299,381 319,349 299,317 262,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,349 374,381 411,381 431,349 411,317 374,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,349 486,381 523,381 543,349 523,317 486,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,349 598,381 635,381 655,349 635,317 598,317" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,381 93,413 130,413 150,381 130,349 93,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,381 205,413 242,413 262,381 242,349 205,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,381 317,413 354,413 374,381 354,349 317,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,381 429,413 466,413 486,381 466,349 429,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,381 541,413 578,413 598,381 578,349 541,349" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,413 38,445 75,445 95,413 75,381 38,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,413 150,445 187,445 207,413 187,381 150,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,413 262,445 299,445 319,413 299,381 262,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,413 374,445 411,445 431,413 411,381 374,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,413 486,445 523,445 543,413 523,381 486,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,413 598,445 635,445 655,413 635,381 598,381" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,445 93,477 130,477 150,445 130,413 93,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,445 205,477 242,477 262,445 242,413 205,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,445 317,477 354,477 374,445 354,413 317,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,445 429,477 466,477 486,445 466,413 429,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,445 541,477 578,477 598,445 578,413 541,413" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,477 38,509 75,509 95,477 75,445 38,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,477 150,509 187,509 207,477 187,445 150,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,477 262,509 299,509 319,477 299,445 262,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,477 374,509 411,509 431,477 411,445 374,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,477 486,509 523,509 543,477 523,445 486,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,477 598,509 635,509 655,477 635,445 598,445" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,509 93,541 130,541 150,509 130,477 93,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,509 205,541 242,541 262,509 242,477 205,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,509 317,541 354,541 374,509 354,477 317,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,509 429,541 466,541 486,509 466,477 429,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,509 541,541 578,541 598,509 578,477 541,477" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,541 38,573 75,573 95,541 75,509 38,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,541 150,573 187,573 207,541 187,509 150,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,541 262,573 299,573 319,541 299,509 262,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,541 374,573 411,573 431,541 411,509 374,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,541 486,573 523,573 543,541 523,509 486,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,541 598,573 635,573 655,541 635,509 598,509" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,573 93,605 130,605 150,573 130,541 93,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,573 205,605 242,605 262,573 242,541 205,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,573 317,605 354,605 374,573 354,541 317,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,573 429,605 466,605 486,573 466,541 429,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,573 541,605 578,605 598,573 578,541 541,541" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="20,605 38,637 75,637 95,605 75,573 38,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="132,605 150,637 187,637 207,605 187,573 150,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="244,605 262,637 299,637 319,605 299,573 262,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="356,605 374,637 411,637 431,605 411,573 374,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="468,605 486,637 523,637 543,605 523,573 486,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="580,605 598,637 635,637 655,605 635,573 598,573" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="75,637 93,669 130,669 150,637 130,605 93,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="187,637 205,669 242,669 262,637 242,605 205,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="299,637 317,669 354,669 374,637 354,605 317,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="411,637 429,669 466,669 486,637 466,605 429,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="523,637 541,669 578,669 598,637 578,605 541,605" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="130,669 148,701 185,701 205,669 185,637 148,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="242,669 260,701 297,701 317,669 297,637 260,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="354,669 372,701 409,701 429,669 409,637 372,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="466,669 484,701 521,701 541,669 521,637 484,637" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="185,701 203,733 240,733 260,701 240,669 203,669" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="297,701 315,733 352,733 372,701 352,669 315,669" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="409,701 427,733 464,733 484,701 464,669 427,669" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="240,733 258,765 295,765 315,733 295,701 258,701" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="352,733 370,765 407,765 427,733 407,701 370,701" style="fill:#808080;stroke:black;stroke-width:3" />
<polygon points="295,765 313,797 350,797 370,765 350,733 313,733" style="fill:#808080;stroke:black;stroke-width:3" />
<image x=32 y=383 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=480 y=511 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=368 y=255 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=311 y=607 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=199 y=415 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=511 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=423 y=543 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=144 y=511 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=311 y=287 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=447 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=535 y=479 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=319 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=199 y=543 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=480 y=255 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=256 y=383 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=311 y=223 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=32 y=575 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=87 y=543 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=87 y=287 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image x=478 y=191 width=56 height=56 xlink:href=http://localhost/images/obstacle.png />
<image id=enemy0 x=311 y=543 height=56 width=56  xlink:href=http://localhost/images/enemy_m.png />
	<animate
	xlink:href=#enemy0
	attributeName=x
	from=311
	to=311
	dur=0.2s
	begin=0.2s
	fill=freeze />
	<animate
	xlink:href=#enemy0
	attributeName=y
	from=543
	to=543
	dur=0.2s
	begin=0.2s
	fill=freeze />
<image id=enemy0hp0 x=339 y=548 height=5 width=5  xlink:href=http://localhost/images/heart.png />
		<animate
	xlink:href=#enemy0hp0
	attributeName=x
	from=339
	to=339
	dur=0.2s
	begin=0.2s
	fill=freeze />
		<animate
	xlink:href=#enemy0hp0
	attributeName=y
	from=548
	to=548
	dur=0.2s
	begin=0.2s
	fill=freeze />
<image id=enemy1 x=199 y=351 height=56 width=56  xlink:href=http://localhost/images/enemy_m.png />
	<animate
	xlink:href=#enemy1
	attributeName=x
	from=199
	to=199
	dur=0.2s
	begin=0.2s
	fill=freeze />
	<animate
	xlink:href=#enemy1
	attributeName=y
	from=351
	to=351
	dur=0.2s
	begin=0.2s
	fill=freeze />
<image id=enemy1hp0 x=227 y=356 height=5 width=5  xlink:href=http://localhost/images/heart.png />
		<animate
	xlink:href=#enemy1hp0
	attributeName=x
	from=227
	to=227
	dur=0.2s
	begin=0.2s
	fill=freeze />
		<animate
	xlink:href=#enemy1hp0
	attributeName=y
	from=356
	to=356
	dur=0.2s
	begin=0.2s
	fill=freeze />
<image id=enemy2 x=144 y=447 height=56 width=56  xlink:href=http://localhost/images/enemy_a.png />
	<animate
	xlink:href=#enemy2
	attributeName=x
	from=144
	to=144
	dur=0.2s
	begin=0.2s
	fill=freeze />
	<animate
	xlink:href=#enemy2
	attributeName=y
	from=447
	to=447
	dur=0.2s
	begin=0.2s
	fill=freeze />
<image id=enemy2hp0 x=172 y=452 height=5 width=5  xlink:href=http://localhost/images/heart.png />
		<animate
	xlink:href=#enemy2hp0
	attributeName=x
	from=172
	to=172
	dur=0.2s
	begin=0.2s
	fill=freeze />
		<animate
	xlink:href=#enemy2hp0
	attributeName=y
	from=452
	to=452
	dur=0.2s
	begin=0.2s
	fill=freeze />
<a id="0" xlink:href=http://localhost/cgi-bin/jogo?g,1,17>
<polygon points="242,669 260,701 297,701 317,669 297,637 260,637" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="1" xlink:href=http://localhost/cgi-bin/jogo?g,0,18>
<polygon points="185,701 203,733 240,733 260,701 240,669 203,669" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="2" xlink:href=http://localhost/cgi-bin/jogo?g,1,18>
<polygon points="297,701 315,733 352,733 372,701 352,669 315,669" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="5" xlink:href=http://localhost/cgi-bin/jogo?g,0,20>
<polygon points="295,765 313,797 350,797 370,765 350,733 313,733" style="fill:#808080;stroke:black;stroke-width:3;fill-opacity:0" />
</a>
<a id="double" xlink:href=http://localhost/cgi-bin/jogo?d>
<image x=14 y=807 width=340 height=85 xlink:href=http://localhost/images/jump.png />
</a>
<image x=318 y=840 width=30 height=30 xlink:href=http://localhost/images/3.png />
<image id=player x=252 y=703 height=56 width=56  xlink:href=http://localhost/images/player.png />
		<animate
	xlink:href=#player
	attributeName=x
	from=252
	to=252
	dur=0.2s
	fill=freeze />
		<animate
	xlink:href=#player
	attributeName=y
	from=703
	to=703
	dur=0.2s
	fill=freeze /><image x=36 y=764 width=27 height=27 xlink:href=http://localhost/images/heart.png />
<image x=64 y=764 width=27 height=27 xlink:href=http://localhost/images/heart.png />
<image x=92 y=764 width=27 height=27 xlink:href=http://localhost/images/heart.png />
<image x=170 y=15 width=100 height=50 xlink:href=http://localhost/images/exp.png />
<image x=256 y=15 width=45 height=45 xlink:href=http://localhost/images/0.png />
<polygon points="185,189 203,221 240,221 260,189 240,157 203,157" style="fill:#808080;stroke:black;stroke-width:3" />
<image x=195 y=164 width=53 height=53 xlink:href=http://localhost/images/trapdoor.png />
<DIV style="position: absolute; top:0px; left:900px; width:400px; height:600px"><body>
<p>     -------DEBUG--------<br><br><br>ESTADO:<br>NUM_INIMIGOS:     3<br>NUM_OBSTACULOS:     20<br>LVL:     1<br><br>JOGADOR:<br>X:     0<br>Y:     19<br>HP:     3<br>EXP:     0<br>MODE:	n<br><br></p>
</body>
</DIV>
</svg>


  • 답변 # 1

    아무것도하지 않고 있었고, 내가 사용하려고했던 라이브러리 (jquery)를 가져 오지 않았으며 올바른 변수를 참조하지 않았습니다.

    이제 작동하고 다음과 같습니다 :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
     	<script>
    	 	$(document).keydown(function(e){
    		 		if(e.keyCode == 87) {
    		 			e.preventDefault();
    			 			window.location.href = document.getElementById('0').href.animVal;
    		 		}
    </script>
    
    

  • 이전 php - Laravel 53 검증 고유
  • 다음 Excel Graphs - 엑셀 그래프 - 꺼져있는 사람 제외