Título: Convertir objeto en bola javascript
Publicado por: alzola22 en 10 Diciembre 2019, 10:32 am
Hola, estoy haciendo un proyecto en javascript y querría cambiar la figura del cuadrado por una bola. el codigo con (cuadrado). <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: red; } </style> </head> <body onload="startGame()"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "yellow", 0, 0); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); }, 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.width = width; this.height = height; this.x = x; this.y = y; this.speedX = 1; this.speedY = 1; this.gravity = 0; this.gravitySpeed = 0; this.bounce = 0.5; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function() { this.gravitySpeed += this.gravity; this.x += this.speedX; this.y += this.speedY + this.gravitySpeed; this.hitBottom(); if(this.x > 450){ this.speedX = -this.speedX; } if(this.x < 0){ this.speedX = -this.speedX; } if(this.y < 0){ this.x = x; this.y = y; this.speedX = 2; this.speedY = 2; this.speedX = 2; this.speedY = 2; this.gravity = 0; this.gravitySpeed = 0.5; this.bounce = 5; } if((this.x > 0)&&(this.x<250)&&(this.y>100) && this.speedY > 0){ this.speedY = -this.speedY; } } this.hitBottom = function() { var rockbottom = myGameArea.canvas.height - this.height; if (this.y > rockbottom) { this.y = rockbottom; this.gravitySpeed = -(this.gravitySpeed * this.bounce); } } } function updateGameArea() { myGameArea.clear(); myGamePiece.newPos(); myGamePiece.update(); } </script>
</body> </html> He probado diferentes cosas pero o me va... Os dejo el codigo que he hecho hasta ahora <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: red; } </style> </head> <body onload="startGame()"> <script>
function startGame() { myGamePiece = new component(30, 30, 30, 0, 0); myGameArea.start(); }
var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); }, stop : function() { clearInterval(this.interval); }, clear function() { ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.fillRect(0,0,canvas.width,canvas.height); } } }
function draw() { clear(); ball.draw(); ball.x += ball.vx; ball.y += ball.vy;
function component(width, height, radius, x, y, color) { this.type = type; this.width = width; this.height = height; this.x = x; this.y = y; this.speedX = 1; this.speedY = 1; this.vx: 5, this.vy: 1, radius: 25, color: 'blue', this.gravity = 0.1; this.gravitySpeed = 0; this.bounce = 0.5; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function() { this.gravitySpeed += this.gravity; this.x += this.speedX; this.y += this.speedY + this.gravitySpeed; this.hitBottom(); if(this.x > 450){ this.speedX = -this.speedX; } if(this.x < 0){ this.speedX = -this.speedX; } if(this.y < 0){ this.x = x; this.y = y; this.speedX = 2; this.speedY = 2; this.speedX = 2; this.speedY = 2; this.gravity = 0; this.gravitySpeed = 0.5; this.bounce = 5; } } this.hitBottom = function() { var rockbottom = myGameArea.canvas.height - this.height; if (this.y > rockbottom) { this.y = rockbottom; this.gravitySpeed = -(this.gravitySpeed * this.bounce); } } }
function updateGameArea() { myGameArea.clear(); myGamePiece.newPos(); myGamePiece.update(); }
</script>
</body> </html> Espero que me podaís ayudar
|