Fire a bullet with jQuery/Javascript
Question
I'm having a problem with making a fire-a-bullet-function in 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)
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 answers
solution1
3 ACCPTED 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. In a game, this is typically done 30 times per second.
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/
If you want to develop a real-time game like that with JavaScript, consider using canvas for your drawing instead of DOM elements. It will make your life easier.
solution2
0 2011-10-19 14:55:51
首先，您的子弹需要position:absolute;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.