|
|
@@ -1,9 +1,10 @@
|
|
|
var myGamePiece;
|
|
|
-var myObstacles = [];
|
|
|
-var myScore;
|
|
|
+var secs = 0;
|
|
|
+const imagesDir = 'images/';
|
|
|
+const charAnim = [imagesDir+'idle.png', imagesDir+'walk1.png', imagesDir+'walk2.png'];
|
|
|
|
|
|
function startGame() {
|
|
|
- myGamePiece = new component(30, 30, "red", 10, 120);
|
|
|
+ myGamePiece = new component(40, 60, charAnim[0], 0, 512, "image");
|
|
|
myGamePiece.gravity = 0.05;
|
|
|
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
|
|
|
myGameArea.start();
|
|
|
@@ -12,12 +13,14 @@ function startGame() {
|
|
|
var myGameArea = {
|
|
|
canvas : document.createElement("canvas"),
|
|
|
start : function() {
|
|
|
- this.canvas.width = 480;
|
|
|
- this.canvas.height = 270;
|
|
|
+ this.canvas.width = 512;
|
|
|
+ this.canvas.height = 512;
|
|
|
this.context = this.canvas.getContext("2d");
|
|
|
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
|
|
|
+ document.addEventListener("keydown",keyDown,false);
|
|
|
+ document.addEventListener("keyup",keyUp,false);
|
|
|
this.frameNo = 0;
|
|
|
- this.interval = setInterval(updateGameArea, 20);
|
|
|
+ this.interval = setInterval(updateGameArea, 10);
|
|
|
},
|
|
|
clear : function() {
|
|
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
@@ -35,12 +38,18 @@ function component(width, height, color, x, y, type) {
|
|
|
this.y = y;
|
|
|
this.gravity = 0;
|
|
|
this.gravitySpeed = 0;
|
|
|
+ this.isMoving = false;
|
|
|
+ if (type == "image") {
|
|
|
+ this.image = new Image();
|
|
|
+ this.image.src = color;
|
|
|
+ }
|
|
|
this.update = function() {
|
|
|
ctx = myGameArea.context;
|
|
|
- if (this.type == "text") {
|
|
|
- ctx.font = this.width + " " + this.height;
|
|
|
- ctx.fillStyle = color;
|
|
|
- ctx.fillText(this.text, this.x, this.y);
|
|
|
+ if (type == "image") {
|
|
|
+ ctx.drawImage(this.image,
|
|
|
+ this.x,
|
|
|
+ this.y,
|
|
|
+ this.width, this.height);
|
|
|
} else {
|
|
|
ctx.fillStyle = color;
|
|
|
ctx.fillRect(this.x, this.y, this.width, this.height);
|
|
|
@@ -51,6 +60,9 @@ function component(width, height, color, x, y, type) {
|
|
|
this.x += this.speedX;
|
|
|
this.y += this.speedY + this.gravitySpeed;
|
|
|
this.hitBottom();
|
|
|
+ if(!myGamePiece.isMoving){
|
|
|
+ myGamePiece.image.src = charAnim[0];
|
|
|
+ }
|
|
|
}
|
|
|
this.hitBottom = function() {
|
|
|
var rockbottom = myGameArea.canvas.height - this.height;
|
|
|
@@ -78,10 +90,15 @@ function component(width, height, color, x, y, type) {
|
|
|
|
|
|
function updateGameArea() {
|
|
|
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
|
|
|
- for (i = 0; i < myObstacles.length; i += 1) {
|
|
|
- if (myGamePiece.crashWith(myObstacles[i])) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ secs++;
|
|
|
+ if(secs >= 0 && secs < 30 && myGamePiece.isMoving){
|
|
|
+ myGamePiece.image.src = charAnim[1];
|
|
|
+ }
|
|
|
+ if(secs >= 30 && secs < 50 && myGamePiece.isMoving){
|
|
|
+ myGamePiece.image.src = charAnim[2];
|
|
|
+ }
|
|
|
+ if(secs >=50){
|
|
|
+ secs = 0;
|
|
|
}
|
|
|
myGameArea.clear();
|
|
|
myGameArea.frameNo += 1;
|
|
|
@@ -93,15 +110,7 @@ function updateGameArea() {
|
|
|
minGap = 50;
|
|
|
maxGap = 200;
|
|
|
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
|
|
|
- myObstacles.push(new component(10, height, "green", x, 0));
|
|
|
- myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
|
|
|
- }
|
|
|
- for (i = 0; i < myObstacles.length; i += 1) {
|
|
|
- myObstacles[i].x += -1;
|
|
|
- myObstacles[i].update();
|
|
|
}
|
|
|
- myScore.text="SCORE: " + myGameArea.frameNo;
|
|
|
- myScore.update();
|
|
|
myGamePiece.newPos();
|
|
|
myGamePiece.update();
|
|
|
}
|
|
|
@@ -111,6 +120,21 @@ function everyinterval(n) {
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
-function accelerate(n) {
|
|
|
- myGamePiece.gravity = n;
|
|
|
+function moveRight(n){
|
|
|
+ myGamePiece.speedX = n;
|
|
|
+ myGamePiece.isMoving = true;
|
|
|
}
|
|
|
+
|
|
|
+function keyDown(e){
|
|
|
+ if(!e) e = event;
|
|
|
+ if(e.keyCode == 39) moveRight(1);
|
|
|
+}
|
|
|
+
|
|
|
+function keyUp(e){
|
|
|
+ myGamePiece.image.src = charAnim[0];
|
|
|
+ myGamePiece.speedX = 0;
|
|
|
+ myGamePiece.speedY = 0;
|
|
|
+ myGamePiece.isMoving = false;
|
|
|
+}
|
|
|
+
|
|
|
+
|
José Luis Fernández
