window.onload = function() { alert("tap to jump") function gameStart() { gameArea.start() } var point = 0 //our obstacles var obstacles = [] var upObstacles = [] var passedObstacles = [] var passedUpObstacles = [] var totalScore = 0; function everyInterval(n) { if(gameArea.frame%n == 0) return true return false } upGap = randUpGap() function randUpGap() { return Math.floor(200+Math.random()*(500-300+1)) } gap = randGap() function randGap() { return Math.floor(200+Math.random()*(300-200+1)) } function jump() { person.speedY = -2 } var scoreText = { x: 20, y: 50, update: function(text) { gameArea.context.fillStyle = "black" gameArea.context.font = "30px Consolas" gameArea.context.fillText(text, this.x, this.y) } } var person = { x: 20, y: 470, speedY: 0, update: function() { gameArea.context.fillRect(this.x, this.y, 30, 30) }, newPos: function() { if(this.y<280) { this.speedY = 2 } this.y += this.speedY if(this.speedY == 2 && this.y ==470) { this.speedY = 0 } }, crashwith: function(obs) { if(this.x+30 > obs.x && this.x < obs.x+obs.width && this.y+30 > obs.y) { return true } return false }, crashwithUp: function(obs) { if(this.x+30 > obs.x && this.x < obs.x+obs.width && this.y < obs.y+obs.height) { return true } return false } } function obstacle() { //get a random height and width of an obstacle this.height = Math.floor(20+Math.random()*(100-20+1)) this.width = Math.floor(10+Math.random()*(20-10+1)) this.x = gameArea.canvas.width this.y = gameArea.canvas.height-this.height //draw our obstacle this.draw = function () { gameArea.context.fillRect(this.x, this.y, this.width, this.height) } } function upObstacle() { //get a random height and width of an obstacle this.height = Math.floor(50+Math.random()*(130-50+1)) this.width = Math.floor(10+Math.random()*(20-10+1)) this.x = gameArea.canvas.width this.y = gameArea.canvas.height-350 //draw our obstacle this.draw = function () { gameArea.context.fillRect(this.x, this.y, this.width, this.height) } } //the game area var body = document.querySelector('body') var crashed = document.querySelector('.crashed') var collectScore = document.querySelector('.score') var gameArea = { canvas: document.createElement('canvas'), //start drawing the game area start: function() { this.canvas.height = 500; this.canvas.width = body.getBoundingClientRect().width; document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.context = this.canvas.getContext("2d") this.frame = 0 this.score = 0 scoreText.update("Score: 0") this.interval = setInterval(this.updateGameArea, 5) window.addEventListener('click', jump) }, updateGameArea: function() { for(i=0; i

obstacle game