canvas贪吃蛇
Posted SongChunMin_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas贪吃蛇相关的知识，希望对你有一定的参考价值。
canvas贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body
text-align: center;
#canvas
box-shadow: 0 5px 40px black;
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
<!--<script src="snake.js"></script>-->
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); //获取画板
var snake =
head:null, //蛇头
snakeArray:null ,//整蛇数组、包括蛇头
direction:"right"//蛇的运动方向，后期根据键盘来定
;
initSnake() ;//初始化
drawSnake() ;//绘制到页面上
var foot = randomCreateFoot(); //得到食物
draw(foot);
//让蛇动起来
var t = setInterval(function ()
context.clearRect(0,0,canvas.width,canvas.height);
moveSnake() ;//移动蛇
drawSnake() ;//绘制到页面上
draw(foot) ;
,500);
//蛇移动
function moveSnake()
/* 蛇移动原理：
* (1)创建一段，放到蛇头的位置。
* (2)将蛇头的位置，往前推进20px，到底往哪个方向推进，就需要根据当前按键盘的方向了。
* (3)如果吃到了食物，就不删除最后一节，否则删除删除最后一节
*/
var snakeArray = snake.snakeArray;
var modiy = createSectionObj(snake.head.x,snake.head.y,20,20,"gray");
snakeArray.splice(1,0,modiy);
//修改蛇头
switch (snake.direction)
case "up" :
snake.head.y = snake.head.y - 20;
break;
case "down" :
snake.head.y = snake.head.y + 20;
break;
case "left" :
snake.head.x = snake.head.x - 20;
break;
case "right" :
snake.head.x = snake.head.x + 20;
break;
if(isEat())
foot = randomCreateFoot();
else
snakeArray.pop();
if(isGameOver())
clearInterval(t);
// setTimeout(function ()
// context.clearRect(0,0,canvas.width,canvas.height);
// ,500);
alert("game Over :"+snakeArray.length);
//随机出现食物
function randomCreateFoot()
/*
* 蛇的一块一块是宽度和高度是20，所以我们将canvas的宽度和高度分成多块，
* 食物随机出现在某一块上
*
* 既然是随机出现食物，有可能出现的位置刚好是在蛇身上。
* 所以，如果出现在蛇身上，需要重新生成
*
* */
var widthRange = canvas.width / 20 - 1;
var heightRange = canvas.height / 20 - 1;
var x = Math.round(Math.random() * widthRange) * 20;
var y = Math.round(Math.random() * heightRange) * 20;
return createSectionObj(x,y,20,20,"yellow");
//初始化 -默认蛇的长度是4
function initSnake()
var snakeArray = []; //数组的第一个作为蛇头
for(var i = 0;i < 4;i++)
var sectionObj = createSectionObj(20*i,0,20,20,"gray");
snakeArray.unshift(sectionObj);
//蛇头的颜色是红色的
var head = snakeArray[0];
head.color = "red";
//将两个后面常用的东西定为属性，方便后面调用
snake.head= head;
snake.snakeArray = snakeArray;
//创建一节蛇对象
function createSectionObj(x,y,w,h,color)
return
x:x,
y:y,
w:w,
h:h,
color:color
//判断是否吃到食物
function isEat()
if(foot.x == snake.head.x && foot.y == snake.head.y)
return true;
else
return false;
//绘制蛇
function drawSnake()
var snakeArray = snake.snakeArray;
for(var i = 0;i< snakeArray.length;i++)
var section = snakeArray[i];
draw(section)
//绘制一节蛇
function draw(section)
context.beginPath();
context.fillStyle = section.color;
context.rect(section.x,section.y,section.w,section.h);
context.fill();
context.stroke();
//判断游戏是否结束
function isGameOver()
/*
* (1)头碰到墙壁
* (2)头碰到自己
* */
var canvasWidth = canvas.width;
var canvasHeigh = canvas.height;
var head = snake.head;
if(head.x < 0 || head.y < 0 || head.x > canvasWidth || head.y > canvasHeigh )
return true;
for (var i = 1;i<snake.snakeArray.length;i++)
var section = snake.snakeArray[i];
if(section.x == head.x && section.y == head.y)
return true;
return false;
//根据键盘事件，判断蛇头的方向
document.addEventListener("keydown",function (e)
var keycode = e.keyCode;
/* 40:下,
* 38:上,
* 37:左,
* 39:右；
*/
//注意：如果原来蛇头是往右，不能直接向左，不能直接掉头
if(keycode == 40 && snake.direction != "up")
snake.direction = "down";
else if(keycode == 38 && snake.direction !="down")
snake.direction = "up";
else if(keycode == 39 && snake.direction !="left")
snake.direction = "right";
else if(keycode == 37 && snake.direction !="right")
snake.direction = "left";
e.preventDefault();
);
</script>
</html>以上是关于canvas贪吃蛇的主要内容，如果未能解决你的问题，请参考以下文章