aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/highscores.js10
-rw-r--r--src/index.html12
-rw-r--r--src/index.js15
-rw-r--r--src/pinball/server.js3
-rw-r--r--src/pp/server.js10
-rw-r--r--src/pp/static/index.html35
-rw-r--r--src/pp/static/main.js269
-rw-r--r--src/pp/static/templates.js18
-rw-r--r--src/pp/tiles.pngbin0 -> 292183 bytes
-rw-r--r--src/quadrowple/server.js3
-rw-r--r--src/scores.html51
-rw-r--r--src/server.js32
-rw-r--r--src/snake/index.html211
-rw-r--r--src/stacker/index.html95
14 files changed, 624 insertions, 140 deletions
diff --git a/src/highscores.js b/src/highscores.js
new file mode 100644
index 0000000..e735eee
--- /dev/null
+++ b/src/highscores.js
@@ -0,0 +1,10 @@
+function submitScore(game, score, username){
+ if(username == undefined){
+ username = prompt("Enter a name to submit score", "");
+ }
+ if (!(username == null || username == "")) {
+ const request = new Request(`/setScore?game=${game}&username=${username}&score=${score}`);
+ fetch(request);
+ }
+ return username
+} \ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 21b2dd2..17b9655 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,17 +10,23 @@
<body>
<div>
- Arcade
+ <a href="/highscores">High score list</a>
+ </div>
+
+ <div>
+ <h1>Games</h1>
+ <h2>Arcade</h2>
<ul>
<li><a href="/pinball">Pinball (demo)</a></li>
<li><a href="/snake">Snake</a></li>
<li><a href="/stacker">Stacker</a></li>
- <li><a href="/math">Math mini agmes</a></li>
+ <li><a href="/math">Math mini games</a></li>
+ <li><a href="/pp/index.html">Picture pieces</a></li>
<li><a href="https://seafarerscafe.itch.io/cosmic-cargo">Cosmic Cargo (itch.io)</a></li>
</ul>
</div>
<div>
- Multiplayer
+ <h2>Multiplayer</h2>
<ul>
<li><a href="/ur">Royal Game of Ur</a></li>
<li><a href="/quadrowple">Quadrowple</a></li>
diff --git a/src/index.js b/src/index.js
index 647bf3e..176d432 100644
--- a/src/index.js
+++ b/src/index.js
@@ -46,6 +46,20 @@ async function sync(alter, force, callback) {
function setUpModels() {
const models = {
+ "scores": database.define('score', {
+ username: {
+ type: Sequelize.STRING,
+ allowNull: false,
+ },
+ score: {
+ type: Sequelize.INTEGER,
+ allowNull: false,
+ },
+ game: {
+ type: Sequelize.STRING,
+ allowNull: false,
+ }
+ })
}
return models;
}
@@ -60,5 +74,6 @@ server.load("./snake/server", models, jwtFunctions, database)
server.load("./stacker/server", models, jwtFunctions, database)
server.load("./pinball/server", models, jwtFunctions, database)
server.load("./math/server", models, jwtFunctions, database)
+server.load("./pp/server", models, jwtFunctions, database)
server.listen(config.port);
diff --git a/src/pinball/server.js b/src/pinball/server.js
index 2bf88d5..ae215b2 100644
--- a/src/pinball/server.js
+++ b/src/pinball/server.js
@@ -1,6 +1,3 @@
-const path = require('path');
-const fs = require('fs');
-
function setUpRoutes(server, models, jwtFunctions, database) {
server.get('/pinball', (req, res) => res.sendFile(__dirname + "/index.html"))
server.get('/pinball/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css"))
diff --git a/src/pp/server.js b/src/pp/server.js
new file mode 100644
index 0000000..c1a5370
--- /dev/null
+++ b/src/pp/server.js
@@ -0,0 +1,10 @@
+const express = require('express');
+
+function setUpRoutes(server, models, jwtFunctions, database) {
+ // server.get('/pp', (req, res) => res.sendFile(__dirname + "/static/index.html"))
+ server.use('/pp', express.static(__dirname + "/static"))
+}
+
+module.exports = {
+ setUpRoutes
+};
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 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <title>Picture Pieces</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <style>
+ canvas {
+ /* transform-origin: top left; */
+ /* transform: scale(4, 4); */
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ </style>
+</head>
+
+<body style="padding:0; margin:0; overflow:hidden;">
+ <canvas id="canvas"></canvas>
+ <script src="/pp/templates.js"></script>
+ <script src="/pp/main.js"></script>
+ <div style="display: none">
+ <img src="/pp/tiles/0.png" id="img0">
+ <img src="/pp/tiles/1.png" id="img1">
+ <img src="/pp/tiles/2.png" id="img2">
+ <img src="/pp/tiles/3.png" id="img3">
+ <img src="/pp/tiles/4.png" id="img4">
+ <img src="/pp/tiles/5.png" id="img5">
+ <img src="/pp/tiles/6.png" id="img6">
+ <img src="/pp/tiles/7.png" id="img7">
+ </div>
+</body>
+
+</html>
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
diff --git a/src/pp/tiles.png b/src/pp/tiles.png
new file mode 100644
index 0000000..e381837
--- /dev/null
+++ b/src/pp/tiles.png
Binary files differ
diff --git a/src/quadrowple/server.js b/src/quadrowple/server.js
index b44c055..3474c6b 100644
--- a/src/quadrowple/server.js
+++ b/src/quadrowple/server.js
@@ -1,5 +1,4 @@
-const path = require('path');
-const fs = require('fs');
+const uuidv4 = require('uuid/v4');
function setUpRoutes(server, models, jwtFunctions, database) {
diff --git a/src/scores.html b/src/scores.html
new file mode 100644
index 0000000..f3b1050
--- /dev/null
+++ b/src/scores.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <title>High Scores</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->
+ <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+ <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+</head>
+
+<body>
+ <script>
+ window.onload = function () {
+ var transactionData = new Vue({
+ el: '#main',
+ data: {
+ scores: [],
+ },
+ created() {
+ fetch(new Request(`/scores`)).then(response => response.json())
+ .then(response => this.scores = response);
+
+ },
+ });
+ }
+ </script>
+ <div id="main">
+ <h1>High Scores</h1>
+ <div v-for="game in Object.keys(scores)">
+ <h2>{{game}}</h2>
+ <table class="table">
+ <tr>
+ <th>Rank</th>
+ <th>Score</th>
+ <th>Username</th>
+ <th>Date</th>
+ </tr>
+ <tr v-for="(item, i) in scores[game]">
+ <td>{{i+1}}</td>
+ <td>{{item.score}}</td>
+ <td>{{item.username}}</td>
+ <td>{{item.createdAt.substring(0, 16).replace("T", " ")}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+</body>
+
+</html> \ No newline at end of file
diff --git a/src/server.js b/src/server.js
index ba5cff9..0fe5b29 100644
--- a/src/server.js
+++ b/src/server.js
@@ -1,24 +1,18 @@
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
-//const request = require('request');
-const crypto = require('crypto');
-const uuidv4 = require('uuid/v4');
-const path = require('path');
-const fs = require('fs');
-const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')));
+const Op = require('sequelize').Op;
const server = express();
server.use(cookieParser())
server.use(bodyParser.json());
-//server.use(bodyParser.urlencoded({ extended: true }));
function listen(port) {
server.listen(port, () => console.info(`Listening on port ${port}!`));
}
-function load(gamePath, models, jwtFunctions, database){
+function load(gamePath, models, jwtFunctions, database) {
const game = require(gamePath);
game.setUpRoutes(server, models, jwtFunctions, database);
}
@@ -30,6 +24,28 @@ function setUpRoutes(models, jwtFunctions, database) {
})
server.get('/', (req, res) => res.sendFile(__dirname + "/index.html"))
+ server.get('/setScore', (req, res, next) => {
+ let game = req.query.game
+ let username = req.query.username
+ let score = req.query.score
+ console.log(game, username, score)
+ models.scores.create({
+ game: req.query.game,
+ username: req.query.username,
+ score: req.query.score
+ })
+ res.status(200)
+ })
+ server.get('/scores', async (req, res, next) => {
+ var games = await database.query(`SELECT DISTINCT game FROM scores`, { type: database.QueryTypes.SELECT });
+ var scoresByGames = {}
+ for(var i = 0; i < games.length; i++){
+ scoresByGames[games[i].game] = await models.scores.findAll({ atttributes: ["username", "score", "createdAt"], where : {game: {[Op.eq]: games[i].game}}, order: [['score', 'DESC']], limit: 15}).map(x => x.get({ plain: true }))
+ };
+ res.status(200).send(scoresByGames);
+ })
+ server.get('/highscore.js', (req, res) => res.sendFile(__dirname + "/highscores.js"))
+ server.get('/highscores', (req, res) => res.sendFile(__dirname + "/scores.html"))
}
module.exports = {
diff --git a/src/snake/index.html b/src/snake/index.html
index eb11f86..ea982cf 100644
--- a/src/snake/index.html
+++ b/src/snake/index.html
@@ -1,83 +1,144 @@
-<center>
+<!doctype html>
+<html lang="en">
+
+<head>
+ <title>Snake</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->
+</head>
+
+<body style="padding:0; margin:0; overflow:hidden;">
<canvas width="400" height="400" id="canvas"></canvas>
-</center>
-<script>
- window.onload = function(){
- canvas = document.getElementById("canvas");
- ctx = canvas.getContext("2d");
-// canvas.height = 300;
-// canvas.width = 400;
- document.addEventListener("keydown",keyPush);
- setInterval(game, 1000/10);
- }
- var tileCountWidth = 40;
- var tileCountHeight = 40;
- var tileWidth = canvas.width/tileCountWidth;
- var tileHeight = canvas.height/tileCountHeight;
- var snake = [];
- var x = randomInt(tileWidth);
- var y = randomInt(tileHeight);
- var vx = 1;
- var vy = 0;
- var apple = {};
- console.log(apple);
- setRandomCoords(apple);
- console.log(apple);
- var length = 5;
- function game(){
- color("black");
- ctx.fillRect(0,0,canvas.width, canvas.height);
- color("white");
- for(var i = 0; i < snake.length; i++){
- ctx.fillRect(snake[i].x*tileWidth, snake[i].y*tileHeight, tileWidth, tileHeight);
+ <script src="/highscore.js"></script>
+ <script>
+ var tileCountWidth = 40;
+ var tileCountHeight = 40;
+ var tileWidth = canvas.width / tileCountWidth;
+ var tileHeight = canvas.height / tileCountHeight;
+ var x, y;
+ var vx, vy;
+ var snake, apple;
+ var isGameOver;
+ var length, gameInterval, score;
+ var username = undefined
+ var inputThisFrame = false
+ window.onload = function () {
+ canvas = document.getElementById("canvas");
+ ctx = canvas.getContext("2d");
+ document.addEventListener("keydown", keyPush);
+ init();
}
- color("red");
- ctx.fillRect(apple.x*tileWidth, apple.y*tileHeight, tileWidth, tileHeight);
-
- x+=vx;
- y+=vy;
- snake.push({"x": x, "y": y});
- if(x==apple.x && y==apple.y){
- length++;
+ function init() {
+ snake = [];
+ x = randomInt(10);
+ y = randomInt(40);
+ vx = 1;
+ vy = 0;
+ apple = {};
+ isGameOver = false;
setRandomCoords(apple);
+ length = 5;
+ score = 0
+ if(gameInterval != undefined){
+ clearInterval(gameInterval)
+ }
+ gameInterval = setInterval(game, 1000 / 10);
}
+ function game() {
+ inputThisFrame = false
+ // DRAW
+ color("black");
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ color("white");
+ for (var i = 0; i < snake.length; i++) {
+ ctx.fillRect(snake[i].x * tileWidth, snake[i].y * tileHeight, tileWidth, tileHeight);
+ }
+ color("red");
+ ctx.fillRect(apple.x * tileWidth, apple.y * tileHeight, tileWidth, tileHeight);
+ if (isGameOver) {
+ color("blue");
+ font(32);
+ ctx.fillText("Game over!", 160, 200);
+ font(24);
+ ctx.fillText("(press any key)", 160, 240)
+ return // don't update
+ }
+
+ // UPDATE
+ x += vx;
+ y += vy;
+ for (var i = 0; i < snake.length; i++) {
+ if(snake[i].x == x && snake[i].y == y){
+ gameOver()
+ }
+ }
+ snake.push({ "x": x, "y": y });
+ if (x < 0 || y < 0 || x >= 40 || y >= 40) {
+ gameOver();
+ } else if (x == apple.x && y == apple.y) {
+ score++;
+ length++;
+ setRandomCoords(apple);
+ }
+
+ while (snake.length > length) {
+ snake.shift();
+ }
- while(snake.length > length){
- snake.shift();
}
+ function keyPush(e) {
+ if (isGameOver) {
+ init()
+ return
+ }
+ if (inputThisFrame) {
+ return
+ }
- }
- function keyPush(e){
- switch(e.keyCode){
- case 37:
- vx = -1;
- vy = 0;
- break;
- case 38:
- vx = 0;
- vy = -1;
- break;
- case 39:
- vx = 1;
- vy = 0;
- break;
- case 40:
- vx = 0;
- vy = 1;
- break;
+ switch (e.keyCode) {
+ case 37:
+ if (vx == 1) return
+ vx = -1;
+ vy = 0;
+ break;
+ case 38:
+ if (vy == 1) return
+ vx = 0;
+ vy = -1;
+ break;
+ case 39:
+ if (vx == -1) return
+ vx = 1;
+ vy = 0;
+ break;
+ case 40:
+ if (vy == -1) return
+ vx = 0;
+ vy = 1;
+ break;
+ }
+ inputThisFrame = true
+ }
+ function gameOver() {
+ isGameOver = true;
+ // clearInterval(gameInterval);
+ username = submitScore("snake", score, username);
}
- }
- function setRandomCoords(item){
- item.x = randomInt(tileWidth);
- item.y = randomInt(tileHeight);
- }
- function randomInt(max){
- return Math.floor(Math.random()*max);
- }
- function font(size){
- ctx.font=size+"px Courier";
- }
- function color(c){
- ctx.fillStyle=c;
- }
-</script>
+ function setRandomCoords(item) {
+ item.x = randomInt(40);
+ item.y = randomInt(40);
+ }
+ function randomInt(max) {
+ return Math.floor(Math.random() * max);
+ }
+ function font(size) {
+ ctx.font = size + "px Courier";
+ }
+ function color(c) {
+ ctx.fillStyle = c;
+ }
+ </script>
+</body>
+
+</html> \ No newline at end of file
diff --git a/src/stacker/index.html b/src/stacker/index.html
index eb256a6..1a76e2b 100644
--- a/src/stacker/index.html
+++ b/src/stacker/index.html
@@ -10,15 +10,17 @@
<body style="padding:0; margin:0; overflow:hidden;">
<canvas id="canvas"></canvas>
+ <script src="/highscore.js"></script>
<script>
var gameInterval, canvas, ctx;
var score, t, isGameOver, mouseX, mouseY, scaleX, scaleY, selected, stack, next, v, perfect;
- let VELOCITY = 15;
+ var username = undefined;
+ let VELOCITY = 3;
function init() {
- next = {left: 0, width:200};
+ next = { left: 0, width: 200 };
v = VELOCITY;
- stack = [{left: 100, width:200}];
+ stack = [{ left: 100, width: 200 }];
score = 0;
isGameOver = false;
@@ -27,7 +29,7 @@
t = 0;
selected = -1;
perfect = 0;
- gameInterval = setInterval(game, 1000 / 10);
+ gameInterval = setInterval(game, 1000 / 60);
}
window.onload = function () {
@@ -47,10 +49,10 @@
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
- scaleX = window.innerWidth/400;
- scaleY = window.innerHeight/600;
+ scaleX = window.innerWidth / 400;
+ scaleY = window.innerHeight / 600;
- if(scaleX/scaleY > 1.3){
+ if (scaleX / scaleY > 1.3) {
scaleX = scaleY = 1;
}
ctx.scale(scaleX, scaleY);
@@ -61,41 +63,41 @@
}
function draw() {
color("white");
- ctx.fillRect(0, 0, canvas.width,canvas.height);
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
color("black");
- ctx.fillRect(0, 0, 400,400);
-
+ ctx.fillRect(0, 0, 400, 400);
+
// Draw moving block
- if(stack.length % 2 == 0){
+ if (stack.length % 2 == 0) {
color("white");
} else {
color("red")
}
var y;
- if(stack.length < 10){
- y = 380-stack.length*20;
+ if (stack.length < 10) {
+ y = 380 - stack.length * 20;
} else {
- y = 380-10*20;
+ y = 380 - 10 * 20;
}
ctx.fillRect(next.left, y, next.width, 20)
// Draw stack
- var index = max(stack.length-10, 0);
+ var index = max(stack.length - 10, 0);
stack.slice(-10).forEach((element, i) => {
- if(index % 2 == 0){
+ if (index % 2 == 0) {
color("white");
} else {
color("red")
}
-
- let y = 380-i*20
+
+ let y = 380 - i * 20
ctx.fillRect(element.left, y, element.width, 20)
index++;
});
-
+
// Draw "perfect" marker
- if(perfect > 0 ){
+ if (perfect > 0) {
font(20);
color("red");
let last = stack[stack.length - 1]
@@ -110,12 +112,12 @@
// Draw touch controls
color("#ff9900");
- if(selected) {
+ if (selected) {
color("#cc9900")
}
ctx.beginPath();
ctx.moveTo(200, 500);
- ctx.arc(200, 500, 100, 0, 2*Math.PI);
+ ctx.arc(200, 500, 100, 0, 2 * Math.PI);
ctx.fill();
selected = 0;
@@ -124,17 +126,18 @@
font(32);
ctx.fillText("Game over!", 160, 200);
font(24);
+ ctx.fillText("(press any key)", 160, 240)
}
}
function update() {
t++;
next.left += v;
- if(next.left + next.width >= 400) {
+ if (next.left + next.width >= 400) {
let diff = next.left + next.width - 400;
next.left -= diff;
v = -1 * VELOCITY;
- } else if(next.left <= 0) {
+ } else if (next.left <= 0) {
let diff = 0 - next.left;
next.left += diff;
v = VELOCITY;
@@ -150,44 +153,44 @@
return a < b ? a : b;
}
function keyPush(e) {
- if(isGameOver){
+ if (isGameOver) {
init();
return;
}
- if(e.keyCode == 32){
- let last = stack[stack.length -1];
+ if (e.keyCode == 32) {
+ let last = stack[stack.length - 1];
var left = max(next.left, last.left);
- let right = min(next.left + next.width, last.left+last.width);
- var width = right-left;
+ let right = min(next.left + next.width, last.left + last.width);
+ var width = right - left;
- if(stack[stack.length -1 ].width - width < 10){
- width = stack[stack.length -1 ].width
- left = stack[stack.length -1 ].left
- perfect = 5;
+ if (stack[stack.length - 1].width - width < 6) {
+ width = stack[stack.length - 1].width
+ left = stack[stack.length - 1].left
+ perfect = 15;
}
- if(width > 0){
- stack.push({left: left, width: width})
+ if (width > 0) {
+ stack.push({ left: left, width: width })
score += 1;
}
-
- if(v < 0) {
- next = {left: 0, width: width}
+
+ if (v < 0) {
+ next = { left: 0, width: width }
v = VELOCITY
} else {
- next = {left: 400-width, width: width}
+ next = { left: 400 - width, width: width }
v = -1 * VELOCITY
}
}
}
function mousePush(e) {
- mouseX = e.clientX/scaleX - 200;
- mouseY = e.clientY/scaleY - 500;
+ mouseX = e.clientX / scaleX - 200;
+ mouseY = e.clientY / scaleY - 500;
if (Math.sqrt(mouseX * mouseX + mouseY * mouseY) > 100) {
return;
}
selected = 1;
- keyPush({keyCode: 32})
+ keyPush({ keyCode: 32 })
}
function randomInt(max) {
return Math.floor(Math.random() * max);
@@ -201,13 +204,7 @@
function gameOver() {
isGameOver = true;
clearInterval(gameInterval);
-
- const urlParams = new URLSearchParams(window.location.search);
- const uid = urlParams.get('uid');
- const mid = urlParams.get('mid');
-
- const request = new Request(`/setScore?uid=${uid}&mid=${mid}&score=${score}`);
- fetch(request).then(response => console.log("response"));
+ username = submitScore("stacker", score, username);
}
</script>
</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 11:47:21 +0000