效果演示
贪吃蛇.gif
制作简介
游戏采用纯jcp编写，是作者根据视频学习的，还有一些地方不够完善，你可以指出来，作者会看到的。
变量声明
你需要先思考游戏会利用哪些变量。
- 游戏需要一个区域，所以会存在游戏的宽和高
- 蛇，其实贪吃蛇的身子就是一个数组而已，存储了几个相邻的坐标点，所以我们需要一个数组
- 食物，食物就是一个随机出现的坐标点，但是这个坐标点不能在蛇身上，不恩能够在区域外边
- 一个比例：这个比例用来确定游戏元素的大小，基本上我们所有的游戏元素在绘制的时候都要和这个变量相乘，以扩大指定的倍数。
- 游戏的方向，这个方向在游戏参与者按下方向键时候会被改变
- 速度，蛇移动的速度。
所以你的变量声明应该是下面这样的：
//1 一个游戏区域
var gameHeight;
var gameWidth;
//2 蛇
var snakeArray;
//3 食物
var food;
//4 方块
var px;
//5 游戏速度
var speed;
//设置按键的值
var left=37;
var right=39;
var up=38;
var down=40;
//表示舌头的方向
var d;
这里的按键为什么是37、38、39、40
学过C的同学应该知道，这些数字是相应的符号对应的ASCII码，系统通过判断这个来确定你的输入的。
游戏具体编写
首先我们要创建一个canvas，用于绘制图形
<canvas id="c1" width="600" height="600"></canvas>
下面是我们的javascript代码
<script type="text/javascript">
。。。
</script>
上文中的变量声明放在script标签中，下文的所有代码也都是在这个标签中的。
同时在script中添加下面代码，以获取到我们创建的canvas，
var c = document.getElementById("c1");//获取canvas
var ctx = c.getContext("2d");//采用2d绘制
1 初始化游戏所需数据
你需要定义一个函数用于初始化，这个函数完成如下功能
- 确定游戏的宽和高
- 确定px（游戏元素放大比例）的大小
- 初始化food
- 初始化snakeArray
- 初始化游戏方向
- 执行游戏
代码如下
//初始化游戏需要的数据
init();
function init (){
gameHeight = c.height;
gameWidth = c.width;
snakeArray = [];
px = 20;
food = {"x":-1,"y":-1};
d = right;
initSnake(3);//初始化蛇
initfood();//初始化食物
play();//开始游戏
}
2 初始化蛇
你只需要通过循环向snakeArray中添加坐标点即可
//初始化蛇 动态传递蛇的长度
function initSnake(length) {
for(var i = length; i > 0; i--)
{
snakeArray.push({"x": i , "y": 1 });
}
}
3 初始化食物
初始化食物的时候要注意
- 食物随机产生
- 食物不能产生在蛇身上
代码如下：
function initfood () {
food["x"] = Math.floor(gameHeight/px * Math.random());
food["y"] = Math.floor(gameWidth/px * Math.random());
for (var i = 0; i < snakeArray.length; ++i) {
if (food["x"] == snakeArray[i]["x"] && food["y"] == snakeArray[i]["y"]) {
initfood();
}
}
}
其中
Math.floor() 取整
Math.random() 随机数
除以px是因为后边我们绘制食物的时候要乘以px
4 play函数，开始游戏
因为play函数是不断循环执行的，所以
setInterval(play,300);//第一个参数是要执行的函数，第二个参数是执行的时间间隔，单位是毫秒
play函数要有以下功能
- 绘制游戏区域
- 移动蛇
- 绘制蛇
- 绘制食物
- 判断是不是迟到食物
- 判断游戏结束
另外，你可以在这个函数中添加你想要达到的效果
function play () {
ctx.fillStyle = "white";
ctx.fillRect(0,0,gameWidth,gameHeight);
ctx.strokeStyle = "#fffff";
ctx.strokeRect(0,0,gameWidth,gameHeight);
moveSnake();
paintSnake();
paintCell(food["x"],food["y"]);
if (snakeArray[0]["x"] == food["x"] && snakeArray[0]["y"] == food["y"] ){
initfood();
snakeArray.push({"x": food["x"] , "y": food["y"] });
}
for(var i = 1; i < snakeArray.length; ++i){
if (snakeArray[0]["x"] == snakeArray[i]["x"] && snakeArray[0]["y"] == snakeArray[i]["y"] ){
alert("Gameover!");
init();
return;
}
}
if (snakeArray[0]["x"] == -1 || snakeArray[0]["y"] == -1 || snakeArray[0]["x"] == gameWidth/px || snakeArray[0]["y"] == gameHeight/px){
alert("Gameover!");
init();
return;
}
}
5 移动蛇
在这个函数中，我们要做到
- 获取舌头的坐标
- 判断蛇前进的方向
- 根据前进的方向删除蛇尾，添加新的蛇头
代码如下
function moveSnake () {
flagd = false;
var p = {"x":snakeArray[0]["x"],"y":snakeArray[0]["y"]}
if (d == left) p["x"]--;
else if (d == right) p["x"]++;
else if (d == up) p["y"]++;
else if (d == down) p["y"]--;
snakeArray.pop();
snakeArray.unshift(p);
flagd = true;
}
其中
snakeArray.pop(); 删除数组的最后一个元素
snakeArray.unshift(p); 向数组中添加一个新元素p
6 绘制蛇
没什么好说的，就是绘制就是
function paintSnake(){
ctx.fillStyle = "blue";
for(var i = 0; i < snakeArray.length; ++i){
ctx.fillRect(snakeArray[i]["x"]*px,snakeArray[i]["y"]*px,px-1,px-1);
}
}
7 绘制食物
同样没什么好说的
function paintCell (x, y) {
ctx.fillStyle = "red";
ctx.fillRect(x*px,y*px,px-1,px-1);
}
8 改变方向
这是最重要的一步，不然你的蛇只会一头撞死在墙上
首先，在body标签上写下键盘按下时候执行函数changeD(event)
<body onkeydown="changeD(event)">
接着编写changD函数
function changeD (e) {
if (e.keyCode == 37) d = left;
else if (e.keyCode == 40) d = up;
else if (e.keyCode == 39) d = right;
else if (e.keyCode == 38) d = down;
}
完工
你可以调试运行一下，愉快的玩耍。
假如你没有成功，可以在评论区提出疑问，或者自己钻研源码。
源码下载：下载（访问密码 9f9b）
