贪吃蛇完整代码

来源：互联网发布：现在做淘宝店晚吗编辑：程序博客网时间：2024/05/17 00:06
本文未经博主允许不得转载：
闲来无事，勤能补拙；
贪吃蛇代码-----用来练手仅供参考：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">body{background-image: url(body.jpg);background-repeat: no-repeat;}div{width: 1180px;height: 600px;border: 10px solid #666666;background: #EEEEEE;margin-left: auto;margin-right: auto;margin-top: 30px;  }div+div{width: 1180px;height: 200px;border: 10px solid #666666;background: #c6c5d3;margin: auto;}div+div>input{margin-top: 80px;margin-left: 30px;width: 100px;height: 50px;}div+div>select{margin-top: 80px;margin-left: 30px;width: 100px;height: 50px;}</style></head><body><div><canvas id="snake" width="1180" height="600" style="border: 1px solid #666"></canvas></div><div><input type="button" name="begin" value="重新开始" onclick="refrash()"><input type="button" name="stope" value="暂停" onclick="pause()" id="pause_begin"><input type="text" name="score" value="得分" id="score" readOnly="true" style="text-align:center;color:#FF0000;"><input type="button" name="speed" value="点击加速" onclick="speedSnake()" style="text-align:center;color:#FF0000;" id="speedSnake"><select id="model" readOnly="true" style="text-align:center;color:#FF0000;"><option value="1" selected="selected">默认</option><option value="2">无敌</option></select><textarea name="注意" cols="65" rows="1" style="margin-left: 600px;margin-top: 40px" readOnly="true">注意事项：吃到150分之后，每吃50分加速10ms，初始速度为200ms</textarea> </div><script type="text/javascript">var context=document.getElementById("snake");var ctx=context.getContext("2d");var snake=[{x:3,y:7},{x:3,y:6},{x:3,y:5},{x:3,y:4}];//蛇身var dir=40;var food=[];var scoreValue=0;var speed=200;// 键盘控制变量document.onkeydown=function(event){//alert(event.keyCode);//判断键盘值dir = (event.keyCode>=37 && event.keyCode<=40 && Math.abs((event.keyCode-dir))!=2)?event.keyCode:dir;}function onframe(){var model=document.getElementById("model");if(model.options[model.selectedIndex].value==1){RuleDie();}else if(model.options[model.selectedIndex].value==2){RuleNoDie();free();}drow();createFoodVar();ctx.beginPath();ctx.fillRect(food[0].x*20,food[0].y*20,20,20);ctx.closePath();crashEat();}// 自动爬行var timer=window.setInterval(onframe,speed);// 画表格，画蛇，画食物function drow(){//控制蛇的移动switch(dir){case 37:snake[0].x=snake[1].x-1;snake[0].y=snake[1].y;break;case 38:snake[0].x=snake[1].x;snake[0].y=snake[1].y-1;break;case 39:snake[0].x=snake[1].x+1;snake[0].y=snake[1].y;break;case 40:snake[0].x=snake[1].x;snake[0].y=snake[1].y+1;break;}ctx.clearRect(0,0,context.width,context.height);//画格子for(var j=0;j<=context.width;j+=20){ctx.beginPath();ctx.moveTo(j,0);ctx.lineTo(j,context.width);ctx.moveTo(0,j);ctx.lineTo(context.width,j);ctx.strokeStyly="#eee";ctx.stroke();ctx.closePath();}//画蛇for(var i=0;i<snake.length;i++){ctx.beginPath();ctx.fillRect(snake[i].x*20,snake[i].y*20,20,20);ctx.closePath();}}// 创造食物变量function createFoodVar(){if(food.length==0){createFood();function createFood(){food=[{x:parseInt(Math.random()*(context.width)/20),y:parseInt(Math.random()*(context.height)/20)}];for(var i=0;i<snake.length;i++){if ((food[0].x==snake[i].x)&&(food[0].y==snake[i].y)) {createFood();}}}}}//蛇捕食function crashEat(){if (food.length!=0 ) {if((snake[0].x==food[0].x && snake[0].y==food[0].y)){snake.push(food);food=[];score();}}}//创建规则让蛇死function RuleDie(){var flag=false;for(var i=1;i<snake.length;i++){if(snake[0].x==snake[i].x&&snake[0].y==snake[i].y){flag=true;}}if ((snake[0].x<=0&&dir==37)||(snake[0].x>=context.width/20-1&&dir==39) || (snake[0].y<=0&&dir==38)||(snake[0].y>=context.height/20-1&&dir==40)) {alert("头部擦伤，请疗养，再来一局吧！");window.clearInterval(timer);}else if(flag){alert("咬到自己了,快住口！");window.clearInterval(timer);}else{snake.unshift(snake.pop());}}//创建规则不死技能function RuleNoDie(){if (snake[0].x<0&&dir==37) {snake[0].x=context.width/20;}if (snake[0].x>=context.width/20&&dir==39) {snake[0].x=0;}if (snake[0].y>=context.height/20&&dir==40) {snake[0].y=0;}if (snake[0].y<0&&dir==38) {snake[0].y=context.height/20;}snake.unshift(snake.pop());}//暂停function pause(){window.clearInterval(timer);var pause=document.getElementById("pause_begin");pause.setAttribute("value","继续");pause.setAttribute("onclick","begin()");}//继续function begin(){timer=window.setInterval(onframe,speed);var pause=document.getElementById("pause_begin");pause.setAttribute("value","暂停");pause.setAttribute("onclick","pause()");}//重新开始 function refrash(){window.location.reload();}//得分function score(){scoreValue+=10;var score=document.getElementById("score");score.setAttribute("value",scoreValue);}//自由行动function free(){createFoodVar();if(food[0].x<snake[1].x){dir=37;}if(food[0].x>snake[1].x){dir=39;}if (food[0].y<snake[1].y) {dir=38;}if (food[0].y>snake[1].y) {dir=40;}}//点击加速function speedSnake(){speed-=10;if (speed<=0) {speed=0;}var speedSnake=document.getElementById("speedSnake");speedSnake.setAttribute("value","当前速度:"+speed+"ms");window.clearInterval(timer);timer=window.setInterval(onframe,speed);}</script></body></html>
注：可以设置一个背景图，是界面更加美观！
阅读全文
1 0