貪吃蛇
阿新 • • 發佈：2017-07-10
速度 alert adding posit prototype tab apps gree utf
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小??</title> <style>
body,.container{ padding: 0px; margin: 0; } .container table{ margin: 0 auto; border: 1px solid rgba(255,0,0,0.6); } .container td{ width: 20px; height: 20px; /*border: 1px solid rgba(255,0,0,0.6);*/ border-radius: 50%; }
/*手機操作*/ .box{ position: fixed; bottom:0; left: 0; width: 100%; height: 110px; display: none; } .box .flex{ display: flex; flex-wrap: wrap; width: 150px; height: 100px; margin: 0 auto } .box .flex>div{ width:50px; height: 50px; border-radius: 50%; background: #000; color: red; text-align: center; line-height: 50px; } .box .flex>div:nth-child(1),.box .flex>div:nth-child(3){ visibility: hidden; } </style> </head>
<body> <div class="container"> <div class="box"> <div class="flex"> <div></div> <div class="cc" data-cc="38">↑</div> <div></div> <div class="cc" data-cc="37">←</div> <div class="cc" data-cc=40>↓</div> <div class="cc" data-cc=39>→</div> </div> </div> <table> </table> <div>分數: <span id="count">0</span></div> </div> <script src=‘http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js‘></script> <script src="layer.js"></script> <script> function Se(size) { this.size = size || 10 this.go = 39 //上 38 左37 右 39 下40 this.arr = [0,1,2] //小?? this.isY = false //是否允許咬到自己 this.speed = 300 //速度 this.food = null //豆的位置 var timer = null } Se.prototype = { init: function () { this.go = 39 this.arr = [0,1,2] var str = "" for (var i = 0; i < this.size; i++) { str += "<tr>" for (var j = 0; j < this.size; j++) { str += `<td></td>` } str += "/tr>" } $("table").html(str) this.next() if(document.body.clientWidth <1000){ $(".box").show() $("table td").css({"width":document.body.clientWidth / this.size +"px","height":document.body.clientWidth / this.size +"px"}) } }, next: function () { var that = this timer = setInterval(function () { var len =that.arr.length var first = that.arr.concat()[0] var last = that.arr.concat()[len-1] that.arr.shift() if(that.go == 37){ that.arr.push(last-1) }else if(that.go == 39){ that.arr.push(last + 1) }else if(that.go == 40){ that.arr.push(last + that.size) }else{ that.arr.push(last - that.size) } that.isOver() that.render() that.chidou() }, this.speed) }, wchat: function () { var that = this $(document).on("keydown", function (e) { if(Math.abs(e.which - that.go) == 2){ return } that.go = e.which }) $(".cc").on("touchstart",function(){ var cc = $(this).data("cc") that.go = parseFloat(cc) }) }, render:function(){ $("table td").css("background-color","initial") var that = this this.arr.forEach(function(v,i) { if(that.arr.length-1 == i){ $("table td").eq(v).css("background-color","green") }else{ $("table td").eq(v).css("background-color","red") } }); }, isOver:function(){ var len = this.arr.length var k = this.arr.concat()[len-1] var that = this if(this.go ==37 && k%10 == (this.size-1) || this.go == 39 && k % this.size ==0 || this.go == 38 && k<0 || this.go ==40 && k > Math.pow(this.size,2)-1){ clearInterval(timer) alert("gameover,得分:" + this.arr.length) this.init() this.dou() this.wchat() return false } if(this.isY == "false" || this.isY == false){ var arr_ = this.arr.concat() arr_.pop() arr_.forEach(function(e){ if(e == k){ clearInterval(timer) alert("咬到自己了,得分:" + that.arr.length) that.init() that.dou() that.wchat() return false } }) } }, dou:function(){ var that = this var ccc = false do{ ccc = false var randem = Math.round(Math.random() * Math.pow(this.size,2)) this.arr.forEach(function(e){ if(e ==randem){ ccc = true } }) }while (ccc) that.food = randem $("table td").css({"background-image":"initial"}) $("table td").eq(that.food).css({"background-image":"url(1.png)","background-size":"100% 100%"})
// $("table td").css({"background-color":"initial"}) // $("table td").eq(that.food).css({"background-color":"#FFCC33"}) }, chidou:function(){ if(this.food == this.arr[this.arr.length -1]){ var dou = this.arr.concat()[0] this.arr.unshift(dou) this.dou() $("#count").text(this.arr.length) } } } layer.open({ content: "<input type=‘text‘ id=‘setCount‘ class=‘layui-input‘ style=‘width:80%;height:30px;padding-left:10px;‘ placeholder=‘請輸入區域大小(默認10)‘><div style=‘margin-top:16px;‘><span style=‘margin-right:30px;‘>是否允許咬到自己</span><input type=‘radio‘ name=‘isY‘ value=true><span>是</span><input type=‘radio‘ name=‘isY‘ value=false checked><span>否</span></div>" ,btn: [‘確認‘] ,yes: function(index){ var v = $("#setCount").val() var sle = $("input[name=isY]:checked").val() v = parseFloat(v) var se = new Se(v) se.isY = sle se.init() se.dou() se.wchat() layer.close(index); }, btn2:function(){ var se = new Se() se.init() se.dou() se.wchat() } }); </script> </body>
</html>
貪吃蛇
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小??</title> <style>
body,.container{ padding: 0px; margin: 0; } .container table{ margin: 0 auto; border: 1px solid rgba(255,0,0,0.6); } .container td{ width: 20px; height: 20px; /*border: 1px solid rgba(255,0,0,0.6);*/ border-radius: 50%; }
/*手機操作*/ .box{ position: fixed; bottom:0; left: 0; width: 100%; height: 110px; display: none; } .box .flex{ display: flex; flex-wrap: wrap; width: 150px; height: 100px; margin: 0 auto } .box .flex>div{ width:50px; height: 50px; border-radius: 50%; background: #000; color: red; text-align: center; line-height: 50px; } .box .flex>div:nth-child(1),.box .flex>div:nth-child(3){ visibility: hidden; } </style> </head>
<body> <div class="container"> <div class="box"> <div class="flex"> <div></div> <div class="cc" data-cc="38">↑</div> <div></div> <div class="cc" data-cc="37">←</div> <div class="cc" data-cc=40>↓</div> <div class="cc" data-cc=39>→</div> </div> </div> <table> </table> <div>分數: <span id="count">0</span></div> </div> <script src=‘http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js‘></script> <script src="layer.js"></script> <script> function Se(size) { this.size = size || 10 this.go = 39 //上 38 左37 右 39 下40 this.arr = [0,1,2] //小?? this.isY = false //是否允許咬到自己 this.speed = 300 //速度 this.food = null //豆的位置 var timer = null } Se.prototype = { init: function () { this.go = 39 this.arr = [0,1,2] var str = "" for (var i = 0; i < this.size; i++) { str += "<tr>" for (var j = 0; j < this.size; j++) { str += `<td></td>` } str += "/tr>" } $("table").html(str) this.next() if(document.body.clientWidth <1000){ $(".box").show() $("table td").css({"width":document.body.clientWidth / this.size +"px","height":document.body.clientWidth / this.size +"px"}) } }, next: function () { var that = this timer = setInterval(function () { var len =that.arr.length var first = that.arr.concat()[0] var last = that.arr.concat()[len-1] that.arr.shift() if(that.go == 37){ that.arr.push(last-1) }else if(that.go == 39){ that.arr.push(last + 1) }else if(that.go == 40){ that.arr.push(last + that.size) }else{ that.arr.push(last - that.size) } that.isOver() that.render() that.chidou() }, this.speed) }, wchat: function () { var that = this $(document).on("keydown", function (e) { if(Math.abs(e.which - that.go) == 2){ return } that.go = e.which }) $(".cc").on("touchstart",function(){ var cc = $(this).data("cc") that.go = parseFloat(cc) }) }, render:function(){ $("table td").css("background-color","initial") var that = this this.arr.forEach(function(v,i) { if(that.arr.length-1 == i){ $("table td").eq(v).css("background-color","green") }else{ $("table td").eq(v).css("background-color","red") } }); }, isOver:function(){ var len = this.arr.length var k = this.arr.concat()[len-1] var that = this if(this.go ==37 && k%10 == (this.size-1) || this.go == 39 && k % this.size ==0 || this.go == 38 && k<0 || this.go ==40 && k > Math.pow(this.size,2)-1){ clearInterval(timer) alert("gameover,得分:" + this.arr.length) this.init() this.dou() this.wchat() return false } if(this.isY == "false" || this.isY == false){ var arr_ = this.arr.concat() arr_.pop() arr_.forEach(function(e){ if(e == k){ clearInterval(timer) alert("咬到自己了,得分:" + that.arr.length) that.init() that.dou() that.wchat() return false } }) } }, dou:function(){ var that = this var ccc = false do{ ccc = false var randem = Math.round(Math.random() * Math.pow(this.size,2)) this.arr.forEach(function(e){ if(e ==randem){ ccc = true } }) }while (ccc) that.food = randem $("table td").css({"background-image":"initial"}) $("table td").eq(that.food).css({"background-image":"url(1.png)","background-size":"100% 100%"})
// $("table td").css({"background-color":"initial"}) // $("table td").eq(that.food).css({"background-color":"#FFCC33"}) }, chidou:function(){ if(this.food == this.arr[this.arr.length -1]){ var dou = this.arr.concat()[0] this.arr.unshift(dou) this.dou() $("#count").text(this.arr.length) } } } layer.open({ content: "<input type=‘text‘ id=‘setCount‘ class=‘layui-input‘ style=‘width:80%;height:30px;padding-left:10px;‘ placeholder=‘請輸入區域大小(默認10)‘><div style=‘margin-top:16px;‘><span style=‘margin-right:30px;‘>是否允許咬到自己</span><input type=‘radio‘ name=‘isY‘ value=true><span>是</span><input type=‘radio‘ name=‘isY‘ value=false checked><span>否</span></div>" ,btn: [‘確認‘] ,yes: function(index){ var v = $("#setCount").val() var sle = $("input[name=isY]:checked").val() v = parseFloat(v) var se = new Se(v) se.isY = sle se.init() se.dou() se.wchat() layer.close(index); }, btn2:function(){ var se = new Se() se.init() se.dou() se.wchat() } }); </script> </body>
</html>
貪吃蛇