有关支持多按键游戏的代码问题

橘子派 2013-02-17 09:10:09
下面是html代码,是主页的代码
<html>
<title>pingpang</title>
<head>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/html5game.pingpang.js"></script>
<style>
#playground{
background: #e0ffe0 url(images/pixel_grid.jpg);
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}

#ball{
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radiue: 10px;
}

.paddle{
background: #bbf;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}

#paddleB{
left: 320px;
}
</style>


</head>
<body>
<header>pingpang</header>
<div id="game">
<div id="playground">
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
<div id="ball"></div>
</div>
</div>
<footer>
this is a example of creating a ping pang game.
</footer>
</body>
</html>


下面是javascript代码,这段只支持单一的按键,不支持同时多按键。
$(function(){
$("#paddleB").css("top","20px");
$("#paddleA").css("top","60px");
});

var KEY = {
UP: 38,
DOWN: 40,
W: 87,
S: 83
}

$(function(){
$(document).keydown(function(e){
switch(e.which){
case KEY.UP:
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top",top-5);
break;
case KEY.DOWN:
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top",top+5);
break;
case KEY.W:
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top",top-5);
break;
case KEY.S:
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top",top+5);
break;
}
});
});



下面是支持多按键的代码,就是加了一个setInterval定时器,问题来了
我把上面的javascript代码去掉,换成下面的代码,结果控制不了paddleB和paddleA了。求解????
var pingpang = {}

pingpang.pressKeys = [];

$(function(){
pingpang.timer=setInterval(gameloop,30);

$(document).keydown(function(e){
pingpang.pressedKeys[e.which] = true;
});

$(document).keyup(function(e){
pingpang.pressedKeys[e.which] = false;
});
});

function gameloop(){
movePaddles();
}

function movePaddles(){
if(pingpang.pressedKeys[KEY.UP]){
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top",top-5);
}
if (pingpang.pressedKeys[KEY.down]){
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top",top+5);
}
if(pingpang.pressedKeys[KEY.W]){
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top",top-5);
}
if (pingpang.pressedKeys[KEY.S]){
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top",top+5);
}
}
...全文
117 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧