html5+js 貪吃蛇
阿新 • • 發佈：2018-12-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個 //for ctx.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 右-2 function 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 右 39 var cade=e.keyCode; var dir=0;//方向 //上1 下 -1 左 2 右-2 switch(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; //按鍵方向相同，每次加速100ms if(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>