-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path贪吃蛇.html
176 lines (141 loc) · 4.15 KB
/
贪吃蛇.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="jquery-1.4.1.js"></script>
<script>
var canv=document.getElementById("canvas");
var ctx=canv.getContext("2d");
var score=0;
//构造函数
var Block=function(col,row,size){
this.col=col;
this.row=row;
this.size=size;
};
//构造函数draw原型
Block.prototype.draw=function(){
ctx.fillRect(this.col*this.size,this.row*this.size,this.size,this.size);
};
//创建snake对象
var snake={
body:[
new Block(20,20,10),
new Block(20,21,10),
new Block(20,22,10)
],
direction:"right", //开始时运动的方向
};
//画出snake,并引用了构造函数原型
snake.draw=function(){
for(var i=0;i<this.body.length;i++){
this.body[i].draw();
}
};
//snake的移动，吃到球则变长，否则不变
snake.move=function(){
var head=this.body[0];//创建一个变量head，用来保存蛇头的对象
//根据snake运动的方向创建新的对象newhead
if(snake.direction=="right"){
var newhead=new Block(head.col+1,head.row,head.size);
}
if(snake.direction=="left"){
var newhead=new Block(head.col-1,head.row,head.size);
}
if(snake.direction=="up"){
var newhead=new Block(head.col,head.row-1,head.size);
}
if(snake.direction=="down"){
var newhead=new Block(head.col,head.row+1,head.size);
}
//边缘碰撞检测
if(newhead.col<0 || newhead.col>39){
clearInterval(intervalId);
gameOver();
}
if(newhead.row<0 || newhead.row>39){
clearInterval(intervalId);
gameOver();
}
//碰到自己身体
for(var i=0;i<this.body.length;i++){
if(this.body[i].col==newhead.col && this.body[i].row==newhead.row){
clearInterval(intervalId);
gameOver();
}
}
this.body.unshift(newhead);//通过unshift方法将对象newhead添加到数组中
//判断吃到苹果
if(newhead.col==apple.posX && newhead.row==apple.posY){
while(true){
score=score+100;
var checkApple=false;
apple.posX=Math.floor(Math.random()*40);
apple.posY=Math.floor(Math.random()*40);
for(var i=0;i<this.body.length;i++){
if(this.body[i].col==apple.posX && this.body[i].row==apple.posY)
checkApple=ture;
}
if(!checkApple)
break;
}
}else{
this.body.pop();//通过pop方法将数组中最后一个对象删除
}
};
//创建苹果对象
var apple={
posX:Math.floor(Math.random()*40), //floor保证产生的位置值是个整数，random()*40是产生一个0～40的随机数
posY:Math.floor(Math.random()*40),
sizeR:5
};
apple.draw=function(){
ctx.fillStyle="Red";//将填充颜色变为红色
ctx.beginPath();
ctx.arc((this.posX*2+1)*this.sizeR,(this.posY*2+1)*this.sizeR,this.sizeR,0,Math.PI*2,false);
ctx.fill();
ctx.fillStyle="Black";//将填充颜色变回黑色
};
//游戏结束
var gameOver=function(){
ctx.font="60px Comic Sans MS";
ctx.fillStyle="orange";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText("GAME OVER",200,200);
ctx.fillStyle="black";
};
//贪吃蛇的控制，蛇头每次只有两个方向可走
$("body").keydown(function(event){
if(event.keyCode==37 && snake.direction!="right"){
snake.direction="left";
}
if(event.keyCode==38 && snake.direction!="down"){
snake.direction="up";
}
if(event.keyCode==39 && snake.direction!="left"){
snake.direction="right";
}
if(event.keyCode==40 && snake.direction!="up"){
snake.direction="down";
}
});
//想让snake运动起来，所以添加定时功能
var intervalId = setInterval(function(){
ctx.clearRect(0,0,400,400);
ctx.textBaseline="top";
ctx.font="20px Arial";
ctx.textAlign="left";
ctx.fillText("Score:"+score,5,5);
snake.draw();
snake.move();
apple.draw();
ctx.strokeRect(0,0,400,400);
},200); //0.2秒变化一次
</script>
</body>
</html>