wutruneef Posted June 17, 2019 Share Posted June 17, 2019 I copied the game code from w3 schools for a school project, however I wanted to change the turning and moving object from a red square to an image. Now everything works fine but the image does not turn when the object turns, how do I fix this. Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } </style> </head> <body onload="startGame()"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "images/smiley.png", 255, 255, "image"); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 500; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; this.interval = setInterval(updateGameArea, 10); 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; if (type == "image") { this.image = new Image(); this.image.src = color; } this.width = width; this.height = height; this.speed = 0; this.angle = 0; this.moveAngle = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; if (type == "image") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); } else { ctx.fillStyle = color; ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height); } ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); 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 updateGameArea() { myGameArea.clear(); myGamePiece.moveAngle = 0; myGamePiece.speed = 0; if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -2; } if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 2; } if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 2; } if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -2; } myGamePiece.newPos(); myGamePiece.update(); } </script> <p></p> </body> </html> I very appreciate the help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now