I am making a game like flappy bird , the only difference is that the bird moves by using the mouse pointer location any where on the canvas. So for the obstacle i made walls but the walls are appearing in a bunch. I am not able to make walls that appear on regular interval in the canvas .
var context;
var screenWidth;
var screenHeight;
var ball;
var wall = [];
var gameStatus;
var mouseX;
var mouseY;
var running = false;
var raf;
gameIntialize();
gameDraw();
function Ball() {
this.radius = 16;
this.x = 25;
this.y = screenHeight / 2;
this.ballDraw = function() {
context.beginPath();
context.arc(this.x, this.y, 16, 0, 2 * Math.PI);
context.fillStyle = 'green';
context.fill();
}
};
function Wall() {
this.thickness = 10;
this.wallPositionY = screenHeight;
this.wallPositionX = screenWidth;
this.spacing = 0;
if (this.wallPositionY > 400 && this.wallPositionY <= 500) {
this.spacing = Math.floor(Math.random() * (100 - 50) + 50);
} else if (this.wallPositionY > 500) {
this.spacing = Math.floor(Math.random() * (200 - 100) + 100);
} else {
this.spacing = 45;
}
this.heightFromTheTop = Math.floor(Math.random() * (this.wallPositionY / 6 - 3 / 4 * this.wallPositionY) + this.wallPositionY);
this.heightFromTheBottom = this.wallPositionY - (this.heightFromTheTop + this.spacing);
this.speed = 6;
this.draw = function() {
context.fillStyle = 'yellow';
context.fillRect(this.wallPositionX, 0, this.thickness, this.heightFromTheTop);
context.fillRect(this.wallPositionX, this.wallPositionY - this.heightFromTheBottom, this.thickness, this.heightFromTheBottom);
}
this.update = function() {
this.wallPositionX = this.wallPositionX - this.speed;
}
this.offscreen = function() {
if (this.wallPositionX < -this.thickness) {
return true;
} else {
return false;
}
}
this.newWall = function() {
if (this.wallPositionX < screenWidth / 2) {
return true;
} else {
return false;
}
}
};
function gameIntialize() {
var canvass = document.getElementById('canvas');
context = canvas.getContext('2d');
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
canvas.width = screenWidth;
canvas.height = screenHeight;
ball = new Ball();
wall.push(new Wall());
window.addEventListener('resize', resizeScreen, false);
canvas.addEventListener('mousemove', function(e) {
if (!running) {
ball.x = e.clientX;
ball.y = e.clientY;
}
});
}
function gameDraw() {
context.fillStyle = "#aaaaaa";
context.fillRect(0, 0, screenWidth, screenHeight);
ball.ballDraw();
for (var i = wall.length - 1; i >= 0; i--) {
wall[i].draw();
wall[i].update();
if (wall[i].offscreen()) {
wall.splice(i, 1);
}
var test_interval = setInterval(function() {
wall.push(new Wall());
}, 5000);
}
raf = window.requestAnimationFrame(gameDraw);
}
body {
margin: 0px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>game-run</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="game.js"></script>
</html>
What is wrong with this code? I appreciate any help!
Aucun commentaire:
Enregistrer un commentaire