PDA

View Full Version : Game to avoid falling objects.



DevilSummer
Feb 18th, 2014, 11:12 PM
The aim of the game is for the user-controlled block to make a complete pass of the screen (left-to-right or right-to-left) without being hit by a falling block. If the user-controlled block manages a complete pass unscathed, then points are awarded 10 points. I can't add the points (it adds 10 points every 10 milliseconds). Any help would be greatly appreciated.



//javascript code. Second part of the code is the HTML
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var count = 0;
var rightflag = false;
var rightflag = false;

var mySprite =
{
x: 0,
y: 550,
width: 50,
height: 50,
speed: 200,
color: '#c00'
};

var Sprites =
{
mySprite1 : {
x: Math.random() * 450,
y: -50,
width: 50,
height: 50,
speed: 200,
color: '#0c0'
},

mySprite2:{
x: Math.random() * 460,
y: -50,
width: 40,
height: 40,
speed: 100,
color: '#00c'
}
}

var keysDown = {};
window.addEventListener('keydown', function(e)
{
keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
delete keysDown[e.keyCode];
});

function update(mod)
{
if (37 in keysDown)
{
mySprite.x -= mySprite.speed * mod;
if(mySprite.x<0)
mySprite.x = 0;
}
if (39 in keysDown)
{
mySprite.x += mySprite.speed * mod;
if(mySprite.x>450)
mySprite.x = 450;
}
}

function update1(mod)
{
for(index in Sprites)
{
if (Sprites.hasOwnProperty(index))
{
Sprites[index].y += Sprites[index].speed * mod;
}
}
}

var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;

function render()
{
//canvas
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

//moving red object
ctx.fillStyle = mySprite.color;
ctx.fillRect(mySprite.x, mySprite.y, mySprite.width, mySprite.height);

if(mySprite.x == 450 || mySprite.x == 0)
{
count+=10;
var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;
}

//falling objects
for(index in Sprites)
{
ctx.fillStyle = Sprites[index].color;
ctx.fillRect(Sprites[index].x, Sprites[index].y, Sprites[index].width, Sprites[index].height);
if (Sprites[index].y > 560)
{ //Repeat the object when it falls out of view
Sprites[index].y = -50 //Account for the image size
Sprites[index].x = Math.random() * 450; //Make it appear randomly along the width
/*count+=10;
var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;*/
}

if (Sprites[index].x < mySprite.x + mySprite.width && Sprites[index].x + Sprites[index].width > mySprite.x &&
Sprites[index].y < mySprite.y + mySprite.height && Sprites[index].y + Sprites[index].height > mySprite.y)
{
alert("Game Over!");
clearInterval(collision);
}
}
}

function run()
{
update((Date.now() - time) / 1000);
update1((Date.now() - time) / 1000);
render();
time = Date.now();
}

var time = Date.now();
var collision = setInterval(run, 10);





<html>
<head>
<title>My first game</title>
<style type="text/css">
div
{
font-family:"Times New Roman", Times, serif;
font-size:40px;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="600px"></canvas>
<div id="score"></div>
<script type="text/javascript" src="project.js"></script>
<button onclick="window.location.reload()">Play Again</button>
</body>
</html>

xelawho
Feb 19th, 2014, 02:43 AM
being that the only way you can get to the right side is by pressing the right key (and the same hold for getting to the left side), why not check if the player is there on that event?



if (39 in keysDown)
{
mySprite.x += mySprite.speed * mod;
if(mySprite.x>450)
mySprite.x = 450;

if(mySprite.x == 450)
{
count+=10;
var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;
mySprite.x=0;
}
}

DevilSummer
Mar 3rd, 2014, 04:14 PM
Sorry for the late answer. I actually managed to get it to work to some point by using this method:



var already_touched = true;

if (mySprite.x == 450 || mySprite.x == 0)
{
if (!already_touched)
{
already_touched = true;
count += 10;
}
}
else
{
already_touched = false;
}

DevilSummer
Mar 3rd, 2014, 04:15 PM
However it is still not perfect. I want it to make a full trip side to side before adding points and I am having troubles doing that. Any help would be appreciated.

xelawho
Mar 3rd, 2014, 04:23 PM
I think you were on to something the first time in setting two flags...


<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var count = 0;
var touchright = false;
var touchleft = true;

var mySprite =
{
x: 0,
y: 550,
width: 50,
height: 50,
speed: 200,
color: '#c00'
};

var Sprites =
{
mySprite1 : {
x: Math.random() * 450,
y: -50,
width: 50,
height: 50,
speed: 200,
color: '#0c0'
},

mySprite2:{
x: Math.random() * 460,
y: -50,
width: 40,
height: 40,
speed: 100,
color: '#00c'
}
}

var keysDown = {};
window.addEventListener('keydown', function(e)
{
keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
delete keysDown[e.keyCode];
});

function update(mod)
{
if (37 in keysDown)
{
mySprite.x -= mySprite.speed * mod;
if(mySprite.x<0)
mySprite.x = 0;
if(mySprite.x == 0 && !touchleft)
{
count+=10;
var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;
touchright=false;
touchleft=true;
}

}
if (39 in keysDown)
{
mySprite.x += mySprite.speed * mod;
if(mySprite.x>450)
mySprite.x = 450;

if(mySprite.x == 450 && !touchright)
{
count+=10;
var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;
touchright=true;
touchleft=false;
}
}
}

function update1(mod)
{
for(index in Sprites)
{
if (Sprites.hasOwnProperty(index))
{
Sprites[index].y += Sprites[index].speed * mod;
}
}
}

var alert1 = document.getElementById("score");
alert1.innerHTML = "Score: " + count;

function render()
{
//canvas
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

//moving red object
ctx.fillStyle = mySprite.color;
ctx.fillRect(mySprite.x, mySprite.y, mySprite.width, mySprite.height);

//falling objects
for(index in Sprites)
{
ctx.fillStyle = Sprites[index].color;
ctx.fillRect(Sprites[index].x, Sprites[index].y, Sprites[index].width, Sprites[index].height);
if (Sprites[index].y > 560)
{ //Repeat the object when it falls out of view
Sprites[index].y = -50 //Account for the image size
Sprites[index].x = Math.random() * 450; //Make it appear randomly along the width

}

if (Sprites[index].x < mySprite.x + mySprite.width && Sprites[index].x + Sprites[index].width > mySprite.x &&
Sprites[index].y < mySprite.y + mySprite.height && Sprites[index].y + Sprites[index].height > mySprite.y)
{
alert("Game Over!");
clearInterval(collision);
}
}
}

function run()
{
update((Date.now() - time) / 1000);
update1((Date.now() - time) / 1000);
render();
time = Date.now();
}

var time = Date.now();
var collision = setInterval(run, 10);
</script>

DevilSummer
Mar 3rd, 2014, 05:33 PM
This is not what I am looking for. However, it is a nice solution and I will play around with it and implement it how i want it. You have been of a great help. Thank you sir!

xelawho
Mar 3rd, 2014, 05:41 PM
Just out of curiosity, how this not what you're looking for? It does exactly what you describe in the first post...

DevilSummer
Mar 3rd, 2014, 06:02 PM
I am sorry I expressed myself wrongly. This is what I want, however I have to implement it differently. That is what I meant. Sorry for the confusion