<!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>
