// Created by Beth // Created by Beth //feel free to edit this code! but if you do please tag me in the //comment section so I can see what you created! 😋 window.onload = function () { alert("flick to move! \n Avoid the Boxes! \n Colect the coins! \n(this code took me three full days to code so let me know if you like it ! 😊)"); let game = new Game (50, "black"); } //setting image width and height Based on device width and height class Sprite { constructor (game, x, y, width, height, image= 0) { this.game = game; this.pos = { x, y }; this.rect = { x: x - width / 2, y: y - height / 2, width, height }; this.vel = { x: 0, y: 0 }; if (image) { this.img = new Image(width, height); this.img.src = image; } else this.img = 0; } // image moving draw () { if (this.img) { this.game.ctx.drawImage(this.img, this.rect.x, this.rect.y, this.rect.width, this.rect.height); } else { this .game.ctx.fillStyle = "red"; this.game.ctx.fillRect(this.rect.x, this.rect.y, this.rect.width, this.rect.height); } } update () { this.rect.x = this.pos.x - this.rect.width / 2; this.rect.y = this.pos.y - this.rect.height / 2; } collidePoint (pt) { return pt[0] > this.rect.x && pt[0] < this.rect.x + this.rect.width && pt[1] > this.rect.y && pt[1] < this.rect.y + this.rect.height; } collideRect (rect) { return this.rect.x + this.rect.width > rect.x && this.rect.x < rect.x + rect.width && this.rect.y + this.rect.height > rect.y && this.rect.y < rect.y + rect.height; } } class Perso extends Sprite { constructor (game, x_, y_, w, h, img) { let pos = [game.c.width / 2 + game.plotPxSize * (x_ - 2), game.c.height / 2 + game.plotPxSize * (y_ - 2)]; super(game, pos[0], pos[1], w, h, img); this.inBoardPos = [x_, y_]; this.speed = 50; this.moving = false; } move (dir) //moving circle { if (this.moving) return switch (dir) { case "up": if (!this.inBoardPos[1] - 1) { this.moveOf(0, -this.game.plotPxSize, this.speed); this.inBoardPos[1] -= 1; } break; case "right": if (this.inBoardPos[0] + 1 <= 4) { this.moveOf(this.game.plotPxSize, 0, this.speed); this.inBoardPos[0] += 1; } break; case "down": if (this.inBoardPos[1] + 1 <= 4) { this.moveOf(0, this.game.plotPxSize, this.speed); this.inBoardPos[1] += 1; } break; case "left": if (!this.inBoardPos[0] - 1) { this.moveOf(-this.game.plotPxSize, 0, this.speed); this.inBoardPos[0] -= 1; } break; } } async moveOf (x, y, ms) { //time game is being played in ms this.moving = true; requestAnimationFrame(function (timestamp) { this.moveOf_(timestamp, this.pos.x, this.pos.y, x, y, ms, timestamp); }.bind(this)); } moveOf_ (timestamp, ox, oy, x, y, ms, starttime) { let runtime = timestamp - starttime; let progress = runtime / ms; progress = Math.min(progress, 1); this.pos.x = ox + x * progress; this.pos.y = oy + y * progress; if (runtime < ms) requestAnimationFrame(function (timestamp) { this.moveOf_(timestamp, ox, oy, x, y, ms, starttime); }.bind(this)); else this.moving = false; } //pause button (click head to pause) isClicked () { this.game.playRemoveListeners(); this.game.state = "pause"; this.game.pauseSetupListeners(); this.game.pauseLoop(); } update () { if (this.collideRect(this.game.ruby.rect)) { this.game.score += 1; do var newPos = [Math.floor(Math.random() * 5) + 0, Math.floor(Math.random() * 5) + 0]; while (newPos === this.game.ruby.inBoardPos) this.game.ruby.moveTo(...newPos); } super.update(); } } class Ruby extends Sprite { constructor (game, x_, y_, w, h, img= 0) { let pos = [game.c.width / 2 + game.plotPxSize * (x_ - 2), game.c.height / 2 + game.plotPxSize * (y_ - 2)]; super(game, pos[0], pos[1], w, h, img); this.inBoardPos = [x_, y_]; this.sound = new Audio(""); } moveTo (x_, y_) { this.pos.x = this.game.c.width / 2 + this.game.plotPxSize * (x_ - 2); this.pos.y = this.game.c.height / 2 + this.game.plotPxSize * (y_ - 2); } } class Rocket extends Sprite { constructor (game, x_, y_, w, h, dir, img= 0) { let from = [game.c.width / 2 + game.plotPxSize * (x_ - 2), game.c.height / 2 + game.plotPxSize * (y_ - 2)]; switch (dir.join(" ")) { case "0 -1": from[1] = game.c.height + h / 2; break; case "1 0": from[0] = -w / 2; break; case "0 1": from[1] = -h / 2; break; case "-1 0": from[0] = game.c.width + w / 2; break; } //warning sign super(game, from[0], from[1], w, h, img); this.dir = dir; this.alive = true; this.speed = 5; this.invocatedDate = this.game.lastRocketTime; this.warningImage = new Image(); this.warningImage.src = "https://cdn3.iconfinder.com/data/icons/picons-weather/57/53_warning-512.png"; this.warningDuration = 2000; } update () { if (!this.alive) return; let d = new Date(); if (d.getTime() < this.invocatedDate + this.warningDuration) { } else { this.pos.x += this.dir[0] * this.speed; this.pos.y += this.dir[1] * this.speed; if (this.rect.x + this.rect.width < 0 || this.rect.x > this.game.c.width || this.rect.y + this.rect.height < 0 || this.rect.y > this.game.c.height) { this.alive = false; } //Game Over alert if (this.collideRect(this.game.perso.rect)) { alert("GAME OVER"); this.alive = false; } super.update(); } } draw () { let d = new Date(); let current = d.getTime() - this.invocatedDate; if (current < this.warningDuration) { let pos = [this.rect.x, this.rect. y]; switch (this.dir.join(" ")) { case "0 -1": pos[1] -= this.rect.height; break; case "1 0": pos[0] += this.rect.width * this.dir[0]; break; case "0 1": pos[1] += this.rect.height; break; case "-1 0": pos[0] -= this.rect.width; break; } this.game.ctx.globalAlpha = current * 1 / this.warningDuration; this.game.ctx.drawImage(this.warningImage, pos[0], pos[1], this.rect.width, this.rect.height); this.game.ctx.globalAlpha = 1; } else { super.draw(); } } } class Game { constructor (plotPxSize, bgColor) { this.setup(); this.plotPxSize = plotPxSize; this.bgColor = bgColor; this.perso = new Perso(this, 2, 2, this.plotPxSize, //head image this.plotPxSize, "https://dl.dropbox.com/s/m2ny5lswarkuurt/Photo%20Jul%2014%2C%209%2035%2036%20PM.jpg?raw=1"); //board image this.board = new Sprite(this, this.c.width / 2, this.c.height / 2, this.plotPxSize * 5, this.plotPxSize * 5, "https://dl.dropbox.com/s/a0ocy2i087yomi7/Photo%20Jul%2014%2C%209%2039%2020%20PM.jpg?raw=1"); //coin image this.ruby = new Ruby(this, 4, 0, this.plotPxSize, this.plotPxSize, "https://dl.dropbox.com/s/3cqcl8qpmva9691/Photo%20Jul%2014%2C%209%2028%2046%20PM.jpg?raw=1"); this.rockets = [this.newRocket()]; this.delayBetweenRockets = 1500; this.score = 0; this.state = "pause"; this.pauseSetupListeners(); this.pauseLoop(); } setup () { //getting canvas this.c = document.getElementById("cvas"); this.c.width = innerWidth; this.c.height = innerHeight - 4; // ? this.ctx = this.c.getContext("2d"); } pauseSetupListeners () { this.pauseClickListenerHandler = this.pauseClickListener.bind(this); this.c.addEventListener("click", this.pauseClickListenerHandler); } pauseRemoveListeners () { this.c.removeEventListener("click", this.pauseClickListenerHandler); } pauseLoop () { this.pauseDraw(); if (this.state === "pause") requestAnimationFrame(this.pauseLoop.bind(this)); } playSetupListeners () { //start screen this.playClickListenerHandler = this.playClickListener.bind(this); this.playTouchStartListenerHandler = this.playTouchStartListener.bind(this); this.playTouchEndListenerHandler = this.playTouchEndListener.bind(this); this.c.addEventListener("touchstart", this.playTouchStartListenerHandler); this.c.addEventListener("touchend", this.playTouchEndListenerHandler); this.c.addEventListener("click", this.playClickListenerHandler); } playRemoveListeners () { this.c.removeEventListener("click", this.playClickListenerHandler); this.c.removeEventListener("touchstart", this.playTouchStartListenerHandler); this.c.removeEventListener("touchend", this.playTouchEndListenerHandler); } playLoop () { this.playDraw(); this.playUpdate(); if (this.state === "play") requestAnimationFrame(this.playLoop.bind(this)); } pauseDraw () { //pause screen this.ctx.fillStyle = "black"; this.ctx.fillRect(0, 0, this.c.width, this.c.height); this.ctx.fillStyle = "white"; this.ctx.font = "30px Arial"; this.ctx.textAlign = "center"; this.ctx.textBaseline = "alphabetic"; this.ctx.fillText("Click anywhere to start/continue.", this.c.width / 2, this.c.height / 2); } playUpdate () { this.perso.update(); this.ruby.update(); for (let i= 0; i < this.rockets.length; i++) { if (!this.rockets[i].alive) { this.rockets.splice(i, 1); } } this.rockets.forEach((rocket) => { rocket.update(); }); let d = new Date(); if (d.getTime() > this.lastRocketTime + this.delayBetweenRockets) { this.rockets.push(this.newRocket()); this.delayBetweenRockets = Math.max(500, this.delayBetweenRockets - 10); } } newRocket () { let pt = [Math.floor(Math.random() * 5) + 0, Math.floor(Math.random() * 5) + 0]; let dir = [[0, -1], [1, 0], [0, 1], [-1, 0]][Math.floor(Math.random() * 4) + 0, Math.floor(Math.random() * 4) + 0]; //blocks let d = new Date(); let head = ["https://dl.dropbox.com/s/1fq58mm7ld20j2z/Photo%20Jul%2014%2C%209%2045%2046%20PM.jpg?raw=1"] this.lastRocketTime = d.getTime(); return new Rocket(this, ...pt, this.plotPxSize, this.plotPxSize, dir, head); } playDraw () { this.ctx.fillStyle = this.bgColor; this.ctx.fillRect(0, 0, this.c.width, this.c.height); this.board.draw(); this.ctx.strokeStyle = "lightblue"; for (let i= 1; i < 5; i++) { let delta = i * this.plotPxSize; this.ctx.beginPath(); this.ctx.moveTo(this.board.rect.x + delta, 0); this.ctx.lineTo(this.board.rect.x + delta, this.c.height); this.ctx.moveTo(0, this.board.rect.y + delta); this.ctx.lineTo(this.c.width, this.board.rect.y + delta); this.ctx.stroke(); } this.ruby.draw(); this.perso.draw(); this.rockets.forEach((rocket) => { rocket.draw(); }); this.ctx.fillStyle = "white"; this.ctx.font = "25px Arial"; this.ctx.textAlign = "center"; this.ctx.textBaseline = "alphabetic"; this.ctx.fillText("Click on the blue circle to pause the game.", this.c.width / 2, this.c.height - 10); this.ctx.font = "20px Arial"; this.ctx.textAlign = "left"; this.ctx.textBaseline = "hanging"; this.ctx.fillText(this.score.toString() + " ~ " + this.delayBetweenRockets.toString() + "ms", 10, 10); } pauseClickListener (e) { this.pauseRemoveListeners(); this.state = "play"; this.playSetupListeners(); this.playLoop(); } playTouchStartListener (e) { this.touchStartPos = [e.touches[0].pageX, e.touches[0].pageY]; } playTouchEndListener (e) { if (e.touches.length !== 0) return let s = 10; let move = [this.touchStartPos[0] - e.changedTouches[0].pageX, this.touchStartPos[1] - e.changedTouches[0].pageY] if (Math.abs(move[0]) < s && Math.abs(move[1]) < s) { } else if (Math.abs(move[0]) > Math.abs(move[1])) { (move[0] > 0) ? this.perso.move("left") : this.perso.move("right"); } else { (move[1] > 0) ? this.perso.move("up") : this.perso.move("down"); } } playClickListener (e) { if (this.perso.collidePoint([e.pageX, e.pageY])) this.perso.isClicked(); } }

A Game