用html5中canvas标签写个贪吃蛇

来源：互联网发布：mac怎么用oracle 编辑：程序博客网时间：2024/05/06 01:55

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>沙舟狼客制作</title><style type="text/css"><!--body{margin:0 auto;background:#6699FF;width:960px;height:800px;}nav{width:960px;height:50px;float:left;}canvas {border: thick solid #000000;width:500px;height:500px;float:left;}#score{width:100px;height:500px;font-size:18px;font-weight:bold;float:left;}#score span{color:#FF0000;}--></style></head><body><nav>贪吃蛇（按键WSAD：分别是上下左右）</nav> <canvas id="canvas" width="500" height="500">  </canvas> <div id="score"> 得分：<span>0</span> </div> </body></html>

<script>var ctx = document.getElementById("canvas").getContext("2d"); var scoreEl = document.getElementById("score");//当前前第一结蛇头的位置var x = 40;var y = 0;//速度var speed = 10 ;//方向：1:up;2:down;3:left;4:right;var d = 4;//定义蛇身数组var snakes = new Array();//定义食物数组var foods = new Array();//记录分数var score = 0;//snakes[0] = {x:x,y:y};//初始化舍身长度var len = 5;//初始化function init(){ctx.fillStyle = "#ff0000";//画蛇神for(var i = len-1;i>=0;i--){snakes[len-1-i] = {x:i*10,y:0};ctx.fillRect(snakes[len-1-i].x,snakes[len-1-i].y,10,10);}//花食物foods[0] = {x:parseInt(Math.random()*490),y:parseInt(Math.random()*490)};ctx.fillRect(foods[0].x,foods[0].y,10,10);}init();print();//键盘监听function keydown(e){switch(e.keyCode){//上Wcase 87:if(d!=2){d = 1;}break;//下Scase 83:if(d!=1){d = 2;}break;//左Acase 65:if(d!=4){d = 3;}break;//右Dcase 68:if(d!=3){  d = 4;}break;//测试case 38:addSnake();break;default:}}//画食物和社function draw(_x,_y){//alert("_x:"+_x+";_y:"+_y);ctx.clearRect(0,0,500,500);ctx.fillStyle="#996633";ctx.fillRect(0,0,500,500);ctx.fillStyle="#FF0000";//循环替代位置，从最后一个开始for(var i = len-1;i>=1;i-- ){//console.log(i);snakes[i].x = snakes[i-1].x;snakes[i].y = snakes[i-1].y;ctx.fillRect(snakes[i].x,snakes[i].y, 10, 10);}snakes[0].x = _x;snakes[0].y = _y;ctx.fillRect(_x, _y, 10, 10);ctx.fillStyle="#00FF00";for(var i = 0;i<foods.length;i++){ctx.fillRect(foods[i].x,foods[i].y,10,10);}//print();}//1:up;2:down;3:left;4:right;function move(){switch(d){case 1:y = y - speed; if(y<0){y = 490;}break;case 2:y = y + speed;if(y>490){y = 0;}break;case 3:x = x-speed;if(x<0){x = 490;}break;case 4:x = x + speed;if(x>490){x = 0;}break;default:}draw(x,y);}function addSnake(){snakes[len]= {x:snakes[len-1].x+10,y:snakes[len-1].y+10};len = len + 1;}function createFood(){var fx = parseInt(Math.random()*490);var fy = parseInt(Math.random()*490);if((Math.abs(fx-x)>=10)&&(Math.abs(fy-y)>=10)){foods[foods.length] = {x:fx,y:fy};return false;}else{return true;}}function deleteFood(fIndex){foods.splice(fIndex,1);}function checkHit(){for(var i=0;i<foods.length;i++){var fx = foods[i].x;var fy = foods[i].y;if((Math.abs(fx-x)<10)&&(Math.abs(fy-y)<10)){addSnake();deleteFood(i);while(createFood()){}//createFood();score +=10;scoreEl.innerHTML = "得分：<span>"+score+"</span>";}}}setInterval("move()",50);setInterval("checkHit()",50);//setInterval("createFood()",5000);document.onkeydown = keydown;function print(){var outString = "";for(var i = 0;i<snakes.length;i++){outString += i+":{x:"+snakes[i].x+",y:"+snakes[i].y+"};"}//alert(outString);console.log(outString);}</script>

代码注释很详细，希望对大家有所帮助，但是换行的<br/>标签出来，看着很不爽！

预览效果图：

查看图片附件

0 0