I'm having trouble in the "Bullet.prototype.draw = function ()" section of this code below. I'm trying to fix it so that I can shoot more at a time instead of just one bullet like it is now. Thus, what could I add to my code below to make that work. I wrote a comment below in the section that I need help in (i.e. the "Bullet.prototype.draw = function" part), so that the part I need help in could be easier to find. Thanks.
<title>HE</title>
<body style="background:#808080;">
<br>
<canvas id="canvasBg" width="800px" height="500px" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>
<canvas id="canvasMan" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>
<canvas id="canvasBullet" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>
<script>
var isPlaying = false;
var requestAnimframe = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var canvasMan = document.getElementById('canvasMan');
var ctxMan = canvasMan.getContext('2d');
var Man1; Man1 = new Man();
var canvasBullet = document.getElementById('canvasBullet');
var ctxBullet = canvasBullet.getContext('2d');
//I think is might be where the error might be (according to when I ran this as an "hta" file).
//but I'm not sure. I haven't really seen anything written in JavaScript like this yet (since
//I'm new to the language too. So, I don't know if this is an error or not. But, it might be
//this "var bullets = new List<Bullet>();" part.
var bullets = new List<Bullet>();
var imgSprite = new Image();
imgSprite.src = 'SpritesI.png';
imgSprite.addEventListener('load',init,false);
function init() {
drawBg();
startLoop();
document.addEventListener('keydown',checkKeyDown,false);
document.addEventListener('keyup',checkKeyUp,false);
}
function startLoop(){
isPlaying = true;
loop();
}
function stopLoop(){
isPlaying = false;
}
function loop() {
if (isPlaying === true){
Man1.draw();
//specifically the "bullets.toArray();" part might be undefined but I
//don't know for sure.
var tempBullets = bullets.toArray();
for (var i = 0; i < tempBullets.length; i++)
{
tempBullets[i].draw();
}
requestAnimframe(loop);
}
}
function drawBg() {
var srcX = 0;
var srcY = 0;
var drawX = 0;
var drawY = 0;
ctxBg.drawImage(imgSprite,srcX,srcY,800,500,drawX,drawY,800,500);
}
function clearctxBg() {
ctxBg.clearRect(0,0,800,500);
}
function Man() {
this.srcX = 10;
this.srcY = 540;
this.width = 40;
this.height = 115;
this.drawX = 100;
this.drawY = 260;
this.noseX = this.drawX + 30;
this.noseY = this.drawY + 560;
this.speed = 10;
this.actualFrame = 1;
this.speed = 2;
this.isUpKey = false;
this.isRightKey = false;
this.isDownKey = false;
this.isLeftKey = false;
this.isSpacebar = false;
this.isRight = false;
this.isLeft = false;
}
Man.prototype.draw = function () {
clearCtxMan();
this.updateCoors();
this.checkDirection();
this.noseX = this.drawX + 100;
this.noseY = this.drawY + 30;
ctxMan.drawImage(imgSprite,this.srcX,this.srcY+this.height*this.actualFrame,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
}; //careful
Man.prototype.updateCoors = function(){
this.leftX = this.drawX;
this.rightX = this.drawX + this.width;
this.topY = this.drawY;
this.bottomY = this.drawY + this.height;
}
Man.prototype.checkDirection = function () {
if (this.isUpKey && this.topY > 240){
this.drawY -= this.speed;
}
if (this.isRightKey && this.rightX < 800) {
this.drawX += this.speed;
this.isRight = true;
this.isLeft = false;
}
if (this.isDownKey && this.bottomY < 500){
this.drawY += this.speed;
}
if (this.isLeftKey && this.leftX > 0) {
this.drawX -= this.speed;
this.isRight = false;
this.isLeft = true;
}
if (this.isRightKey && this.rightX < 800) {
if (this.actualFrame > 0) {
this.actualFrame = 0;
}
else {
this.actualFrame++;
}
}
if (this.isLeftKey) {
if (this.actualFrame > 2) {
this.actualFrame = 2;
}
else {
this.actualFrame++;
}
}
};
function checkKeyDown(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38) { //up arrow or W key
Man1.isUpKey = true;
e.preventDefault();
}
if (keyID === 39 ) { //right arrow or D key
Man1.isRightKey = true;
e.preventDefault();
}
if (keyID === 40 ) { //down arrow or S key
Man1.isDownKey = true;
e.preventDefault();
}
if (keyID === 37 ) { //left arrow or A key
Man1.isLeftKey = true;
e.preventDefault();
}
if (keyID === 32 ) { //spacebar
Man1.isSpacebar = true;
var b = new Bullet();
b.isShootingRight = man.isRight;
b.isShottingLeft = man.isLeft;
bullets.add(b);
e.preventDefault();
}
}
function checkKeyUp(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38 ) { //up arrow or W key
Man1.isUpKey = false;
e.preventDefault();
}
if (keyID === 39 ) { //right arrow or D key
Man1.isRightKey = false;
e.preventDefault();
}
if (keyID === 40 ) { //down arrow or S key
Man1.isDownKey = false;
e.preventDefault();
}
if (keyID === 37 ) { //left arrow or A key
Man1.isLeftKey = false;
e.preventDefault();
}
if (keyID === 32 ) { //Spacebar
Man1.isSpacebar = false;
e.preventDefault();
}
}
function clearCtxMan() {
ctxMan.clearRect(0,0,800,500);
}
function Bullet() {
this.srcX = 430;
this.srcY = 545;
this.width = 20;
this.height = 25;
this.drawX = Man1.drawX;
this.drawY = Man1.drawY +50;
this.isSpacebar = false;
this.isRightKey = false;
this.isLeftKey = false;
this.isRight = false;
this.isLeft = false;
this.isShootingRight = false;
this.isShootingLeft = false;
}
//Here is where I'm having trouble. Now, it only shoots 1 bullet, but I want to shoot more
//bullets at a time. Thus, what do I add to this code to do that?
Bullet.prototype.draw = function () {
clearCtxBullet();
ctxBullet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); // I grabbed this line out from below
if (this.isShootingRight){
this.drawX = this.drawX + 2;
}
if (this.isShootingLeft){
this.drawX = this.drawX - 2;
}
if (this.drawX > 800){
bullets.remove(this);
}
if (this.drawX < -20){
bullets.remove(this);
}
};
function clearCtxBullet() {
ctxBullet.clearRect(0,0,800,500);
}
</script>
<style>
.top{
position: absolute;
top: 4px;
left: 10px;
color:black;
}
.top2{
position: absolute;
top: 60px;
left: 10px;
color:black;
}
</style>
<div class="top">
<p><font face="arial" color="black" size="4"><b>Henry's Game</b><font/><p/>
<p><font face="arial" color="black" size="3">
Below is a game featuring me. The game won't work in Internet Explorer (I wish it did).
Firefox might take a little while to load but it'll still work. I'm not done with it yet.
The game is not going anywhere now,
<font/><p/>
</div>
<div class="top2">
<p><font face="arial" color="black" size="3">
but it's something else to play around with until I get done with it.
<font/><p/>
</div>
