[英]Fire a bullet with jQuery/Javascript
我在JavaScript / jQuery中创建子弹射击功能时遇到问题。 这个想法是,当我按下空格键时,会向右开火。 但是我不知道该怎么做。
这是工作示例: http : //jsfiddle.net/DuCFV/1/ (您可以使用WASD控制播放器)
这是代码:
<!DOCTYPE >
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
margin-top: 200px;
}
#gameField {
width: 750px;
height: 400px;
border: 5px solid #ccffff;
margin: auto;
}
#block {
position: absolute;
border: 5px solid #FFB2FF;
left: 48%;
right: 0px;
top: 50%;
bottom: 0px;
width: 46px;
height: 46px;
margin: 0;
border-radius: 90px;
}
.bullet {
background-color: red;
width: 20px;
height: 20px;
border-radius: 20px;
}
</style>
<script>
$(document).ready(function() {
playerX = 750;
playerY = 400;
bulletX = 0;
bulletY = 0;
function gameLoop() {
$('#block').css({
'top' : playerY,
'left' : playerX
});
$('.bullet').css({
'top' : bulletY,
'left' : bulletX
});
setTimeout(gameLoop, 60);
}
gameLoop();
});
$(document).keydown(function(event) {
switch(event.keyCode) {
case 65:
playerX = playerX - 10 // MOVE LEFT
break;
case 87:
playerY = playerY - 10 // MOVE UP
break;
case 68:
playerX = playerX + 15 // MOVE RIGHT
break;
case 83:
playerY = playerY + 10 // MOVE DOWN
break;
case 32: // FIRE BULLET WITH SPACE-BUTTON.
$('#block').append('<div class="bullet"></div>');
bulletX = bulletX + 10
break
});
</script>
</head>
<body>
<div id="gameField">
<div id="block"></div>
</div>
</body>
您将需要遍历每个项目符号,并每隔X倍的时间更新它们的位置。 在游戏中,通常每秒执行30次。
function fire() {
$("body").append($("<div>").addClass("bullet").css("left", 0));
}
$("input").click(fire);
function update() {
$(".bullet").each(function() {
var oldLeft = $(this).offset().left;
$(this).css("left", oldLeft + 10 + "px");
});
}
setInterval(update, 100);
http://jsfiddle.net/Xeon06/a72Fc/
如果要使用JavaScript开发像这样的实时游戏,请考虑使用画布而不是DOM元素绘制图形。 这将使您的生活更轻松。
首先,您的子弹需要position:absolute;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.