用jQuery / Javascript发射子弹
[英]Fire a bullet with jQuery/Javascript
问题描述
I'm having a problem with making a fire-a-bullet-function in JavaScript/jQuery. 
我在JavaScript / jQuery中创建子弹射击功能时遇到问题。 The idea is, when im pressing the space-button a fire will be shot to the right. 这个想法是，当我按下空格键时，会向右开火。 But I don't know how I can make this possible. 但是我不知道该怎么做。
Here is working example: http://jsfiddle.net/DuCFV/1/ (You control the player with WASD) 这是工作示例： http : //jsfiddle.net/DuCFV/1/ （您可以使用WASD控制播放器）
Here is the code: 这是代码：
<!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>
2 个解决方案
解决方案1
3 已采纳 2011-10-19 15:01:09
You will need to loop through each of your bullets and update their position every X ammount of time. 您将需要遍历每个项目符号，并每隔X倍的时间更新它们的位置。 In a game, this is typically done 30 times per second. 在游戏中，通常每秒执行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/ http://jsfiddle.net/Xeon06/a72Fc/
If you want to develop a real-time game like that with JavaScript, consider using canvas for your drawing instead of DOM elements. 如果要使用JavaScript开发像这样的实时游戏，请考虑使用画布而不是DOM元素绘制图形。 It will make your life easier. 这将使您的生活更轻松。
解决方案2
0 2011-10-19 14:55:51
首先，您的子弹需要position:absolute;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.