这次我们用canvas来制作一个简单的贪吃蛇游戏。我们需要学习了解canvas的基础知识和如何来创建矩形。
1、游戏需要的游戏
(1)蛇
(2)食物
(3)食物被吃掉后随机位置出现
(4)食物不能随机出现再蛇身上
(5)蛇能动，碰到食物就变长
(6)蛇头碰到蛇身和碰到墙就结束
2、游戏思路
(1)要有蛇(画蛇)
a.蛇头
b.蛇身
(2)让蛇动起来
a.默认的开启游戏的时候有一个方向
b.键盘能控制方向
c.animate定时器
(3)有食物 随机投放
a.产生随机的位置
b.判断位置是否在蛇头或者蛇身上，如果在重新产生位置，如果不在画食物
(4)吃食物
a.判断迟到食物 碰撞检测
b.吃到食物添加蛇身
(5)判断游戏结束
a.蛇头碰到蛇身
b.蛇头碰到墙壁
3.代码
我们首先要创建一个canvas，游戏要在画布上实现，HTML部分如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<style>
canvas{
box-shadow: 0 0 10px #000;
display: block;
margin:20px auto;
}
</style>
</head>
<body>
<canvas width="1200" height="800" id="canvas"></canvas>
</body>
</html>
第一步创建蛇头蛇身 ，添加蛇默认的运动方向
// 蛇头(准备创建的方块)的元素
function Rect(x,y,width,height,color){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
}
// 完善矩形 绘制矩形
Rect.prototype.draw = function(){
// 开始绘画矩形
Draw.prototype.xt.beginPath();
// 画笔颜色
Draw.prototype.xt.fillStyle = this.color;
// 填充矩形
Draw.prototype.xt.fillRect(this.x,this.y,this.width,this.height);
// 描边
Draw.prototype.xt.strokeRect(this.x,this.y,this.width,this.height);
}
// 构造对象蛇
function Snake(obj){
// 画蛇头 蛇头的颜色是红色的
this.head = new Rect(obj.canvas.width/2-20,obj.canvas.height/2-20,40,40,'red');
//定义一个空数组存放组成整蛇的方块对象
this.body = [];
//表示多个身体
// 蛇身的x比蛇头移动
40 var x = this.head.x-40;
// 距离y不变
var y = this.head.y;
// 循环创建身体 默认蛇的长度是3
for (var i = 0; i < 3; i++) {
// 每吃一个东西蛇身会加一个 蛇身的颜色是灰色的
var rect = new Rect(x,y,40,40,'gray');
this.body.push(rect);
x-=40;
}
}
// 添加蛇默认的运动方向 向右
// 公有属性，任何地方能够修改方向
Snake.prototype.direction = 1;
// 定义一个是否吃到食物的标记
Snake.prototype.isEatFood = false;
// 画蛇方法
Snake.prototype.draw = function(){
// 画蛇头
this.head.draw();
// 循环创建蛇身
for (var i = 0; i < this.body.length; i++) {
this.body[i].draw();
}
}
第二步让蛇动起来，里面包含风道墙壁和蛇头蛇身然后就游戏结束
// 蛇移动的方法
Snake.prototype.move = function(){
// 检测碰撞到墙壁
if (this.head.x<40 || this.head.y<-40 || this.head.x>$('#canvas')[0].width-40-40 || this.head.y>$('#canvas')[0].height-40-40) {
return false;
}
// 检测蛇头与蛇身
for (var i =0;i<this.body.length;i++) {
console.log(this.body[i])；
if (isRectHit(this.head,this.body[i])) {
return false;
}
}
// 加一个头
var rect = new Rect(this.head.x,this.head.y,40,40,'gray');
// 添加身体开始的地方
this.body.splice(0,0,rect);
// 去掉一个尾巴,
if (Snake.prototype.isEatFood) {
Snake.prototype.isEatFood = false;
// 重新随机产生食物
}else{
this.body.pop();
}
switch(this.direction){
case 0:
this.head.y -= 40
break;
case 1:
this.head.x += 40
break;
case 2:
this.head.y +=40
break;
case 3:
this.head.x -= 40
break;
}
return true;
第三步食物
// 添加键盘监听
$(window).keydown(function(e){
switch(e.keyCode){
case 37:
// 如果当前的方向是向右的，不能改为向左
if (Snake.prototype.direction == 1) {
return;
}
Snake.prototype.direction = 3;
break;
case 38:
// 如果当前的方向是向下的，不能改为向上
if (Snake.prototype.direction == 2) {
return;
}
Snake.prototype.direction = 0;
break;
case 39:
if (Snake.prototype.direction == 3) {
return;
}
Snake.prototype.direction = 1;
break;
case 40:
if (Snake.prototype.direction == 0) {
return;
}
Snake.prototype.direction = 2;
break;
}
})
// 随机产生食物
function randFood(snake){
// 是否在蛇身上
isInSnake = true;
while(isInSnake){
// 产生两个位置
x,y var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;
var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;
// 创建食物矩形
var food = new Rect(x-20,y-20,40,40,'green');
isInSnake = false;
// 判断食物是否在蛇身
// 是否是蛇头
if (isRectHit(food,snake.head)) {
isInSnake = true;
continue;
}
// 是否是蛇身
for (var i=0; i < snake.body.length; i++) {
if (isRectHit(food,snake.body[i])) {
isInSnake = true;
break;
}
}
}
return food;
}
// 产生随机数的函数也就是随机产生食物
function getRandPosition(min,max){
return Math.round(Math.random()*(max-min)+min);
}
// 判断矩形是否重合
function isRectHit(rect1,rect2){
var R1_min_x = rect1.x;
var R1_min_y = rect1.y;
var R2_min_x = rect2.x;
var R2_min_y = rect2.y;
var R1_max_x = rect1.x + 20;
var R2_max_x = rect2.x + 20;
var R1_max_y = rect1.y + 20;
var R2_max_y = rect2.y + 20;
// 两个图形的最大边界和最小边界 就是食物和蛇头的碰撞
var min_x = Math.max(R1_min_x,R2_min_x);
var max_x = Math.min(R1_max_x,R2_max_x);
var min_y = Math.max(R1_min_y,R2_min_y);
var max_y = Math.min(R1_max_y,R2_max_y);
if (min_x<max_x&&min_y<max_y) {
return true;
}else{
return false;
}
}
var draw = new Draw($('#canvas')[0]);
//创建一个绘图的实例对象
draw.main();
//调用main绘制图像
});
4、效果图如下：
以上是贪吃蛇游戏的全部代码，虽然代码很详细但大家还需要认认真真理解，希望本文对大家有所启发，不懂的地方可以问我。
