纯新手HTML5运用canvas制作贪吃蛇小游戏
以下运用notpad++示例：
一、创建一个html文件
- 桌面新建文件夹；
- 运行notpad++新建文件，并保存在该文件夹中，命名index.html文件；
- 开始在index.html中编写我们的代码，如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>
<body>
</body>
</heml>
1.我们要了解什么是canvas，该如何用canvas来进行画图
<canvas> 标签在Html5中只是图形容器，必须通过脚本来绘制图形 (通常是JavaScript)。
2.了解之后接着开始编写我们的代码
1、在<body> </body>中间添加一下代码,创建一个宽480px和高320px大小的canvas,id属性为canvas
<canvas id="canvas" width="480" height="320" style="border:solid; position:absolute; left:200px; top:50px;">
canvas画图！！
</canvas>;
3.canvas创建好之后要通过脚本来进行绘制-----创建绘制脚本文件
新建文件并保存，命名为snakeJS.js 创建之后 我们在html中引用
<script language="javascript" src="snakeJS.js"></script>
以上index.html中的代码已完成，接下来开始编写JS 文件中的代码
二、绘制canvas并编写游戏逻辑
1、在JS文件中绘制canvas,如下：
创建
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
2、创建活动范围（范围自定),游戏蛇以及食物
1-->墙壁 0-->活动范围
var map = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
];
function gameObject()
{
this.iRow = -1;
this.iCol = -1;
this.iRowBk = 1;
this.iColBk = 1;
this.iDir = 1;
};
var snake = [];
snake[0] = new gameObject();
snake[0].iRow = 1;
snake[0].iCol = 1;
var food = new gameObject();
randFoodPos();
function randFoodPos()
{
food.iRow = getRand(1, 8);
food.iCol = getRand(1, 13);
};
function getRand(begin, end)
{
return Math.floor(Math.random()*(end-begin) + begin);
};
3、画出所定义的墙壁、蛇头和食物
window.setInterval("drawGame();", 10);
drawGame = function(){
context.clearRect(0,0,480,320);
context.save();
context.strokeStyle="#000000";
for(var i = 0; i < 10; i++)
{
for(var j = 0; j < 15; j++)
{
if(map[i][j] == 1)
context.strokeRect(j*32, i*32, 32, 32);
}
}
for(var i = 0; i < snake.length; i++)
{
if(i == 0){
context.fillStyle = "#FF0000";
context.fillRect(snake[i].iCol*32, snake[i].iRow*32, 32, 32);
}
else{
if(snake[i].iRow <= 0)
break;
context.strokeStyle = "#00FF00";
context.strokeRect(snake[i].iCol*32, snake[i].iRow*32, 32, 32);
}
}
context.strokeStyle = "#0000ff";
context.beginPath();
context.arc(food.iCol*32+16, food.iRow*32+16, 16, 0, Math.PI*2, true);
context.stroke();
};
4、重点-> 游戏思路：
1、 控制蛇头的移动
2、 吃食物
3、 增长身体
4、 随机刷新食物
window.addEventListener('keydown', dokeyDown, true);
function dokeyDown(e) {
var keyID = e.keyCode ? e.keyCode : e.which;
if(keyID == 37 || keyID == 65)
{
snake[0].iDir = 0;
}
else if(keyID == 39 || keyID == 68)
{
snake[0].iDir = 1;
}
else if(keyID == 38 || keyID == 87)
{
snake[0].iDir = 2;
}
else if(keyID == 40 || keyID == 83)
{
snake[0].iDir = 3;
}
};
moveSnake = function()
{
snake[0].iRowBk = snake[0].iRow;
snake[0].iColBk = snake[0].iCol;
if(snake[0].iDir == 0)
snake[0].iCol--;
else if(snake[0].iDir == 1)
snake[0].iCol++;
else if(snake[0].iDir == 2)
snake[0].iRow--;
else if(snake[0].iDir == 3)
snake[0].iRow++;
if(snake[0].iRow <= 0
|| snake[0].iRow >= 9
|| snake[0].iCol <= 0
|| snake[0].iCol >= 14)
{
alert("你已死亡，单击《确定》重新游戏！");
snake.splice(1, snake.length-1);
snake[0].iRow = 1;
snake[0].iCol = 1;
snake[0].iDir = 1;
randFoodPos();
}
for(var i = 1; i < snake.length; i++)
{
snake[i].iRowBk = snake[i].iRow;
snake[i].iColBk = snake[i].iCol;
snake[i].iRow = snake[i-1].iRowBk;
snake[i].iCol = snake[i-1].iColBk;
}
};
eatFood = function()
{
if(snake[0].iRow == food.iRow
&& snake[0].iCol == food.iCol)
{
randFoodPos();
snake[snake.length] = new gameObject();
}
};
5、最后当让是让它运动起来啦
window.setInterval("upDate();", 200);
upDate = function()
{
moveSnake();
eatFood();
};
三、结束
以上，有很多改进的地方，有需要的童鞋可以自行去添加美化。
感谢阅读！
|