我是网络开发的初学者，只是想学习，我在不使用画布的情况下用html做这个小游戏。 游戏包含一个框表，用户可以使用箭头键浏览它们，并可以通过按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>
P.S。有没有办法用div而不是按钮来实现这一点？ 谢谢！
答案 0 :(得分：0)
想出来，将float:left添加到按钮的css中就可以了。