如何使用jquery编写贪吃蛇小游戏
首先利用canvas创建画布
<canvas id="canvas" width="800" height="800"></canvas>
这里需要注意一下 创建的画布的宽高要整除蛇和食物的宽高 不然会有几个像素的错位
由于我的画布是创建的800800所以 下面小蛇和食物的宽高均为4040
给canvas设置一个小样式并链入jqueryCDN
<style type="text/css">
#canvas {
box-shadow: 0 0 10px 0;
display: block;
margin: 20px auto;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
创建画布检测浏览器是否兼容canvas
$(function() {
function Draw(canvas) {
this.canvas = canvas;
this.check = function() {
//检测浏览器是否支持canvas
if (!canvas.getContext) {
return false;
} else {
return true;
}
}
/*
*[main description] canvas 绘图的主函数
* @return {[type]} canvas [description]
*/
this.main = function() {
//检测兼容
if (!this.check()) {
console.log('浏览器不支持canvas');
return false;
}
Draw.prototype.xt = this.canvas.getContext('2d');
//在main里面创建绘制一条蛇并产生食物
var snake = new Snake(this);
snake.draw();
//随机产生一个食物
var food = randFood(snake);
food.draw();
//做一个动画的定时器
Draw.prototype.timer = setInterval(function() {
//清楚旧的图像
Draw.prototype.xt.clearRect(0,0,this.canvas.width,this.canvas.height);
//改变蛇的位置
if (!snake.move()) {
clearInterval(Draw.prototype.timer);
alert('游戏结束！')
}
//重新绘制图形
snake.draw();
//重新创建食物
food.draw();
//是否吃到了食物
if(isRectHit(food,snake.head)){
Snake.prototype.isEatFood = true;
//重新随机产生食物
food = randFood(snake);
}
}, 80);
}
利用面向对象定义x,y,宽，高以及颜色
/*
* [Rect description]
* @param number x 矩形起始点x坐标
* @param number y 矩形起始点y坐标
* @param number width 矩形的宽度
* @param number height 矩形的高度
* @param string color 矩形的填充颜色
*/
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,obj.canvas.height/2, 40, 40, 'red');
//创建蛇身
this.body = []; //表示多个身体
var x = this.head.x - 40;
var y = this.head.y;
循环创建身体
//初始默认为1个头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 (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++) {
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){
isInSnake = false;
//产生两个位置 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,y,40,40,'green');
//判断这个位置是否在蛇上
//是否在蛇头上
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 R2_min_x = rect2.x;
var R1_min_y = rect1.y;
var R2_min_y = rect2.y;
var R1_max_x = rect1.x+40;
var R2_max_x = rect2.x+40;
var R1_max_y = rect1.y+40;
var R2_max_y = rect2.y+40;
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绘制图像
})
最终效果截图
