Snake
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div> speed: <input type="number" step="5" value="125" id="n"/><br> <button onclick="start()">start</button><br> <hr> score: <span id="s">1</span> </div> <script> var canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.width = 300; canvas.height = 300; canvas.style.background = "#333345"; var ctx = canvas.getContext("2d"); var isPC = (function () { var u = window.navigator.userAgent; return (function (){ for(var a of ["IEMobile","Android","iPod","iPad","iPhone"]) { if(u.match(a)) return false; } if(u.match("Macintosh") && "ontouchend" in document) { return false; } return true; })() })(); var s, food; if(!isPC) { button(); document.body.style.overflow = "hidden"; let lastTouch = 0; document.addEventListener('touchend', function(e) { var now = window.performance.now(); if(now - lastTouch <= 500) { if(e.target.tagName == "BUTTON") { e.target.onclick(); } e.preventDefault(); } lastTouch = now; }, true); } function start() { s = new snake();console.log(s); food = {}; makeFood(); update(); } function button() { var w = document.createElement("div"); document.body.appendChild(w); w.setAttribute("style", "align-items: center;display: flex;flex-wrap: wrap;margin: 2rem;transform: rotate(45deg);vertical-align: middle;width: 6rem;"); function b() { var _ = document.createElement("button"); w.appendChild(_); _.setAttribute("style", "box-sizing: border-box;display: block;height: 3rem;width: 3rem;"); return _; } var up = b(); var right = b(); var left = b(); var down = b(); up.onclick = function() { if(s) { s.changeDir(0,-10); } } right.onclick = function() { if(s) { s.changeDir(10,0); } } down.onclick = function() { if(s) { s.changeDir(0,10); } } left.onclick = function() { if(s) { s.changeDir(-10,0); } } } document.onkeydown = function(e) { if(e.key == "ArrowDown") { e.preventDefault(); s.changeDir(0,10); } else if(e.key == "ArrowUp") { e.preventDefault(); s.changeDir(0,-10); } else if(e.key == "ArrowRight") { e.preventDefault(); s.changeDir(10,0); } else if(e.key == "ArrowLeft") { e.preventDefault(); s.changeDir(-10,0); } } function update() { if(s.move()) { clear(); for(var a of s.pos) { rect(a.x, a.y); } rect(food.x, food.y, "#55a"); document.getElementById("s").innerHTML = s.count; return setTimeout(update, document.getElementById("n").value); }else { clear(); for(var a of s.pos) { rect(a.x, a.y, "#b01"); } rect(food.x, food.y, "#55a"); console.log("boom!"); return false; } }; function makeFood() { food = random(); } function check(n) { return (n.x>=0)&&(n.x<300)&&(n.y>=0)&&(n.y<300); } function rect(x, y, color="#fff") { ctx.fillStyle = color; ctx.fillRect(x, y, 10, 10); } function clear() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function random() { function r() { return (~~(Math.random()*28) + 1) * 10; } var a = {x: r(), y: r()}; if(s.pos.map(function(v) { return JSON.stringify(v); }).indexOf(JSON.stringify(a)) > -1) { return random(); } return a; } function snake() { this.x = 10; this.y = 10; this.count = 1; this.pos = [{x: 10, y: 10}]; this.speedX = 10; this.speedY = 0; } snake.prototype.changeDir = function(x, y) { this.speedX = x; this.speedY = y; } snake.prototype.move = function() { this.x += this.speedX; this.y += this.speedY; var o = { x: this.x, y: this.y }; if(this.pos.map(function(v) { return JSON.stringify(v); }).indexOf(JSON.stringify(o)) > -1 || !check(o)) { return false; }else { if(o.x==food.x&&o.y==food.y) { this.count++; makeFood(); } var ary = [o]; for(var i = 0; i < (this.count - 1); i++) { ary[i+1] = this.pos[i]; } this.pos = ary; return true; } } </script> </body>
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <script> document.body.innerHTML = window.navigator.userAgent; </script> </body>
page revision: 30, last edited: 13 Aug 2020 06:45