熊平平个人博客

html5简单贪吃蛇游戏源码

86人参与 |分类: 学习笔记|时间:2018年05月25日 22:39

相信很多朋友都玩过贪吃蛇吧,毕竟他是我们这一代童年的代表。分享给大家一个简单的贪吃蛇源代码。

tanchishe1.png

html5简单贪吃蛇游戏源码

<html>
 <head>
 <meta charset='utf-8'/>
 <title>Snake</title>
 </head>
 <body>
 <canvas id="plank" style="border"></canvas>
 <script type="text/javascript">
 //内置大量BUG,I'm sorry.
 var lev=100; //定时器间隔时间
 var num=30; //网格大小,现在是30x30
 var direction=3; //0:up 1:down 2:left 3:right
 var handle; //用于管理定时器
 var score=0; //分数
 var pause=true; //暂停使用
 var canvas = document.getElementById('plank');
 var context = canvas.getContext('2d');
 var snakex=new Array(); //存储蛇身x坐标,下同
 var snakey=new Array();
 var prize=new Array(-1,-1); //食物的位置
 
 function rand(){ //产生随机数
 return parseInt(Math.random()*num);
 }
 
 function chk(x,y){ //检查是否结束,包括越界
 if(x<0||y<0) return false;
 if(x>num-1||y>num-1) return false;
 for (var i=0; i!=snakex.length-1;i++) {
 if(snakex[i]==x&&snakey[i]==y) {return false;}
 };
 return true;
 }
 
 function drawScore(text){ //打印分数
 context.clearRect(0,0,300,25);
 context.fillText("Score:"+text,5,5);
 }
 
 function makeprize(){ //产生食物的位置
 var flag=false;
 var prizepre=new Array(2); //使用链表会更好
 while(!flag){ //食物位置不能在蛇体内
 flag=true;
 prizepre[0]=rand();prizepre[1]=rand();
 for (var i=0; i!=snakex.length;i++) {
 if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;}
 }
 }
 prize=prizepre;
 }
 
 function runscore(x,y){ //判断是否吃到食物,并做处理
 if(prize[0]==x&&prize[1]==y){
 score=score+1;
 drawScore(score);
 snakex[snakex.length]=prize[0];
 snakey[snakey.length]=prize[1];
 makeprize();
 drawNode(prize[0],prize[1]);
 return true;
 }
 return false;
 }
 
 function run(){ //定时器用来判断snake行进方向等等
 switch(direction){ //方向
 case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break;
 case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]+1;break;
 case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break;
 case 3: snakex[snakex.length]=snakex[snakex.length-1]+1;snakey[snakey.length]=snakey[snakey.length-1];break;
 }
 if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){
 if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) {
 clearInterval(handle);
 drawScore('\\tGame over');
 return;
 }
 drawNode(snakex[snakex.length-1],snakey[snakey.length-1]);
 }
 clearNode(snakex[0],snakey[0]);
 snakex.shift();
 snakey.shift();
 }
 
 function drawNode(x,y){ //画点,共30X30个点(10*10像素算1个点)
 context.fillRect(x*10+1,y*10+31,10,10);
 }
 
 function clearNode(x,y){
 context.clearRect(x*10+1,y*10+31,10,10);
 }
 
 function init(){ //初始化,设置画布大小,启动定时器等等
 canvas.width = 510;
 canvas.height = 600;
 context.font = "normal 20px Airl";
 context.textBaseline = "top";
 context.fillText('P键开始/暂停,方向键控制',0,350);
 drawScore('');
 context.strokeRect(0,30,302,302);
 makeprize();
 drawNode(prize[0],prize[1]);
 snakex[0]=0;snakex[1]=1;snakex[2]=2;
 snakey[0]=0;snakey[1]=0;snakey[2]=0;
 drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]);
 }
 
 document.onkeydown=function(event){ //注册键盘事件,up,down,left,right,暂停键p
 var e = event || window.event;
 if(e&&e.keyCode==38){
 direction=0;
 }
 if(e&&e.keyCode==40){
 direction=1;
 }
 if(e&&e.keyCode==37){
 direction=2;
 }
 if(e&&e.keyCode==39){
 direction=3;
 }
 if(e&&e.keyCode==80){
 if(pause) {pause=false;handle=setInterval(run,lev);}
 else {pause=true;clearInterval(handle);}
 }
 }
 
 
 init();
 </script>
 </body>
</html>



顶: 1踩: 0

来源:熊平平博客(微信/QQ号:Mr_xiongp/599393129),转载请保留出处和链接!

必填

选填

选填

◎已有 0 人评论,请发表您的观点。