DD224 Posted January 3, 2021 Report Share Posted January 3, 2021 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Game Dev</title> <style> canvas { border: 1px solid #d3d3d3; background-color: #f1f1f1; align-items: center; justify-content: center; } .you-style { text-align: center; width: 480px; } </style> </head> <body onload="startGame()"> <div class="you-style"> <button onmousedown="moveUp()" onmouseup="stopMove()">Up</button><br><br> <button onmousedown="moveRight()"onmouseup="stopMove()">Right</button> <button onmousedown="moveLeft()"onmouseup="stopMove()">Left</button><br><br> <button onmousedown="moveDown()"onmouseup="stopMove()">Down</button> </div> <script src="index.js"></script> </body> </html> index.js var gamePaddle; var gameObstacle = []; function startGame() { gamePaddle = new component(30, 30, "#f00", 10, 120); gameObstacle = new component(10, 200, "green", 300, 120); myGameArea.start(); } var myGameArea = { canvas: document.createElement("canvas"), //<canvas></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.frameNo = 0; this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', (e) => { myGameArea.key = e.keyCode; }) window.addEventListener('keyup', (e) => { myGameArea.key = false; }) }, clear: function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); }, stop: function() { clearInterval(this.interval); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.x = x; this.y = y; this.speedX = 0; this.speedY = 0; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function() { this.x += this.speedX; this.y += this.speedY; } this.crashWith = function(otherobj) { var myLeft = this.x; var myRight = this.x + (this.width); var myTop = this.y; var myBottom = this.y + (this.height); var otherLeft = otherobj.x; var otherRight = otherobj.x + (otherobj.width); var otherTop = otherobj.y; var otherBottom = otherobj.y + (otherobj.height); var crash = true; if((myBottom < otherTop) || (myTop > otherBottom) || (myRight < otherLeft) || (myLeft > otherRight)) { crash = false; } return crash; } } function updateGameArea() { var x, y; for (let i = 0; i < gameObstacle.length; i+= 1) { if (gamePaddle.crashWith(gameObstacle[i])) { myGameArea.stop(); return; } } myGameArea.clear(); myGameArea.frameNo += 1; if (myGameArea.frameNo == 1 || eachInt(150)) { x = myGameArea.canvas.width; y = myGameArea.canvas.height - 200; gameObstacle.push(new component(10, 200, "green", x, y)); } for (let i = 0; i < gameObstacle.length; i+= 1) { gameObstacle[i].x -= 1; gameObstacle.update(); } gamePaddle.newPos(); gamePaddle.speedX += 0; gamePaddle.speedY += 0; if (myGameArea.key && myGameArea.key == 37) {gamePaddle.speedX = -1; } if (myGameArea.key && myGameArea.key == 39) {gamePaddle.speedX = 1; } if (myGameArea.key && myGameArea.key == 38) {gamePaddle.speedY = -1; } if (myGameArea.key && myGameArea.key == 40) {gamePaddle.speedY = 1; } gamePaddle.update(); /*if (gamePaddle.crashWith(gameObstacle)) { myGameArea.stop(); } else { myGameArea.clear(); gamePaddle.newPos(); gameObstacle.update(); gameObstacle.x -= 1; gamePaddle.speedX += 0; gamePaddle.speedY += 0; if (myGameArea.key && myGameArea.key == 37) {gamePaddle.speedX = -1; } if (myGameArea.key && myGameArea.key == 39) {gamePaddle.speedX = 1; } if (myGameArea.key && myGameArea.key == 38) {gamePaddle.speedY = -1; } if (myGameArea.key && myGameArea.key == 40) {gamePaddle.speedY = 1; } gamePaddle.update(); }*/ } function eachInt(n) { if((myGameArea.frameNo / n) % 1 == 0) { return true; } return false; } function moveUp() { gamePaddle.speedY -= 1; } function moveDown() { gamePaddle.speedY += 1; } function moveRight() { gamePaddle.speedX -= 1; } function moveLeft() { gamePaddle.speedX += 1; } function stopMove() { gamePaddle.speedX = 0; gamePaddle.speedY = 0; } I'm not understanding why it is showing an error, even though gameObstacle is an array. Link to comment Share on other sites More sharing options...
Ingolme Posted January 6, 2021 Report Share Posted January 6, 2021 It's not an array because you overwrote the array with an object of type "component" on this line: gameObstacle = new component(10, 200, "green", 300, 120); 1 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