Picture Pieces

From 7e6648902b262484bc0aac824c3784b1ae4b8591 Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Sun, 12 Apr 2020 14:42:03 -0500 Subject: Update games, add scores --- src/pp/static/index.html | 35 ++++++ src/pp/static/main.js | 269 +++++++++++++++++++++++++++++++++++++++++++++ src/pp/static/templates.js | 18 +++ 3 files changed, 322 insertions(+) create mode 100644 src/pp/static/index.html create mode 100644 src/pp/static/main.js create mode 100644 src/pp/static/templates.js (limited to 'src/pp/static') diff --git a/src/pp/static/index.html b/src/pp/static/index.html new file mode 100644 index 0000000..a245b6b --- /dev/null +++ b/src/pp/static/index.html @@ -0,0 +1,35 @@ + + + + + Picture Pieces + + + + + + +

+ + + + + + diff --git a/src/pp/static/main.js b/src/pp/static/main.js new file mode 100644 index 0000000..79d6414 --- /dev/null +++ b/src/pp/static/main.js @@ -0,0 +1,269 @@ +// The callbacks to be called each frame on update, +// and on draw +// The interval object +var gameInterval, selectedX, selectedY, timeElapsed, timeStart, frame; +let width = 800; +let height = 600; +let fps = 30; +let gameOver = false + +let mouseX, mouseY; + +let IMG_WIDTH = 33 +let IMG_HEIGHT = 39 +let TILE_WIDTH = 2 + IMG_WIDTH +let TILE_HEIGHT = 2 + IMG_HEIGHT + +// leave first two blank +var board + +window.onload = function () { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + canvas.width = width; + canvas.height = height; + document.addEventListener("mousedown", mouseDownCallback); + document.addEventListener("mouseup", mouseUpCallback); + document.addEventListener("mousemove", function(e){ + mouseX = e.x + mouseY = e.y + }); + init(); +} + +function game() { + frame++ + updateCallback(); + drawCallback(); +} + +function init() { + gameInterval = setInterval(game, 1000 / fps); + timeStart = Math.floor(new Date().getTime() / 1000) + timeElapsed = 0 + frame = 0 + loadTemplate() +} + +function shuffle(a) { + var j, x, i; + for (i = a.length - 1; i > 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + x = a[i]; + a[i] = a[j]; + a[j] = x; + } + return a; +} + +function swapTiles(){ + count = 0 + template = [] + for (var x = 0; x < board.length; x++) { + template.push([]) + for (var y = 0; y < board[x].length; y++) { + template[x].push(undefined) + template[x][y] = board[x][y] + if(board[x][y] != undefined){ + count++ + } + } + } + for (var i = 0; i < count/2; i++) { + items.push(i) + items.push(i) + } + shuffle(items) + board = [] + for (var x = 0; x < template.length; x++) { + board.push([]) + for (var y = 0; y < template[x].length; y++) { + board[x].push(undefined) + if (template[x][y] != undefined) { + board[x][y] = items.pop() + } + } + } +} + +function loadTemplate() { + template = dragon + items = [] + for (var i = 0; i < 8; i++) { + items.push(i) + items.push(i) + } + shuffle(items) + board = [] + for (var x = 0; x < template.length; x++) { + board.push([]) + for (var y = 0; y < template[x].length; y++) { + board[x].push(undefined) + if (template[x][y]) { + board[x][y] = items.pop() + } + } + } +} + +var updateCallback = function () { + timeElapsed = Math.floor(new Date().getTime() / 1000) - timeStart + + var done = true + for (var x = 0; x < board.length; x++) { + for (var y = 0; y < board[x].length; y++) { + if (board[x][y] != undefined) { + done = false + } + } + } + if (done) { + clearInterval(gameInterval) + gameOver = true + } +} + +var drawCallback = function () { + font(48); + ctx.fillStyle = "#99b3ff"; + ctx.fillRect(0, 0, width, height); + ctx.fillStyle = "#b30000" + ctx.fillRect(0, 0, 800, 50) + ctx.fillRect(600, 0, 200, 600) + ctx.lineWidth = 2 + ctx.strokeStyle = "#ffcc00" + ctx.fillStyle = "#ffcc00" + ctx.strokeRect(1, 50, 600, 549) + font(50) + ctx.fillText("Picture Pieces", 100, 36) + + if(gameOver){ + ctx.fillStyle = "#000080" + font(50) + ctx.fillText("Congratuations", 100, 200) + font(24) + var minutes = Math.floor(timeElapsed / 60) + var seconds = timeElapsed % 60 + ctx.fillText("Your final time was " + minutes + ":" + seconds, 110, 240) + return + } + + + for (var x = board.length-1; x >= 0; x--) { + for (var y = 0; y < board[x].length; y++) { + if (board[x][y] == undefined) { + continue + } + ctx.fillStyle = "#ffe6e6" + ctx.beginPath() + ctx.moveTo(x * TILE_WIDTH, y * TILE_HEIGHT) + ctx.lineTo(x * TILE_WIDTH-6, y * TILE_HEIGHT+6) + ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6) + ctx.lineTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT) + ctx.closePath() + ctx.fill(); + + ctx.fillStyle = '#ff9999' + ctx.beginPath() + ctx.moveTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT) + ctx.lineTo((x+1) * TILE_WIDTH, (y+1) * TILE_HEIGHT) + ctx.lineTo((x+1) * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6) + ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6) + ctx.closePath() + ctx.fill(); + + ctx.lineWidth + ctx.strokeStyle = "#ffcc00" + ctx.beginPath() + ctx.moveTo(x * TILE_WIDTH, y * TILE_HEIGHT) + ctx.lineTo(x * TILE_WIDTH-6, y * TILE_HEIGHT+6) + ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6) + ctx.lineTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT) + ctx.closePath() + ctx.stroke(); + ctx.beginPath() + ctx.moveTo(x * TILE_WIDTH, (y+1) * TILE_HEIGHT) + ctx.lineTo((x+1) * TILE_WIDTH, (y+1) * TILE_HEIGHT) + ctx.lineTo((x+1) * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6) + ctx.lineTo(x * TILE_WIDTH-6, (y+1) * TILE_HEIGHT+6) + ctx.closePath() + ctx.stroke(); + + // ctx.strokeRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT) + } + } + + ctx.strokeStyle = "#ffcc00" + for (var x = 0; x < board.length; x++) { + for (var y = 0; y < board[x].length; y++) { + if (board[x][y] == undefined) { + continue + } + ctx.strokeRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT) + ctx.drawImage(document.getElementById("img" + board[x][y]), 1 + x * TILE_WIDTH, 1 + y * TILE_HEIGHT) + } + } + + + ctx.strokeStyle = "#ffcc00" + ctx.fillStyle = "#ffcc00" + font(24) + ctx.fillText("Time: " + timeElapsed, 600, 36) + ctx.fillText("Shuffle", 650, 130) + + if(650 - 10 < mouseX && mouseX < 700+10 && 150-10 < mouseY && mouseY < 150+10){ + ctx.fillStyle = "#ffee22" + } else { + ctx.fillStyle = "#ffcc00" + } + ctx.beginPath(); + ctx.moveTo(700, 150+10) + ctx.arc(650, 150, 10, Math.PI/2, 3*Math.PI/2) + ctx.lineTo(700, 150-10) + ctx.arc(700, 150, 10, 3*Math.PI/2, Math.PI/2) + ctx.fill(); + // ctx.fillRect(625, 125, 150, 20) + + ctx.strokeStyle = "red" + if (selectedX != undefined && selectedY != undefined && board[selectedX][selectedY] != undefined) { + ctx.beginPath(); + let rad = TILE_WIDTH / 2 + Math.cos(frame / 7) * 2 + ctx.arc(selectedX * TILE_WIDTH + TILE_WIDTH / 2, selectedY * TILE_HEIGHT + TILE_HEIGHT / 2, rad, 0, 2 * Math.PI) + ctx.stroke() + } +} + +var mouseDownCallback = function (e) { + if(650 - 10 < mouseX && mouseX < 700+10 && 150-10 < mouseY && mouseY < 150+10){ + swapTiles(board) + return + } + + var tileX = Math.floor(e.x / TILE_WIDTH) + var tileY = Math.floor(e.y / TILE_HEIGHT) + if (board[tileX] != undefined && board[tileX][tileY] != undefined) { + if (selectedX != undefined && + selectedY != undefined) { + if (board[selectedX][selectedY] != undefined && + (tileX != selectedX || tileY != selectedY) && + (board[tileX + 1][tileY] == undefined || board[tileX - 1][tileY] == undefined)) { + if (board[selectedX][selectedY] == board[tileX][tileY]) { + board[selectedX][selectedY] = undefined + board[tileX][tileY] = undefined + } + } + } + if (board[tileX + 1][tileY] == undefined || board[tileX - 1][tileY] == undefined) { + selectedX = tileX + selectedY = tileY + } + } +} + +var mouseUpCallback = function (e) { + +} + +function font(size) { + ctx.font = size + "px Courier"; +} diff --git a/src/pp/static/templates.js b/src/pp/static/templates.js new file mode 100644 index 0000000..8e4c032 --- /dev/null +++ b/src/pp/static/templates.js @@ -0,0 +1,18 @@ +dragon = [ + [], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, true , undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, true , true , undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, true , true , true , true , true , undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, true , undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], +] \ No newline at end of file -- cgit v1.2.3