贪吃蛇游戏更是一种童年的纪念了。虽然现在仍旧有许多的贪吃蛇游戏，什么贪吃蛇大作战、贪吃蛇蛇等等。但是有的时候还是会怀念以前的老版本的贪吃蛇，没有竞争对手，没有时间限制，只需要不咬到自己的身体、不触碰到墙壁，慢慢的活下来。
今天，带大家重温一下当年的怀旧贪吃蛇，教你怎么用Java这门编程语言编写一个当场就能玩的贪吃蛇小游戏。
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<style type="text/css">
canvas{
box-shadow: 0 0 10px #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas width="1200" height="800" id="canvas"></canvas>
</body>
<script type="text/javascript">
$(function(){
//创建画布
//绘制矩形
function Rect(x,y,width,height,color){
//矩形x轴坐标
this.x=x;
//矩形y轴坐标
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;//蛇头的x坐标
var y = this.head.y;//蛇头的y坐标
//循环创建身体
for(var i=0;i<3;i++){
var rect = new Rect(x,y,40,40,'gray');
this.body.push(rect);
x -= 40;
}
}
//tianjia
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(item in this.body){
// if(isRectHit(this.head,this.body[item])){
// 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 Draw(canvas){
this.canvas=canvas;
//检查画布
this.check = function(){
if (!this.canvas.getContext) {
return false;
}else{
return true;
}
}
this.main = function(){
//检测兼容
if (!this.check()) {
console.log('浏览器不支持canvas');
return false;
}
Draw.prototype.xt = this.canvas.getContext('2d');
//创建蛇
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);
}
},150);
}
}
//this.prototype.isEatFood=true;
//随机产生食物
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,y,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 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){
//如果是返回true
return true;
}else{
//如果不是返回false
return false;
}
}
var draw=new Draw($('#canvas')[0]);//创建一个画布
draw.main();//画入口函数
});
</script>
</html>
效果：
