html5+js 贪吃蛇

来源：互联网发布：java编程思想在线编辑：程序博客网时间：2024/04/24 16:02
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Author" content="kzm"><meta name="Keywords" content=""><meta name="Description" content=""><style type="text/css">body{background:#c7e2e7;}.box{width:450px;height:450px;margin:0px auto;pandding:1px auto;box-shadow:2px 2px 5px 1px #000;color:#252b34;}</style></head><body><div class="box" width=455px height=455px><!--画布--><canvas id="mycanvas" width=450px height=450px style="background:#00ffff;border:1px solid #000000" ></canvas></div><script type="text/javascript">var direction=0;//方向var speed=500;//初始速度500ms//拿到画板var canvas = document.getElementById("mycanvas");//拿到画图工具var ctx =  canvas.getContext("2d");   //假定格子 15*15   450/15=30个//forctx.strokeStyle="white";//颜色for(var i=0;i<30;i++){//开始路径ctx.beginPath();ctx.moveTo(0,i*15);//移动到哪里ctx.lineTo(450,i*15)ctx.moveTo(i*15,0);//移动到哪里ctx.lineTo(i*15,450)ctx.closePath();ctx.stroke();//画线}//蛇  节点 x-x坐标,y-y坐标,f-方向//上1 下 -1  左 2 右-2function Cell(x,y,f){//this 当前对象this.x=x;this.y=y;this.f=f;}    //食物function Food(x,y){this.x=x;this.y=y;}//蛇对象数组var snake = [];var width = 15;var head;//头var food =new Food(15,15)for(var i=0;i<5;i++){//初始化蛇的身体snake[i] =new Cell(i,0,-2);}//画蛇function drawSnake(){ctx.clearRect(0,0,450,450);//填充颜色for(var i=0;i<snake.length;i++){ctx.fillStyle="black";if(i==snake.length-1){ctx.fillStyle="red";}ctx.beginPath();ctx.rect(snake[i].x*15,snake[i].y*15,width,width);//矩形ctx.closePath();ctx.fill();}head = snake[snake.length-1];//是否吃到食物if(head.x==food.x&&head.y==food.y){var newCell=new Cell(head.x,head.y,head.f);switch(head.f){case 1:newCell.y--;break;case 2:newCell.x--;break;case -1:newCell.y++;break;case -2:newCell.x++;break;}snake[snake.length]=newCell;//重新生成食物initFood();}//取出蛇的头drawFood();    }//食物function drawFood(){ctx.fillStyle="red";ctx.beginPath();ctx.rect(food.x*15,food.y*15,width,width);//矩形ctx.closePath();ctx.fill();}    drawSnake();     //生成随机食物    function initFood(){var x= Math.ceil(Math.random()*28)+1;var y= Math.ceil(Math.random()*28)+1;food.x=x;food.y=y;for(var i=0;i<snake.length;i++){//食物与身体重合if(snake[i].x==x&& snake[i].y==y){initFood();}}}//监听键盘事件document.onkeydown=function(e){//左 37   右  39var cade=e.keyCode;var dir=0;//方向 //上1 下 -1  左 2 右-2switch(cade){  case 38:dir=1;break;  case 39:dir=-2;break;  case 40:dir=-1;break;  case 37:dir=2;break;}//当方向确定了，做移动if(dir!=0){if(parseInt(head.f)+dir!=0){//不准上走时下走//移动蛇//moveSnake();direction=dir;//按键方向相同，每次加速100msif(speed>100&&head.f==dir){speed-=100;window.clearInterval(timer);timer=window.setInterval(autoMove,speed);}}else{direction=0;}}}//移动蛇function moveSnake(){var newCell=new Cell(head.x,head.y,head.f);//新蛇newCell.f=direction;//循环蛇的身体 蛇的单元格往前动 把下标为0的丢弃var newSnake=[];for(var i=1;i<snake.length;i++){newSnake[i-1]=snake[i];}newSnake[snake.length-1]=newCell;switch(direction){case 1:newCell.y--;break;case 2:newCell.x--;break;case -1:newCell.y++;break;case -2:newCell.x++;break;}snake=newSnake;head=snake[snake.length-1];if(head.x>30||head.x<0||head.y>30||head.y<0){alert("游戏结束");//刷新页面window.location.reload();}drawSnake();}//自动移动蛇function autoMove(){if(direction!=0){moveSnake();}}//定时自动移动var timer=window.setInterval(autoMove,500);</script></body></html>
0 0