Code:
<!DOCTYPE html>
<html>
<head>
<title>Space balls</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var ctx = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var keys = [];
var demo;
function createSpaceShip() {
this.x = 300;
this.y = 500;
this.vX = 5;
this.vY = 5;
/*aX: 2,
aY: 2,*/
this.drawSpaceShip = function() {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x+5, this.y+20);
ctx.lineTo(this.x-5, this.y+20);
ctx.closePath();
ctx.fill();
}
};
var spaceShip = new createSpaceShip();
function Asteroid(x, y, radius, mass, vX, vY, aX, aY) {
this.x = x;
this.y = y;
this.radius = radius;
this.mass = mass;
this.vX = vX;
this.vY = vY;
this.aX = aX;
this.aY = aY;
};
var asteroids = new Array();
for (var i = 0; i < 10; i++) {
var x = 20+(Math.random()*(canvasWidth-40));
var y = -20;
var radius = 2+Math.random()*30;
var mass = radius/2;
var vX = 0;
var vY = Math.random()*4-2;
var aX = Math.random()*0.2-0.1;
var aY = Math.random()*0.2-0.1;
asteroids.push(new Asteroid(x, y, radius, mass, vX, vY, aX, aY));
};
function Shot(x, y, vX, vY, aX, aY) {
this.x = x;
this.y = y;
this.vX = 0;
this.vY = 5;
this.aX = aX;
this.aY = aY;
fireRate = 5;
}
var shots = new Array();
var pressed;
$(document).keydown(function (e) {
keys[e.keyCode] = true;
if (e.which == 32) {
//console.log("space");
pressed = e.timeStamp;
}
});
$(document).keyup(function (e) {
if (e.which == 32) {
//var duration = (e.timeStamp - pressed[0]);
//pressed = e.timeStamp;
console.log(pressed);
}
delete keys[e.keyCode];
});
document.onkeyup = function(event) {
var keyCode;
if(event == null) {
keyCode = window.event.keyCode;
} else {
keyCode = event.keyCode;
}
};
//collision detection
function distance(obj1, obj2) {
var difx = obj2.x - obj1.x;
var dify = obj2.y - obj1.y;
return Math.sqrt( (difx*difx) + (dify*dify) );
};
function collide() {
var numAsteroids = asteroids.length - 1;
var numShots = shots.length - 1;
var curAsteroid, curShot;
for(var j=0; j<numAsteroids; j++) {
curAsteroid = asteroids[j];
if(distance(curAsteroid, spaceShip) < asteroids[j].radius){
console.log("juhi mu dela");
}
for(var i=0; i<numShots; i++) {
curShots = shots[i];
//tu pa preverimo konkretno med metkom in skalo
if (distance(curAsteroid,curShots) < asteroids[j].radius){
//curAsteroid.splice(j,1);
//curShots[i].y=-10;
console.log("ZADETEK!");
}
}
var numShots = shots.length - 1;
}
}
setInterval(function(){animation()},30);
function animation() {
var tmpSpaceShip = spaceShip;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
tmpSpaceShip.drawSpaceShip();
var shotsLength = shots.length;
var asteroidsLength = asteroids.length;
for (var j = 0; j < asteroidsLength; j++) {
var tmpAsteroid = asteroids[j];
tmpAsteroid.x += tmpAsteroid.vX;
tmpAsteroid.y += tmpAsteroid.vY;
ctx.beginPath();
ctx.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
if(asteroids[j].y>630){
asteroids[j].y = -30;
}
};
collide();
//bouncing dodatek
var asteroidsLength = asteroids.length;
for (var i = 0; i < asteroidsLength; i++) {
var tmpAsteroid = asteroids[i];
tmpAsteroid.x += tmpAsteroid.vX;
tmpAsteroid.y += tmpAsteroid.vY;
//bounce control
for (var j = i+1; j < asteroidsLength; j++) {
var tmpAsteroidB = asteroids[j];
var dX = tmpAsteroidB.x - tmpAsteroid.x;
var dY = tmpAsteroidB.y - tmpAsteroid.y;
var distance = Math.sqrt((dX*dX)+(dY*dY));
if (distance < tmpAsteroid.radius + tmpAsteroidB.radius) {
var angle = Math.atan2(dY, dX);
var sine = Math.sin(angle);
var cosine = Math.cos(angle);
var x = 0;
var y = 0;
var xB = dX * cosine + dY * sine;
var yB = dY * cosine - dX * sine;
var vX = tmpAsteroid.vX * cosine + tmpAsteroid.vY * sine;
var vY = tmpAsteroid.vY * cosine - tmpAsteroid.vX * sine;
var vXb = tmpAsteroidB.vX * cosine + tmpAsteroidB.vY * sine;
var vYb = tmpAsteroidB.vY * cosine - tmpAsteroidB.vX * sine;
//vX *= -1;
//vXb *= -1;
var vTotal = vX - vXb;
vX = ((tmpAsteroid.mass - tmpAsteroidB.mass) * vX + 2 * tmpAsteroidB.mass * vXb) / (tmpAsteroid.mass + tmpAsteroidB.mass);
vXb = vTotal + vX;
xB = x + (tmpAsteroid.radius + tmpAsteroidB.radius);
tmpAsteroid.x = tmpAsteroid.x + (x * cosine - y * sine);
tmpAsteroid.y = tmpAsteroid.y + (y * cosine + x * sine);
tmpAsteroidB.x = tmpAsteroid.x + (xB * cosine - yB * sine);
tmpAsteroidB.y = tmpAsteroid.y + (yB * cosine + xB * sine);
tmpAsteroid.vX = vX * cosine - vY * sine;
tmpAsteroid.vY = vY * cosine + vX * sine;
tmpAsteroidB.vX = vXb * cosine - vYb * sine;
tmpAsteroidB.vY = vYb * cosine + vXb * sine;
};
};
//bounce kontrol
if (tmpAsteroid.x-tmpAsteroid.radius < 0) {
tmpAsteroid.x = tmpAsteroid.radius;
tmpAsteroid.vX *= -1;
tmpAsteroid.aX *= -1;
} else if (tmpAsteroid.x+tmpAsteroid.radius > canvasWidth) {
tmpAsteroid.x = canvasWidth-tmpAsteroid.radius;
tmpAsteroid.vX *= -1;
tmpAsteroid.aX *= -1;
};
};
//premikanje strelov
for (var i = 0; i<shotsLength; i++) {
var tmpShots = shots[i];
tmpShots.y -= tmpShots.vY;
ctx.beginPath();
ctx.moveTo(tmpShots.x, tmpShots.y);
ctx.lineTo(tmpShots.x, tmpShots.y-5);
ctx.stroke();
if(shots[i].y<-5) {
shots[i].y = -100;
}
};
if(keys[32]){
setTimeout(shots.push(new Shot(tmpSpaceShip.x, tmpSpaceShip.y, vX, vY, aX, aY)),100);
//beginFire = lastShot.getTime();
var n="Pritisnil si tipko SPACE";
}
if(keys[37]){
tmpSpaceShip.x -= tmpSpaceShip.vX;
tmpSpaceShip.drawSpaceShip();
if(tmpSpaceShip.x < 5) {
tmpSpaceShip.x = 5;
}
var n="Pritisnil si tipko levo";
}
if(keys[39]){
tmpSpaceShip.x += tmpSpaceShip.vX;
tmpSpaceShip.drawSpaceShip();
if(tmpSpaceShip.x > 595) {
tmpSpaceShip.x = 595;
}
var n="Pritisnil si tipko desno";
}
if(keys[38]){
tmpSpaceShip.y -= tmpSpaceShip.vY;
tmpSpaceShip.drawSpaceShip();
if(tmpSpaceShip.y < 0) {
tmpSpaceShip.x = 0;
}
var n="Pritisnil si tipko gor";
}
if(keys[40]){
tmpSpaceShip.y += tmpSpaceShip.vY;
tmpSpaceShip.drawSpaceShip();
if(tmpSpaceShip.y > 580) {
tmpSpaceShip.y = 580;
}
var n="Pritisnil si tipko dol";
}
document.getElementById("demo").innerHTML=n;
}
});
</script>
<!--link href='reset.css' rel='stylesheet'>
<link href='master.css' rel='stylesheet'-->
</head>
<body>
<canvas id="myCanvas" width="600" height="600">
</canvas>
<p id="demo"> uporabi smerne tipke </p>
</body>
</html>
Reply With Quote
Bookmarks