1
나는 웹 개발의 초보자이며 배우려고 노력하면서 캔버스를 사용하지 않고 HTML로이 작은 게임을하고있었습니다. 게임은 상자 테이블로 구성되어 있으며 사용자는 화살표 키를 사용하여 탐색 할 수 있으며 Enter 키를 눌러 현재 상자에 이미지를 추가 할 수 있습니다.자바 스크립트로 이미지 추가하기 위치 변경
Enter 키를 누르면 페이지의 상자 위치가 바뀌고 원래 위치에서 약간 위로 이동합니다. 나는 사이트에 새로운 이미지를 게시 할 수 없으므로 대신 이미지를 연결합니다.
https://www.dropbox.com/s/er6e0ez6w0fd149/Screenshot_1.png?dl=0
//Loading constant.js
$.getScript("constants.js", function(){
// loaded
});
/*var stage = document.getElementById("gameCanvas");
stage.width = STAGE_WIDTH;
stage.height = STAGE_HEIGHT;
var ctx = stage.getContext("2d");
ctx.fillStyle = "black";
ctx.font = GAME_FONTS;
*/
var gameloop = setInterval(update, TIME_PER_FRAME);
var counter = 0;
var current_x = STARTING_X + 1;
var current_y = STARTING_Y;
var element = current_y.toString() + current_x.toString();;
var element;
// Updating the selected box.
function positionUpdate()
{
element = current_y.toString() + current_x.toString();
document.getElementById(element).focus();
//-------------
//Disabling Tabs
//-------------
$.prototype.disableTab = function() {
this.each(function() {
$(this).attr('tabindex', '-1');
});
};
$('button').disableTab();
}
//------------
//Game Loop
//------------
function update()
{ \t
counter++;
\t
//Clear Canvas
//ctx.fillStyle = "#AAA";
//ctx.fillRect(0, 0, stage.width, stage.height); \t
\t
//Draw Timer
//ctx.fillStyle = "white";
\t //ctx.fillText("Time is: "+counter, COUNTER_X, COUNTER_Y);
\t
}
//------------
//Key Handlers
//------------
function keyUpHandler(event)
{
var keyPressed = event.which || event.keyCode;
if (keyPressed == 38) //up key
{ \t
if(current_y>0)
{
current_y--;
}
else
{
current_y = 9;
}
changeFocus();
}
else if (keyPressed == 40) //down key
{ \t
if(current_y<9)
{
current_y++;
}
else
{
current_y = 0;
}
changeFocus();
}
else if (keyPressed == 39) //right key
{ \t
if(current_x<9)
{
current_x++;
}
else
{
current_x = 0;
}
changeFocus();
}
else if (keyPressed == 37) //left key
{ \t
if(current_x>0)
{
current_x--;
}
else
{
current_x = 9;
}
changeFocus();
}
else if (keyPressed == 13) // enter key
{
var selection = document.activeElement
if(document.activeElement.hasChildNodes())
{
}
else
{
document.activeElement.innerHTML = "<img src='Canal Control.png' width='50'>";
}
}
else
{
// Do nothing for other keys.
}
}
//-------------
//Changing the location on key press
//-------------
function changeFocus()
{
positionUpdate();
}
body {
margin: 0;
padding: 0;
}
#main{
cursor: none;
width: 600px;
height: 600px;
background-color: #53b1f5;
text-align: center;
margin-left: auto;
margin-right: auto;
}
button {
cursor: none; /*Disabling cursors*/
pointer-events: none; /*Disabling mouse clicks*/
width: 50px;
padding: 0px;
height: 50px;
border: 2px solid;
border-color: white;
border-style: outset;
background: -webkit-linear-gradient(left top, #0e23a0 , #77B5FE , white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #0e23a0 , #77B5FE , white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #0e23a0 , #77B5FE , white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #0e23a0 , #77B5FE , white); /* Standard syntax */
}
button:focus {
border: 5px;
border-color: #1aaad9;
border-style: outset;
}
<!DOCTYPE html>
<html>
<head>
<title>Canal Control Plus</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="constants.js"></script>
\t \t <script type="text/javascript" src="game.js"></script>
<script>$(document).ready(positionUpdate); </script>
</head>
<body onkeypress="keyUpHandler(event)">
<div id="main">
<button type="button" id="00"></img></button
><button type="button" id="01"></button
><button type="button" id="02"></button
><button type="button" id="03"></button
><button type="button" id="04"></button
><button type="button" id="05"></button
><button type="button" id="06"></button
><button type="button" id="07"></button
><button type="button" id="08"></button
><button type="button" id="09"></button>
<br>
<button type="button" id="10"></button
><button type="button" id="11"></button
><button type="button" id="12"></button
><button type="button" id="13"></button
><button type="button" id="14"></button
><button type="button" id="15"></button
><button type="button" id="16"></button
><button type="button" id="17"></button
><button type="button" id="18"></button
><button type="button" id="19"></button>
<br>
<button type="button" id="20"></button
><button type="button" id="21"></button
><button type="button" id="22"></button
><button type="button" id="23"></button
><button type="button" id="24"></button
><button type="button" id="25"></button
><button type="button" id="26"></button
><button type="button" id="27"></button
><button type="button" id="28"></button
><button type="button" id="29"></button>
<br>
<button type="button" id="30"></button
><button type="button" id="31"></button
><button type="button" id="32"></button
><button type="button" id="33"></button
><button type="button" id="34"></button
><button type="button" id="35"></button
><button type="button" id="36"></button
><button type="button" id="37"></button
><button type="button" id="38"></button
><button type="button" id="39"></button>
<br>
<button type="button" id="40"></button
><button type="button" id="41"></button
><button type="button" id="42"></button
><button type="button" id="43"></button
><button type="button" id="44"></button
><button type="button" id="45"></button
><button type="button" id="46"></button
><button type="button" id="47"></button
><button type="button" id="48"></button
><button type="button" id="49"></button>
<br>
<button type="button" id="50"></button
><button type="button" id="51"></button
><button type="button" id="52"></button
><button type="button" id="53"></button
><button type="button" id="54"></button
><button type="button" id="55"></button
><button type="button" id="56"></button
><button type="button" id="57"></button
><button type="button" id="58"></button
><button type="button" id="59"></button>
<br>
<button type="button" id="60"></button
><button type="button" id="61"></button
><button type="button" id="62"></button
><button type="button" id="63"></button
><button type="button" id="64"></button
><button type="button" id="65"></button
><button type="button" id="66"></button
><button type="button" id="67"></button
><button type="button" id="68"></button
><button type="button" id="69"></button>
<br>
<button type="button" id="70"></button
><button type="button" id="71"></button
><button type="button" id="72"></button
><button type="button" id="73"></button
><button type="button" id="74"></button
><button type="button" id="75"></button
><button type="button" id="76"></button
><button type="button" id="77"></button
><button type="button" id="78"></button
><button type="button" id="79"></button>
<br>
<button type="button" id="80"></button
><button type="button" id="81"></button
><button type="button" id="82"></button
><button type="button" id="83"></button
><button type="button" id="84"></button
><button type="button" id="85"></button
><button type="button" id="86"></button
><button type="button" id="87"></button
><button type="button" id="88"></button
><button type="button" id="89"></button>
<br>
<button type="button" id="90"></button
><button type="button" id="91"></button
><button type="button" id="92"></button
><button type="button" id="93"></button
><button type="button" id="94"></button
><button type="button" id="95"></button
><button type="button" id="96"></button
><button type="button" id="97"></button
><button type="button" id="98"></button
><button type="button" id="99"></button>
<br>
</div>
</body>
</html>
P.S. 버튼 대신 div를 사용하여이 작업을 수행 할 수 있습니까? 감사합니다!
이미지의 높이를 설정하고 (자바 스크립트의 src =에) 테두리, 패딩 등을 0으로 설정하는 CSS 클래스를 제공하십시오. (나는 이것을 추측이기 때문에 대답이 아니라 주석으로 만들었습니다.) –
@BobBrown 어느 누구도 속임수를 쓰지 않았습니다. – SuperKXT
나는 html을 수동으로 추가해도 변경되지 않는다는 것을 추가해야한다. 추가 된 버튼은 여전히 변경된다. – SuperKXT