aboutsummaryrefslogtreecommitdiff
path: root/src/html
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2018-12-12 11:25:21 -0500
committerMark Powers <markppowers0@gmail.com>2018-12-12 11:25:21 -0500
commit7d20c4e9a4735c7d2f245e7c0a33aaad7bc29bd9 (patch)
tree372a3a3b7bdf3f4da853e26f2b180c15b8853ff9 /src/html
parent378578dfdd101a954f8798fa80acf160e4b29138 (diff)
Update to work with touch controls
Diffstat (limited to 'src/html')
-rwxr-xr-xsrc/html/snake.html165
1 files changed, 100 insertions, 65 deletions
diff --git a/src/html/snake.html b/src/html/snake.html
index 3c66e1e..d6fa542 100755
--- a/src/html/snake.html
+++ b/src/html/snake.html
@@ -9,150 +9,185 @@
</head>
<body>
-
- <center>
- <canvas width="400" height="600" id="canvas"></canvas>
- </center>
+ <canvas id="canvas"></canvas>
<script>
var gameInterval;
+ var canvas;
+ var ctx;
+
+ var tileCountWidth;
+ var tileCountHeight;
+ var tileWidth;
+ var tileHeight;
+ var vx;
+ var vy;
+ var score;
+ var t;
+ var apple;
+ var isGameOver;
+ var mouseX;
+ var mouseY;
+ var length;
+
+ function init() {
+ tileCountWidth = 40
+ tileCountHeight = 40
+ tileWidth = 10;
+ tileHeight = 10;
+ snake = { body: [] };
+ length = 5;
+ setRandomCoords(snake);
+ apple = {};
+ setRandomCoords(apple);
+ vx = 1;
+ vy = 0;
+ score = 0;
+ isGameOver = false;
+ mouseX = 0;
+ mouseY = 0;
+ t = 0;
+ }
+
window.onload = function () {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
- // canvas.height = 300;
- // canvas.width = 400;
+
+ window.addEventListener('resize', resizeCanvas, false);
+ window.addEventListener('orientationchange', resizeCanvas, false);
+ resizeCanvas();
+
document.addEventListener("keydown", keyPush);
document.addEventListener("mousedown", mousePush);
gameInterval = setInterval(game, 1000 / 10);
+
+ init();
+ }
+
+ function resizeCanvas() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
}
- var tileCountWidth = 40;
- var tileCountHeight = 40;
- var tileWidth = 10//canvas.width / tileCountWidth;
- var tileHeight = 10//canvas.height / tileCountHeight;
- var snake = [];
- var x = randomInt(tileWidth);
- var y = randomInt(tileHeight);
- var vx = 1;
- var vy = 0;
- var score = 0;
- var t = 0;
- var apple = {};
- var isGameOver = false;
- var mouseX =0;
- var mouseY = 0;
- console.log(apple);
- setRandomCoords(apple);
- console.log(apple);
- var length = 5;
function game() {
update();
draw();
}
- function draw(){
+ function draw() {
color("black");
- ctx.fillRect(0, 0, canvas.width, canvas.height);
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.fillRect(0, 0, 400,400);
color("white");
ctx.fillRect(0, 400, 400, 410);
- for (var i = 0; i < snake.length; i++) {
- ctx.fillRect(snake[i].x * tileWidth, snake[i].y * tileHeight, tileWidth, tileHeight);
+ for (var i = 0; i < snake.body.length; i++) {
+ ctx.fillRect(snake.body[i].x * tileWidth, snake.body[i].y * tileHeight, tileWidth, tileHeight);
}
color("red");
ctx.fillRect(apple.x * tileWidth, apple.y * tileHeight, tileWidth, tileHeight);
font(20);
color("black");
- ctx.fillText("Score: "+score,20,450);
- ctx.fillText(mouseX + " " + mouseY, 20, 500);
+ ctx.fillText("Score: " + score, 20, 450);
+ // ctx.fillText(mouseX + " " + mouseY, 20, 500);
color("orange");
// ctx.fillRect(210, 410, 390, 590)
ctx.beginPath();
- ctx.arc(300, 500, 95, 0, 2 * Math.PI);
- ctx.stroke();
+ ctx.arc(300, 500, 100, 0, 2 * Math.PI);
+ ctx.stroke();
color("black");
ctx.beginPath();
ctx.moveTo(210, 410);
ctx.lineTo(390, 590);
ctx.moveTo(390, 410);
ctx.lineTo(210, 590);
- ctx.stroke();
+ ctx.stroke();
- if(isGameOver){
+ if (isGameOver) {
color("red");
font(20);
- ctx.fillText("Game over!",180,200);
+ ctx.fillText("Game over!", 160, 200);
+ font(14);
+ ctx.fillText("(tap to restart)", 152, 220);
}
}
- function update(){
+ function update() {
t++;
- x += vx;
- y += vy;
- if (x < 0 || x >= tileCountWidth || y < 0 || y >= tileCountHeight)
+ snake.x += vx;
+ snake.y += vy;
+ if (snake.x < 0 || snake.x >= tileCountWidth || snake.y < 0 || snake.y >= tileCountHeight)
gameOver();
// if(snake.some((piece) => {return piece.x = x && piece.y == y;})){
// gameOver();
// }
- snake.push({ "x": x, "y": y });
- if (x == apple.x && y == apple.y) {
+ snake.body.push({ "x": snake.x, "y": snake.y });
+ if (snake.x == apple.x && snake.y == apple.y) {
length++;
setRandomCoords(apple);
- score += 10 + max(50-t, 0)
+ score += 10 + max(50 - t, 0)
t = 0;
}
- while (snake.length > length) {
- snake.shift();
+ while (snake.body.length > length) {
+ snake.body.shift();
}
}
- function max(a, b){
+ function max(a, b) {
return a > b ? a : b;
}
function keyPush(e) {
+ console.log(vx, vy);
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;
}
}
- function mousePush(e){
- mouseX = e.clientX - 420;
- mouseY = e.clientY - 510;
- console.log(mouseX, mouseY);
+ function mousePush(e) {
+ if(isGameOver){
+ init();
+ return;
+ }
+
+ mouseX = e.clientX - 300;
+ mouseY = e.clientY - 500;
+ var d = canvas.getBoundingClientRect();
+ mouseX -= d.left;
+ mouseY -= d.top;
- if(Math.sqrt(mouseX*mouseX+mouseY*mouseY) > 95){
+ if (Math.sqrt(mouseX * mouseX + mouseY * mouseY) > 100) {
return;
}
- if(Math.abs(mouseX) > Math.abs(mouseY)){
- if(mouseX < 0){
- vx = -1;
- vy = 0;
- } else{
- vx = 1;
- vy = 0;
+ if (Math.abs(mouseX) > Math.abs(mouseY)) {
+ if (mouseX < 0) {
+ keyPush({keyCode: 37})
+ } else {
+ keyPush({keyCode: 39})
}
} else {
- if(mouseY < 0){
- vx = 0;
- vy = -1;
- } else{
- vx = 0;
- vy = 1;
+ if (mouseY < 0) {
+ keyPush({keyCode: 38})
+ } else {
+ keyPush({keyCode: 40})
}
}
}
@@ -169,7 +204,7 @@
function color(c) {
ctx.fillStyle = c;
}
- function gameOver(){
+ function gameOver() {
isGameOver = true;
clearInterval(gameInterval);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 20:10:55 +0000