203 lines
7.8 KiB
JavaScript
203 lines
7.8 KiB
JavaScript
var firstCar;
|
|
var secondCar;
|
|
var myPuddle;
|
|
var myX;
|
|
var myY;
|
|
var mySpeed;
|
|
var myMemo;
|
|
var sMemo = 'T';
|
|
|
|
class Substrate {
|
|
constructor(component, friction, maxSpeedReduction) {
|
|
this.component = component;
|
|
this.friction = friction;
|
|
this.maxSpeedReduction = maxSpeedReduction;
|
|
}
|
|
}
|
|
|
|
function startGame() {
|
|
firstCar = new component(30, 50, "#B800FF", 25, 225, 'car');
|
|
myPuddle = new component(100, 250, "#68471A", 350, 225, 'substrate');
|
|
myPuddleSubstrate = new Substrate(myPuddle, 0.3, 0.5);
|
|
myX = new component("14px", "Consolas", "black", 180, 5, "text");
|
|
myY = new component("14px", "Consolas", "black", 180, 10, "text");
|
|
mySpeed = new component("30px", "Consolas", "red", 30, 15, "text");
|
|
myMemo = new component("30px", "Consolas", "red", 400, 15, "text");
|
|
myGameArea.start();
|
|
}
|
|
|
|
var myGameArea = {
|
|
canvas : document.getElementById("mainCanvas"),
|
|
start : function() {
|
|
this.canvas.width = 1080;
|
|
this.canvas.height = 580;
|
|
this.context = this.canvas.getContext("2d");
|
|
this.frameNo = 0;
|
|
this.friction = 0.05; // wspolczynik tarcia
|
|
this.interval = setInterval(updateGameArea, 20);
|
|
window.addEventListener('keydown', function (e) {
|
|
e.preventDefault();
|
|
myGameArea.keys = (myGameArea.keys || []);
|
|
myGameArea.keys[e.keyCode] = (e.type == "keydown");
|
|
})
|
|
window.addEventListener('keyup', function (e) {
|
|
myGameArea.keys[e.keyCode] = (e.type == "keydown");
|
|
})
|
|
},
|
|
stop : function() {
|
|
clearInterval(this.interval);
|
|
},
|
|
clear : function() {
|
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
}
|
|
|
|
function component(width, height, color, x, y, type) {
|
|
|
|
this.type = type;
|
|
this.lightsColor = 'yellow';
|
|
this.width = width;
|
|
this.height = height;
|
|
this.speed = 0;
|
|
if (this.type == "text") {
|
|
this.angle = 0;
|
|
} else {
|
|
this.angle = Math.PI / 2;
|
|
}
|
|
this.maxForwardSpeed = 4;
|
|
this.maxBackwardSpeed = -2;
|
|
this.booster = false;
|
|
this.moveAngle = 0;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.update = function() {
|
|
ctx = myGameArea.context;
|
|
ctx.save();
|
|
ctx.translate(this.x, this.y);
|
|
ctx.rotate(this.angle);
|
|
if (this.type == "text") {
|
|
ctx.font = this.width + " " + this.height;
|
|
ctx.fillStyle = color;
|
|
ctx.fillText(this.text, this.x, this.y);
|
|
} else {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
|
|
if (this.type === 'car') {
|
|
ctx.fillStyle = this.lightsColor;
|
|
ctx.fillRect(this.width / -2 + 1, this.height / -2, this.width - (this.width - 5), this.height - (this.height - 7));
|
|
ctx.fillRect(this.width / -2 + this.width - 6, this.height / -2, this.width - (this.width - 5), this.height - (this.height - 7));
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillRect(this.width / -2 + (this.width /4), this.height / -2 + (this.height / 3), this.width / 2, this.height / 3);
|
|
}
|
|
}
|
|
ctx.restore();
|
|
}
|
|
this.newPos = function() {
|
|
this.angle += this.moveAngle * Math.PI / 180;
|
|
this.x += this.speed * Math.sin(this.angle);
|
|
this.y -= this.speed * Math.cos(this.angle);
|
|
}
|
|
}
|
|
|
|
function accelerate(n, myGamePiece) {
|
|
divider = checkSubstrate(myGamePiece.x, myGamePiece.y);
|
|
if (n>0) {
|
|
if (myGamePiece.speed < myGamePiece.maxForwardSpeed * divider.maxSpeedReduction) {
|
|
myGamePiece.speed = myGamePiece.speed + n;
|
|
if (myGamePiece.speed > myGamePiece.maxForwardSpeed * divider.maxSpeedReduction) {
|
|
myGamePiece.speed = myGamePiece.maxForwardSpeed * divider.maxSpeedReduction;
|
|
}
|
|
} else if (myGamePiece.speed == myGamePiece.maxForwardSpeed * divider.maxSpeedReduction) {
|
|
// nothing to do in this case
|
|
} else {
|
|
slowdown(myGameArea.friction + divider.friction, myGamePiece);
|
|
}
|
|
} else {
|
|
if (myGamePiece.speed > myGamePiece.maxBackwardSpeed * divider.maxSpeedReduction) {
|
|
myGamePiece.speed = myGamePiece.speed + n;
|
|
if (myGamePiece.speed < myGamePiece.maxBackwardSpeed * divider.maxSpeedReduction) {
|
|
myGamePiece.speed = myGamePiece.maxBackwardSpeed * divider.maxSpeedReduction;
|
|
}
|
|
} else if (myGamePiece.speed == myGamePiece.maxBackwardSpeed * divider.maxSpeedReduction) {
|
|
// nothing to do in this case
|
|
} else {
|
|
slowdown(myGameArea.friction + divider.friction, myGamePiece);
|
|
}
|
|
}
|
|
}
|
|
|
|
function slowdown(n, myGamePiece) {
|
|
if (myGamePiece.speed > 0) {
|
|
myGamePiece.speed = myGamePiece.speed - n;
|
|
if (myGamePiece.speed < 0) {myGamePiece.speed = 0;}
|
|
} else if (myGamePiece.speed < 0) {
|
|
myGamePiece.speed = myGamePiece.speed + n;
|
|
if (myGamePiece.speed > 0) {myGamePiece.speed = 0;}
|
|
}
|
|
}
|
|
|
|
function boosterOn(lmyGamePiece) {
|
|
lmyGamePiece.maxForwardSpeed = 8;
|
|
lmyGamePiece.maxBackwardSpeed = -5;
|
|
lmyGamePiece.booster = true;
|
|
lmyGamePiece.lightsColor = 'red';
|
|
}
|
|
|
|
function boosterOff(lmyGamePiece) {
|
|
lmyGamePiece.maxForwardSpeed = 4;
|
|
lmyGamePiece.maxBackwardSpeed = -2;
|
|
lmyGamePiece.booster = false;
|
|
lmyGamePiece.lightsColor = 'yellow';
|
|
}
|
|
|
|
function checkSubstrate(x,y) {
|
|
divider = new Substrate(null, 0, 1);
|
|
console.log("X: " + x + " ("+ myPuddleSubstrate.component.x +" - " + myPuddleSubstrate.component.height / 2 + ") Y: " + y + " ("+ myPuddleSubstrate.component.y +" - " + myPuddleSubstrate.component.width / 2 + ") ");
|
|
if ((x > myPuddleSubstrate.component.x - myPuddleSubstrate.component.height / 2 && x < myPuddleSubstrate.component.x + myPuddleSubstrate.component.height / 2) && (y > myPuddleSubstrate.component.y - myPuddleSubstrate.component.width / 2 && y < myPuddleSubstrate.component.y + myPuddleSubstrate.component.width / 2)) {
|
|
divider.maxSpeedReduction = myPuddleSubstrate.maxSpeedReduction;
|
|
divider.friction = myPuddleSubstrate.friction;
|
|
sMemo = 'IN';
|
|
} else {
|
|
myPuddleSubstrate.component.color = '#5FC4D8';
|
|
sMemo = 'OUT';
|
|
}
|
|
return divider;
|
|
}
|
|
|
|
function updateGameArea() {
|
|
var direction = 0;
|
|
myGameArea.clear();
|
|
firstCar.moveAngle = 0;
|
|
if (myGameArea.keys && myGameArea.keys[32]) { //space
|
|
slowdown(0.2, firstCar);
|
|
//myGamePiece.speed = 0;
|
|
}
|
|
if (myGameArea.keys && myGameArea.keys[69]) {
|
|
boosterOn(firstCar);
|
|
} else boosterOff(firstCar);// E
|
|
if (myGameArea.keys && myGameArea.keys[81]) { boosterOff(firstCar);} // Q
|
|
if (myGameArea.keys && (myGameArea.keys[37] || myGameArea.keys[65])) {
|
|
if (firstCar.speed > 0) firstCar.moveAngle = -2;
|
|
if (firstCar.speed < 0) firstCar.moveAngle = 2;
|
|
} // left arrow || A
|
|
if (myGameArea.keys && (myGameArea.keys[39] || myGameArea.keys[68])) {
|
|
if (firstCar.speed > 0) firstCar.moveAngle = 2;
|
|
if (firstCar.speed < 0) firstCar.moveAngle = -2;
|
|
} // right arrow || D
|
|
if (myGameArea.keys && (myGameArea.keys[38] || myGameArea.keys[87]) && !myGameArea.keys[32]) {accelerate(0.2, firstCar); direction = 1;} // up arrow || W
|
|
if (myGameArea.keys && (myGameArea.keys[40] || myGameArea.keys[83]) && !myGameArea.keys[32]) {accelerate(-0.1, firstCar); direction = -1;} // down arrow || S
|
|
if (direction === 0) {
|
|
slowdown(myGameArea.friction, firstCar);
|
|
}
|
|
myX.text="X: " + firstCar.x.toFixed(2);
|
|
myX.update();
|
|
myY.text="Y: " + firstCar.y.toFixed(2);
|
|
myY.update();
|
|
mySpeed.text="SPEED: " + firstCar.speed.toFixed(2);
|
|
mySpeed.update();
|
|
myMemo.text=sMemo;
|
|
myMemo.update();
|
|
myPuddle.update();
|
|
firstCar.newPos();
|
|
firstCar.update();
|
|
} |