<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#score{
position: absolute;
top: 50px;
left: 20px;
}
#score span{
color: red;
}
#again{
position: absolute;
top: 100px;
left: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="score">分数: <span>0</:span></div>
<div id="again">
再来一次
</div>
<div style="margin-left: 100px;width: 802px;">
<canvas id="snakeCanvas" width="800" height="800" style="border: 1px solid #ccc;background: lemonchiffon;">
您的浏览器不支持Canvas,请升级浏览器到最新版本
</canvas>
</div>
</body>
</html>
<script src="js/snake.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Food.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Manager.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
snake.js部分
function Snake(bodyLength,color,w){//蛇头的颜色
this.bodyLength = bodyLength;
this.color = color;
this.WIDTH = w;//一节身体的大小
this.snakeBodyArray = [];//用来存储蛇每节身体的坐标,数组里面最后一个元素是蛇头
this.prevBody = [];
this.direction = "right";
//初始化蛇的状态,注意这个方法在初始化蛇对象的时候就需要调用
this.initSnake = function(context){
for (var i=0;i<this.bodyLength;i++) {
var pos = {
x:i*this.WIDTH,
y:100
}
this.snakeBodyArray.push(pos);
}
this.drawSnakeBody(context);
}
//1.绘制身体
this.drawSnakeBody = function(context){
var body = [];
if (isDie) {
body = this.prevBody;
}else{
body = this.snakeBodyArray;
}
for (var i=0;i<body.length;i++) {
var pos = body[i];
context.beginPath();
if (i == body.length-1) {
context.fillStyle = this.color;
}else{
context.fillStyle = "orange";
}
context.fillRect(pos.x,pos.y,this.WIDTH,this.WIDTH);
context.strokeStyle = "white";
context.strokeRect(pos.x,pos.y,this.WIDTH,this.WIDTH);
context.save();
}
}
//2.移动
this.moveSnake = function(){
this.prevBody = [];
for (var i=0;i<this.snakeBodyArray.length;i++) {
this.prevBody.push(this.snakeBodyArray[i]);
}
this.snakeBodyArray.shift();
var currentHead = this.snakeBodyArray[this.snakeBodyArray.length-1];
var newHead = {};
// var newHead = {
// x:currentHead.x + this.WIDTH,
// y:currentHead.y
// }
switch (this.direction){
case "left":
newHead.x = currentHead.x - this.WIDTH;
newHead.y = currentHead.y;
break;
case "top":
newHead.x = currentHead.x;
newHead.y = currentHead.y - this.WIDTH;
break;
case "right":
newHead.x = currentHead.x + this.WIDTH;
newHead.y = currentHead.y;
break;
case "bottom":
newHead.x = currentHead.x;
newHead.y = currentHead.y + this.WIDTH;
break;
default:
break;
}
this.snakeBodyArray.push(newHead);
}
//蛇身体增加长度
this.addBody = function(){
var pos = {x:0,y:0};
this.snakeBodyArray.unshift(pos);
score++;
scoreDiv.innerHTML = "分数:" + score;
}
//检测蛇是否碰撞了墙壁或者自己
this.crashCheck = function(canvas,timer){
var snakeHead = this.snakeBodyArray[this.snakeBodyArray.length-1];
if (snakeHead.x >= canvas.width || snakeHead.x < 0 || snakeHead.y < 0 || snakeHead.y >= canvas.height) {
isDie = true;
// alert("Game Over!");
clearInterval(timer);
game();
return;
}
//循环检测身体部分是否发生了碰撞
for (var i=0;i<this.snakeBodyArray.length-1;i++) {
var bodyPice = this.snakeBodyArray[i];
if (snakeHead.x == bodyPice.x && snakeHead.y == bodyPice.y) {
isDie = true;
// alert("Game Over!");
clearInterval(timer);
game();
return;
}
}
}
}
manager.js部分
//功能:划线
function Manager(){
this.boxSize = null;//格子大小
this.numOfBox = null;//格子数量
//划线
this.drawBackgroundLine = function(boxSize,canvas,context){
this.boxSize = boxSize;
this.numOfBox = canvas.width/this.boxSize;
//横线
for (var i=1;i<this.numOfBox;i++) {
context.beginPath();
context.moveTo(0,i*this.boxSize);
context.lineTo(canvas.width,i*this.boxSize);
context.strokeStyle = "#ccc";
context.stroke();
context.save();
}
//竖线
for (var i=1;i<this.numOfBox;i++) {
context.beginPath();
context.moveTo(i*this.boxSize,0);
context.lineTo(i*this.boxSize,canvas.height);
context.strokeStyle = "#ccc";
context.stroke();
context.save();
}
}
//蛇是否吃到食物
this.snakeEatFood = function(theSnake,theFood){
//蛇头
var snakeHead = theSnake.snakeBodyArray[theSnake.snakeBodyArray.length-1];
if (snakeHead.x == theFood.x && snakeHead.y == theFood.y) {
//吃到了食物
//1.食物的位置重新随机
theFood.randomPos(theSnake);
//2.蛇身体要加长
theSnake.addBody();
}
}
}
Food.js部分
function Food(w,range){
this.x = 0;
this.y = 0;
this.w = w;
this.range = range;
//随机位置的方法
this.randomPos = function(theSnake){
var isEnd = true;
//判断食物是否随机在蛇的身上
while (isEnd){
this.x = parseInt(Math.random()*this.range)*this.w;
this.y = parseInt(Math.random()*this.range)*this.w;
for (var i=0;i<theSnake.snakeBodyArray.length;i++) {
var pos = theSnake.snakeBodyArray[i];
if (pos.x == this.x && pos.y == this.y) {
break;
}
}
if (i == theSnake.snakeBodyArray.length) {
isEnd = false;
}
}
}
//绘制食物的方法
this.drawFood = function(context){
context.beginPath();
context.fillStyle = "blue";
context.fillRect(this.x,this.y,this.w,this.w);
context.save();
}
}
main.js部分
var snakeCanvas = document.getElementById("snakeCanvas");
var context = snakeCanvas.getContext("2d");
var scoreDiv = document.getElementById("score");
var again = document.getElementById("again");
var span = scoreDiv.getElementsByTagName("span");
var lock = false;//false代表锁是打开状态
var timer = null;
var isDie = false;//false代表蛇没有死亡
var speed = 200;//蛇移动的速度
var score = 0;
//创建管理对象
var manager = new Manager();
manager.drawBackgroundLine(20,snakeCanvas,context);
var aSnake = new Snake(4,"red",manager.boxSize);
aSnake.initSnake(context);
var foods = new Food(manager.boxSize,manager.numOfBox);
//食物随机位置
foods.randomPos(aSnake);
foods.drawFood(context);
function snakePlay(){
//定时器
timer = setInterval(function(){
lock = false;//开锁
context.clearRect(0,0,snakeCanvas.width,snakeCanvas.height);
//重新绘制背景图
manager.drawBackgroundLine(20,snakeCanvas,context);
//移动蛇
aSnake.moveSnake();
//重新绘制蛇
aSnake.drawSnakeBody(context);
//重新绘制食物
foods.drawFood(context);
//判断蛇是否吃到了食物
manager.snakeEatFood(aSnake,foods);
//判断蛇是否死亡
aSnake.crashCheck(snakeCanvas,timer);
if (aSnake.snakeBodyArray.length == 10 && speed > 150) {
speed = 150;
clearInterval(timer);
snakePlay();
}
if (aSnake.snakeBodyArray.length == 20 && speed > 100) {
speed = 100;
clearInterval(timer);
snakePlay();
}
if (aSnake.snakeBodyArray.length == 30 && speed > 50) {
speed = 50;
clearInterval(timer);
snakePlay();
}
console.log(aSnake.snakeBodyArray.length);
},speed);
}
snakePlay();
function game(){
lock = false;//开锁
context.clearRect(0,0,snakeCanvas.width,snakeCanvas.height);
//重新绘制背景图
manager.drawBackgroundLine(20,snakeCanvas,context);
//重新绘制蛇
aSnake.drawSnakeBody(context);
//重新绘制食物
foods.drawFood(context);
}
//键盘的监听事件
document.onkeydown = function(event){
var ev = event || window.event;
switch (ev.keyCode){
case 37:
if ((aSnake.direction == "top" || aSnake.direction == "bottom") && lock == false) {
aSnake.direction = "left";
lock = true;
}
break;
case 38:
if ((aSnake.direction == "left" || aSnake.direction == "right") && lock == false) {
aSnake.direction = "top";
lock = true;
}
break;
case 39:
if ((aSnake.direction == "top" || aSnake.direction == "bottom") && lock == false) {
aSnake.direction = "right";
lock = true;
}
break;
case 40:
if ((aSnake.direction == "left" || aSnake.direction == "right") && lock == false) {
aSnake.direction = "bottom";
lock = true;
}
break;
default:
break;
}
}
again.onclick = function(){
window.location.reload();
}