diff options
Diffstat (limited to 'src/html/snake.html')
| -rwxr-xr-x | src/html/snake.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/src/html/snake.html b/src/html/snake.html new file mode 100755 index 0000000..dfc1cf1 --- /dev/null +++ b/src/html/snake.html @@ -0,0 +1,176 @@ +<!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> + + <center> + <canvas width="400" height="600" id="canvas"></canvas> + </center> + <script> + var gameInterval; + window.onload = function () { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + // canvas.height = 300; + // canvas.width = 400; + document.addEventListener("keydown", keyPush); + document.addEventListener("mousedown", mousePush); + gameInterval = setInterval(game, 1000 / 10); + } + 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; + console.log(apple); + setRandomCoords(apple); + console.log(apple); + var length = 5; + function game() { + update(); + draw(); + } + function draw(){ + color("black"); + ctx.fillRect(0, 0, canvas.width, canvas.height); + 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); + } + color("red"); + ctx.fillRect(apple.x * tileWidth, apple.y * tileHeight, tileWidth, tileHeight); + + font(20); + color("black"); + ctx.fillText("Score: "+score,20,450); + + color("orange"); + // ctx.fillRect(210, 410, 390, 590) + ctx.beginPath(); + ctx.arc(300, 500, 95, 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(); + + if(isGameOver){ + color("red"); + font(20); + ctx.fillText("Game over!",180,200); + } + } + + function update(){ + t++; + x += vx; + y += vy; + if (x < 0 || x >= tileCountWidth || y < 0 || 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) { + length++; + setRandomCoords(apple); + score += 10 + max(50-t, 0) + t = 0; + } + + while (snake.length > length) { + snake.shift(); + } + } + function max(a, b){ + return a > b ? a : b; + } + 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; + } + } + function mousePush(e){ + var x = e.clientX - 420; + var y = e.clientY - 510; + console.log(x, y); + + if(Math.sqrt(x*x+y*y) > 95){ + return; + } + + if(Math.abs(x) > Math.abs(y)){ + if(x < 0){ + vx = -1; + vy = 0; + } else{ + vx = 1; + vy = 0; + } + } else { + if(y < 0){ + vx = 0; + vy = -1; + } else{ + vx = 0; + vy = 1; + } + } + } + function setRandomCoords(item) { + item.x = randomInt(tileCountWidth); + item.y = randomInt(tileCountHeight); + } + function randomInt(max) { + return Math.floor(Math.random() * max); + } + function font(size) { + ctx.font = size + "px Courier"; + } + function color(c) { + ctx.fillStyle = c; + } + function gameOver(){ + isGameOver = true; + clearInterval(gameInterval); + } + </script> +</body> + +</html>
\ No newline at end of file |