基本信息
源码名称:html5 贪吃蛇源码(直接可以运行)
源码大小:0.10M
文件格式:.zip
开发语言:CSS
更新时间:2020-01-05
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
自定义 蛇的图片和食物的图片大小 canvas 画图
自定义 蛇的图片和食物的图片大小 canvas 画图
var canvas=document.getElementById("canvas"); var ctx=canvas.getContext('2d'); var gridWidth=20; var score=0; var foods=new Array(),snakes=new Array(); var bgIamge =new Image(); bgIamge.src = 'images/head.jpg'; var partten; var foodIamge =new Image(); foodIamge.src = 'images/food.jpg'; var parttenFood; function gameStart(){ var farm=new Farm(); food_interval=setInterval(farm.addfood,2000); } gameStart(); function gameover(){ var judge=confirm("游戏结束,是否重新开始"); score=0; textmsg.innerHTML=score "分"; clearInterval(snake_interval); clearInterval(food_interval); if(!judge){ return false; } gameStart(); } function Food(x,y,w){ var t=this; t.x=x; t.y=y; t.w=w; t.foodInit=function(){ parttenFood= ctx.createPattern(foodIamge, 'repeat'); ctx.beginPath(); ctx.arc(x w/2,y w/2,w/2,0,360,false); debugger; ctx.fillStyle=parttenFood; ctx.fill(); ctx.closePath(); } t.equal=function(node){ if(this.x==node.x && this.y==node.y){ return true; }else{ return false; } } } function Block(x,y,w){ var t=this; t.x=x; t.y=y; t.w=w; t.drawBlock=function(){ partten= ctx.createPattern(bgIamge, 'repeat') ctx.beginPath(); ctx.arc(x w/2,y w/2,w/2,0,360,false); ctx.fillStyle= partten; ctx.fill(); } t.clear=function(){ ctx.fillStyle='white'; ctx.strokeStyle='white'; ctx.fillRect(x,y,w,w); ctx.strokeRect(x,y,w,w); } t.equal=function(node){ if(this.x==node.x && this.y==node.y){ return true; }else{ return false; } } } function Snake(x,y,len,speed){ var t=this; t.x=x; t.y=y; t.dir='R'; t.len=len; var nx=x;ny=y; t.init=function(){ for(var i=0;i<len;i ){ var tempBlock=new Block(nx,ny,gridWidth); tempBlock.drawBlock(); nx-=gridWidth; snakes.push(tempBlock); } snake_interval=setInterval(t.move,speed); } document.onkeydown=function(e){ var code=e.keyCode; t.odir=t.dir; switch(code){ case 37: t.dir='L'; break; case 38: t.dir='U'; break; case 39: t.dir='R'; break; case 40: t.dir='D'; break; } } t.move=function(){ var newHead; if(snakes[0].x snakes[0].w >=canvas.width || snakes[0].x-snakes[0].w<0 || snakes[0].y-snakes[0].w<0 || snakes[0].y snakes[0].w>canvas.height){ gameover(); }else{ if(t.dir=='R'){ newHead=new Block(snakes[0].x gridWidth,snakes[0].y,gridWidth); }else if(t.dir=='L'){ newHead=new Block(snakes[0].x-gridWidth,snakes[0].y,gridWidth); }else if(t.dir=='D'){ newHead=new Block(snakes[0].x,snakes[0].y gridWidth,gridWidth); }else if(t.dir=='U'){ newHead=new Block(snakes[0].x,snakes[0].y-gridWidth,gridWidth); } } if(newHead.x==snakes[1].x && newHead.y==snakes[1].y){ t.dir=t.odir; return; } newHead.drawBlock(); snakes.unshift(newHead); snakes[snakes.length-1].clear(); snakes.pop(); for(var i=0;i<foods.length;i ){ if(foods[i].equal(snakes[0])){ t.growth(); score=score 10; textmsg.innerHTML=score "分"; t.len=t.len 1; clearInterval(snake_interval); speed=speed<20?speed:speed-10; snake_interval=setInterval(t.move,speed); } } for(var i=1;i<snakes.length;i ){ if(snakes[i].equal(snakes[0])){ gameover(); } } } t.growth=function(){ var tail1=snakes[snakes.length-1]; var tail2=snakes[snakes.length-2]; var addBlock; if(tail1.x==tail2.x){ if(tail1.y>tail2.y) addBlock=new Block(tail1.x,tail1.y gridWidth,gridWidth); else addBlock=new Block(tail1.x,tail1.y-gridWidth,gridWidth); }else{ if(tail1.x>tail2.x) addBlock=new Block(tail1.x gridWidth,tail1.y,gridWidth); else addBlock=new Block(tail1.x-gridWidth,tail1.y,gridWidth); } snakes.push(addBlock); addBlock.drawBlock(); } } function Farm(){ var t=this; ctx.fillStyle='white'; ctx.fillRect(0,0,canvas.width,canvas.height); foods=[]; t.addfood=function(){ var x=parseInt(canvas.width/gridWidth*Math.random())* gridWidth; var y=parseInt(canvas.height/gridWidth*Math.random())* gridWidth; var food=new Food(x,y,gridWidth); food.foodInit(); foods.push(food); } snakes=[]; t.snake=new Snake(100,100,5,500); t.snake.init(); }