javascript - 通过javascript添加图像改变位置

Question

我是网络开发的初学者，只是想学习，我在没有使用 Canvas 的情况下用 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()
    {	
        counter++;
	


        //Clear Canvas
        //ctx.fillStyle = "#AAA";
        //ctx.fillRect(0, 0, stage.width, stage.height);	
	
        //Draw Timer
        //ctx.fillStyle = "white";
	    //ctx.fillText("Time is: "+counter, COUNTER_X, COUNTER_Y);
	
    }

    //------------
    //Key Handlers
    //------------
    function keyUpHandler(event)
    {
       var keyPressed = event.which || event.keyCode;
        if (keyPressed == 38)   //up key
        {	
            if(current_y>0)
            {
                current_y--;
            }
            else
            {
                current_y = 9;
            
            }
            changeFocus();
        }
        else if (keyPressed == 40)  //down key
        {	
            if(current_y<9)
            {
                current_y++;
            }
            else
            {
                current_y = 0;
            }
            changeFocus();
        }
        else if (keyPressed == 39)  //right key
        {	
            if(current_x<9)
            {
                current_x++;
            }
            else
            {
                current_x = 0;
            }
            changeFocus();
        }
        else if (keyPressed == 37)  //left key
        {	
            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>
		<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>

附言有没有办法用 div 而不是按钮来实现这一点？谢谢!

Answer 1

想通了，将 float:left 添加到按钮的 css 中，它成功了。