贪吃蛇的代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#first{
width:600px;
height:600px;
}
div{
width:15px;
height:15px;
float: left;
}
.border{
background:#ccc;
}
.head{
background:deeppink;
}
.body{
background:pink;
}
#second{
width:200px;
height:200px;
}
input{
width:50px;
height:50px;
}
#top{
margin:0px 75px 25px;
}
#left{
margin-right:95px;
}
#bottom{
margin-top:25px;
margin-left:75px;
}
.food{
background: greenyellow;
}
</style>
<body>
<div id="first"></div>
<div id="second">
<input type="button" id="top" value="上">
<input type="button" id="left" value="左">
<input type="button" id="right" value="右">
<input type="button" id="bottom" value="下">
</div>
>
<script>
var morediv="";
var num=0;
function add(){
for(var i=1;i<=40;i++){
for(var j=1;j<=40;j++){
num++;
morediv = morediv+"<div id='"+num+"'></div>"
}
}
return morediv;
}
document.getElementById("first").innerHTML = add();
var child = document.getElementById("first").children;
for(var i=0;i<child.length;i++){
var Id = child[i].getAttribute("id");
if((Id>=1&&Id<=40)||(Id>=1560&&Id<=1600)||(Id%40===0)||((Id-1)%40)===0){
child[i].className = "border";
}
/*要是格子显示错误,没有排列整齐,可以自己定义first盒子和其子盒子的
* 高和宽,记得去掉边框样式,因为不同浏览器的边框宽度有所差别
*/
}
//获取身体和头所在格子的id编号
var snakeId = [465,466,467];
//通过id获取格子
var snake;
for(var i=0;i<snakeId.length;i++){
snake = document.getElementById(snakeId[i]+"");
if(i==0){
snake.className = "head";
}else{
snake.className = "body";
}
}
//移动
//移动的方向
var btn = document.getElementsByTagName("input");
function move(_input){
btnId = _input.getAttribute("id");
//下一步头的位置
_input.setAttribute("click","1");
switch(btnId){
case "top":
snakeId.unshift(snakeId[0]-40);
break;
case "right":
snakeId.unshift(snakeId[0]+1);
break;
case "left":
snakeId.unshift(snakeId[0]-1);
break;
case "bottom":
snakeId.unshift(snakeId[0]+40);
break;
}
//判断蛇头下一步是否会触碰到事物
var head = document.getElementById(snakeId[0]+"");
if(head.className=="border"||head.className=="body"){
alert("game over");
location.reload();
}
if(head.className == "food"){
haveFood = 0;
}else{
document.getElementById(snakeId[snakeId.length-1]).className="";
snakeId.length=snakeId.length-1;
}
for(var i=0;i<snakeId.length;i++){
snake = document.getElementById(snakeId[i]+"");
if(i==0){
snake.className = "head";
}else{
snake.className = "body";
}
}
}
function _click(){
for(var j =0;j<btn.length;j++){
btn[j].setAttribute("click","0");
}
}
_click();
function ban(){
var _position = snakeId[0]-snakeId[1];
switch(_position){
case -1:
btn[2].setAttribute("click","1");
break;
case 1:
btn[1].setAttribute("click","1");
break;
case -40:
btn[3].setAttribute("click","1");
break;
case 40:
btn[0].setAttribute("click","1");
break;
}
}
var interval="";
for(var i =0;i<btn.length;i++){
btn[i].onclick = function(){
var that = this;
ban();
if(this.getAttribute("click")==0){
clearInterval(interval);//清楚上一个按钮的定时器
_click();//初始化
interval=setInterval(
function(){
move(that);
},200
)
}
//不能让头穿过身体
}
}
var haveFood = 0;
setInterval(
function(){
if(haveFood==0){
var random = parseInt(Math.random()*1600);
if(child[random].className==""){
child[random].className = "food";
haveFood = 1;
}
}
},200
)
</script>
</body>
</html>
未经允许,不得转载!!!