diff options
| author | Mark Powers <markppowers0@gmail.com> | 2018-12-12 20:25:37 -0500 |
|---|---|---|
| committer | Mark Powers <markppowers0@gmail.com> | 2018-12-12 20:25:37 -0500 |
| commit | f2d0e534090be82a71506a9ba9789a08c4add6f0 (patch) | |
| tree | 71e5d751521f71cf85203702de302b90f27a22a2 /src/html | |
| parent | 7d20c4e9a4735c7d2f245e7c0a33aaad7bc29bd9 (diff) | |
Clean up snake code
Diffstat (limited to 'src/html')
| -rwxr-xr-x | src/html/snake.html | 89 |
1 files changed, 42 insertions, 47 deletions
diff --git a/src/html/snake.html b/src/html/snake.html index d6fa542..a05af59 100755 --- a/src/html/snake.html +++ b/src/html/snake.html @@ -8,26 +8,12 @@ <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> -<body> +<body style="padding:0; margin:0; overflow:hidden;"> <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; + var gameInterval, canvas, ctx; + var tileCountWidth,tileCountHeight, tileWidth, tileHeight, vx, vy; + var score, t, apple, isGameOver, mouseX, mouseY, length, scaleX, scaleY, selected; function init() { tileCountWidth = 40 @@ -46,26 +32,34 @@ mouseX = 0; mouseY = 0; t = 0; + selected = -1; + gameInterval = setInterval(game, 1000 / 10); } window.onload = function () { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); + document.addEventListener("keydown", keyPush); + document.addEventListener("mousedown", mousePush); + 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; + scaleX = window.innerWidth/400; + scaleY = window.innerHeight/600; + + if(scaleX/scaleY > 1.3){ + scaleX = scaleY = 1; + } + ctx.scale(scaleX, scaleY); } function game() { update(); @@ -86,20 +80,23 @@ font(20); color("black"); 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, 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(); + for(var i = 0; i < 4; i++){ + color("#ff9900"); + if(selected == i){ + color("#cc9900") + } + ctx.beginPath(); + ctx.moveTo(300, 500); + ctx.arc(300, 500, 100, (i+1/2)*(Math.PI/2), (i+3/2)*(Math.PI/2)); + ctx.fill(); + color("black"); + ctx.beginPath(); + ctx.moveTo(300, 500); + ctx.arc(300, 500, 100, (i+1/2)*(Math.PI/2), (i+3/2)*(Math.PI/2)); + ctx.stroke(); + } + selected = -1; if (isGameOver) { color("red"); @@ -137,7 +134,10 @@ return a > b ? a : b; } function keyPush(e) { - console.log(vx, vy); + if(isGameOver){ + init(); + return; + } switch (e.keyCode) { case 37: if (vx == 1) return; @@ -162,17 +162,8 @@ } } 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; - + mouseX = e.clientX/scaleX - 300; + mouseY = e.clientY/scaleY - 500; if (Math.sqrt(mouseX * mouseX + mouseY * mouseY) > 100) { return; } @@ -180,14 +171,18 @@ if (Math.abs(mouseX) > Math.abs(mouseY)) { if (mouseX < 0) { keyPush({keyCode: 37}) + selected = 1; } else { keyPush({keyCode: 39}) + selected = 3; } } else { if (mouseY < 0) { keyPush({keyCode: 38}) + selected = 2; } else { keyPush({keyCode: 40}) + selected = 0; } } } |