JavaScript原生贪吃蛇

最新推荐文章于 2021-04-12 10:05:42 发布

liouswll

最新推荐文章于 2021-04-12 10:05:42 发布

阅读量357

点赞数

分类专栏：前端文章标签： JavaScript 贪吃蛇

本文链接：https://blog.csdn.net/liouswll/article/details/79952269

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#container{
border: 1px solid #ccc;
border-bottom: none;
border-right: none;
position: relative;
}
ul{
list-style: none;
}
ul li{
border: 1px solid #ccc;
border-top: none;
border-left: none;
float: left;
}
#container div{
float: right;
}
#person > div {
position: absolute;
background:green;
left: 0px;
top: 0px;
}
.food{
position: absolute;
left: 0px;
right: 0px;
background: red;

}
.personBody{
opacity: 0.5;
}
</style>
</head>
<body>
<div id="container">
<ul id="uls"></ul>
<button id="btn">开始游戏</button>
<div id="box">积分:0</div>
<div id="person">

</div>
</div>
<script>
var container = $id("container"),
timer = null,
food = null,
uls = $id("uls"),
btn = $id("btn"),
box = $id("box"),
person = $id("person"),
index = 0,
personDiv = $tagName(person,"div"),
lis = $tagName(uls,"li"),
datas = {size:20,x:20,y:20},
perData = {speed:100,code:39};

function init(){//初始化游戏
createMap();
}
function createMap(){//创建地图
container.style.width = (datas.size+1)*datas.x+"px";
for(var i=0;i<datas.x*datas.y;i++){
var oDiv = document.createElement("li");
oDiv.style.width = oDiv.style.height=datas.size+"px";
oDiv.index = i;
uls.appendChild(oDiv);
}
start();
}

function start() {//点击开始游戏
btn.onclick = function(){
cteatePerson();
movePerson();
bindPerson();
createFood();
}
}

function createFood() {
var hrr = [];
for (var i=0;i<lis.length;i++){
if(isFilter(lis[i])){
hrr.push(lis[i]);
}
}
function isFilter(li){
for (var i=0; i<personDiv.length;i++){
if( li.index == personDiv[i].index ){
return false;
}
}
return true;
}
var random = Math.floor(Math.random()*(hrr.length-1));
food = document.createElement("div");
food.className = "food";
food.style.width = food.style.height = datas.size + 1 + "px";
food.style.left = hrr[random].offsetLeft+"px";
food.style.top = hrr[random].offsetTop+"px";

container.appendChild(food);
}
function cteatePerson(){//创建人物
var oPerson = document.createElement("div");
oPerson.style.width = oPerson.style.height= datas.size+1+"px";
oPerson.index = 0;
person.appendChild(oPerson);
}
function Num() {//改变积分
index +=10;
box.innerHTML = "积分:"+index;
}
function isOut() {
for(var i =0;i<lis.length;i++){
if(pz(lis[i],personDiv[0])){
return false;
}
}
return true;
}
function isSelf() {
for (var i = 1; i<personDiv.length;i++){
if (pz(personDiv[0],personDiv[i])){
return true;
}
}
return false;

}
function movePerson () {//移动
timer = setInterval(function () {
//检测碰撞撞到flase 没有true
if(isOut() || isSelf() ){
alert("game over");
clearInterval(timer);
}

if (pz(personDiv[0],food)){//吃食物
food.className= "personBody";
//food.removeAttribute("class");
person.appendChild(food);
createFood();
Num();
}
for(var i =personDiv.length-1;i>0;i--){
personDiv[i].style.left = personDiv[i-1].offsetLeft+"px";
personDiv[i].style.top = personDiv[i-1].offsetTop+"px";
personDiv[i].index = personDiv[i-1].index;
}
switch (perData.code){
case 37:
personDiv[0].style.left=personDiv[0].offsetLeft-(datas.size+1)+"px";
personDiv[0].index -= 1;
break;
case 38:
personDiv[0].style.top=personDiv[0].offsetTop-(datas.size+1)+"px";
personDiv[0].index -= datas.x;
break;
case 39:
personDiv[0].style.left=personDiv[0].offsetLeft+(datas.size+1)+"px";
personDiv[0].index += 1;
break;
case 40:
personDiv[0].style.top=personDiv[0].offsetTop+(datas.size+1)+"px";
personDiv[0].index += datas.x;
break;

}
},perData.speed);
}
function bindPerson() {
document.onkeydown = function (e) {
var e = window.event || e ;
switch (e.keyCode){
case 37:
perData.code = 37;
break;
case 38:
perData.code = 38;
break;
case 39:
perData.code = 39;
break;
case 40:
perData.code = 40;
break;
}
}
}
function pz(el1,el2){

var l1 = el1.offsetLeft;
var r1 = el1.offsetLeft+el1.offsetWidth;
var t1 = el1.offsetTop;
var b1 = el1.offsetTop+el1.offsetHeight;

var l2 = el2.offsetLeft;
var r2 = el2.offsetLeft+el2.offsetWidth;
var t2 = el2.offsetTop;
var b2 = el2.offsetTop+el2.offsetHeight;

if( r1<=l2 || b1<=t2 || l1>=r2 || t1>=b2){
return false;
}else{
return true;
}
}

function $tagName(parend,child) {
return parend.getElementsByTagName(child);
}
function $id(id){
return document.getElementById(id);
}
init();

</script>
</body>
</html>