canvas贪吃蛇

Html

Css


得分：

 #can {
	border:1px salmon solid;
	background:greenyellow;
}
#grade {
	font:bold 1.em/20px "楷体";
}

window.onload = function() {
     //全局变量
     var can = document.getElementById("can");
     var pen = can.getContext("2d");
     var put_X = put_Y = 0; //定义食物坐标点
     var size = 10; //定义食物的尺寸单位
     var snake_X = snake_Y = 0; //定义蛇坐标点
     var snake_Body = [] //定义蛇的身体部件
     var snake_len = 3; //定义蛇的身长，初始为3
     var direction = "r"; //定义蛇前进的方向
     var score = 0; //定义分值
     var t = ""; //蛇运动的标记

//1.放食物
     function put() {
         // put_X = Math.floor(Math.round() * 80) * size;
         put_X = Math.floor(Math.random() * 80) * size; //X坐标
         // alert(Math.random());
         put_Y = Math.floor(Math.random() * 80) * size;
         // console.log(put_Y);
         pen.beginPath();
         pen.fillRect(put_X, put_Y, size, size);
         // pen.stroke();
         //pen.arc(put_X + 5, put_Y + 5, 5, 0, 2 * Math.PI);
         //pen.fill();
         pen.closePath();
     }

put(); //开始放第一颗食物

//蛇的行为
     function snakeRun() {
         // 撞墙了
         if (snake_X < 0 || snake_X == 790 || snake_Y == 790 || snake_Y < 0) {
             alert("你死了");
             clearInterval(t);
             return false; //后面的不再运行
         }

// 蛇自残
         for (var i = 0; i < snake_Body.length - 1; i++) {
             if (snake_X == snake_Body[i].x && snake_Y == snake_Body[i].y) {
                 alert("你吃了自己");
                 clearInterval(t);
                 return false;
             }
         }

pen.fillRect(snake_X, snake_Y, size, size);
         //把蛇的身体部件压栈到数组集合,push()数组，先进后出
         snake_Body.push({
             'x': snake_X,
             'y': snake_Y
         });

if (snake_Body.length > snake_len) {
             // 保持部件初始长度
             var wb = snake_Body.shift(); //shift()数组，取出数组中第一个下标
             pen.clearRect(wb.x, wb.y, size, size);
         }

if (snake_X == put_X && snake_Y == put_Y) {
             put();
             snake_len++;
             //食物发生碰撞（吃掉食物） 
             score += 10;
             document.getElementById("grade") = score;
         }
         //方向
         switch (direction) {
             case 'r':
                 snake_X += size;
                 break;
             case 'l':
                 snake_X -= size;
                 break;
             case 't':
                 snake_Y -= size;
                 break;
             case 'd':
                 snake_Y += size;
                 break;

}
     }
     //让蛇运动
     function start1() {
         t = setInterval(snakeRun, 200);
     }
     start1();
     //蛇方向控制
     document.onkeydown = function(e) {
         switch (e.keyCode) {
             case 37:
                 if (direction != "r") {
                     direction = "l";
                 }
                 break;
             case 38:
                 if (direction != "d") {
                     direction = "t";
                 }
                 break;
             case 39:
                 if (direction != "l") {
                     direction = "r";
                 }
                 break;
             case 40:
                 if (direction != "t") {
                     direction = "d";
                 }
                 break;
         }
     }
     var start = document.getElementById("Bclick1");
     var c = true;

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas贪吃蛇



代码描述：简单贪吃蛇小游戏

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??

相关代码

canvas贪吃蛇

最新