您的位置：首页 > Web前端 > HTML5

贪吃蛇游戏

2016-09-20 09:23 435 查看

HTML文档:

<!DOCTYPE HTML>
<html lang="zh-en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/idnex.css" />
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<canvas id="cav"></canvas>
<div id="end">
<div class="gold">您的分数是:<span class="number">6</span></div>
<div class="retry">重新开始</div>
</div>
</body>
</html>

JS文件(需要引入JQuery)

var bgImg = new Image();
bgImg.src = "./img/bgImg.jpg";
var leftImg = new Image();
leftImg.src = "./img/left.png";
var rightImg = new Image();
rightImg.src = "./img/right.png";
var topImg = new Image();
topImg.src = "./img/top.png";
var bottomImg = new Image();
bottomImg.src = "./img/bottom.png";
var bodyImg = new Image();
bodyImg.src = "./img/body.png";
var foodImg = new Image();
foodImg.src = "./img/food.gif";
var cutImg = new Image();
cutImg.src = "./img/cut.jpg";

function Snake() {
this.canvas = $('#cav').get(0).getContext('2d');
this.step = 25;//步长
// this.width = parseInt(($(window).width()/this.step)) * this.step ;//画布宽度
// this.height = parseInt(($(window).height()/this.step)) * this.step ;//画布高度
this.width = 500;
this.height = 500;
this.stepW = this.width / this.step;
this.stepH = this.height / this.step;
this.snakeArr = [];//蛇身数组
this.foodArr = [];//食物数组
this.direction = 'left';//默认方向
this.speed = 200;//移动速度
this.eatNumber = 0;//吃到食物的数量
//调整画板位置
//$('#cav').css('margin-top',($(window).width()-this.width)/2 + 'px').css('margin-left',($(window).height()-this.height)/2 + 'px');

//1.绘制游侠元素
this.draw = function () {
//a.画背景
this.canvas.drawImage(bgImg,0,0,this.width,this.height);
//b.画蛇
this.drawSnake();
//c.画食物
this.drawFood();
}
this.drawFood = function () {
if(this.foodArr.length != 0) { //有食物的情况
this.canvas.drawImage(this.foodArr[0].img,this.foodArr[0].x * this.step,this.foodArr[0].y * this.step,this.step,this.step);
return;
}

var x = Math.floor(Math.random() * this.stepW);
var y = Math.floor(Math.random() * this.stepH);

var snakeLength = this.snakeArr.length;
for (var i=0;i<snakeLength;i++) {//和蛇身重合就重新执行
if(this.snakeArr[i].x == x && this.snakeArr[i].y == y ) {
this.drawFood();
break;
}
}

//没和蛇身重合
if(this.eatNumber >= 30 && this.eatNumber % Math.floor((Math.random() * 10)) == 0 && this.snakeArr.length > 8) {
this.foodArr[0] = {
x : x,
y : y,
img : cutImg,
cut : 'true'
}
} else {
this.foodArr[0] = {
x : x,
y : y,
img : foodImg,
cut : 'false'
}
}
this.canvas.drawImage(this.foodArr[0].img,this.foodArr[0].x * this.step,this.foodArr[0].y * this.step,this.step,this.step);
}
this.drawSnake = function () {
//初始化蛇身
if(this.snakeArr.length == 0 ) {
for (var i=0;i<5;i++) {
this.snakeArr[i] = {
x : parseInt(this.stepW/2) + i -2,
y : parseInt(this.stepH/2),
img : bodyImg,
direction : 'left',
}
}
this.snakeArr[0].img = leftImg;
}

//绘制蛇身
var snakeLength = this.snakeArr.length;
switch (this.direction) {
case 'left' :
this.snakeArr[0].img = leftImg;
break;
case 'right' :
this.snakeArr[0].img = rightImg;
break;
case 'top' :
this.snakeArr[0].img = topImg;
break;
case 'bottom' :
this.snakeArr[0].img = bottomImg;
break;
}

for (var i=0;i<snakeLength;i++) {
var snakeImg = this.snakeArr[i];
this.canvas.drawImage(
snakeImg.img,
snakeImg.x * this.step,
snakeImg.y * this.step,
this.step,
this.step
);
}
}
//2.让蛇动起来
this.move = function () {
this.snakeMove();
this.hit();
this.draw();
this.eatFood();
}
//移动蛇的位置
this.snakeMove = function () {
var snakeLength = this.snakeArr.length;
for (var i=snakeLength-1;i>0;i--) {
this.snakeArr[i].x = this.snakeArr[i-1].x;
this.snakeArr[i].y = this.snakeArr[i-1].y;
this.snakeArr[i].direction = this.snakeArr[i-1].direction;
}
switch (this.direction) {
case 'left' :
this.snakeArr[0].x -= 1;
break;
case 'right' :
this.snakeArr[0].x += 1;
break;
case 'top' :
this.snakeArr[0].y -= 1;
break;
case 'bottom' :
this.snakeArr[0].y += 1;
break;
}
}
//吃到食物
this.eatFood = function () {
if(this.snakeArr[0].x == this.foodArr[0].x && this.snakeArr[0].y == this.foodArr[0].y) {
if(this.foodArr[0].cut == 'false') {
this.snakeArr.push({
x : this.foodArr[0].x,
y : this.foodArr[0].y,
img : bodyImg,
direction : this.direction,
});
} else {
this.snakeArr.splice(this.snakeArr.length - 5,5);
}
this.foodArr.pop();
this.eatNumber += 1;
if(this.eatNumber % 5 == 0 && this.speed >= 20) {
console.log(this.speed);
this.accelerate();
}
}
}
//3.让蛇去死
this.hit = function () {
// if(this.snakeArr[0].x < 0  || this.snakeArr[0].x >= this.stepW || this.snakeArr[0].y < 0  || this.snakeArr[0].y >= this.stepH) {
// 	this.end();
// }
if(this.snakeArr[0].x < 0){
this.snakeArr[0].x = this.stepW - 1;
}
if(this.snakeArr[0].x >= this.stepW){
this.snakeArr[0].x = 0;
}
if(this.snakeArr[0].y < 0){
this.snakeArr[0].y = this.stepH - 1;
}
if(this.snakeArr[0].y >= this.stepH){
this.snakeArr[0].y = 0;
}
var snakeLength = this.snakeArr.length;
for(var i=1;i<snakeLength;i++) {
if(this.snakeArr[0].x == this.snakeArr[i].x && this.snakeArr[0].y == this.snakeArr[i].y) {
this.end();
break;
}
}
}
//设定按键事件
this.keypress = function (e) {
switch (parseInt(e)) {
case 37 :
if(this.direction != 'right') {
this.direction = 'left';
}
break;
case 38 :
if(this.direction != 'bottom') {
this.direction = 'top';
}
break;
case 39 :
if(this.direction != 'left') {
this.direction = 'right';
}
break;
case 40 :
if(this.direction != 'top') {
this.direction = 'bottom';
}
break;
}
}
//开始游戏
this.start = function () {
this.draw();
this.interval();
}
//定时器
this.interval = function () {
var that = this;
this.timer = setInterval(function(){
that.move();
},this.speed);
}
//修改速度
this.accelerate = function () {
this.speed = Math.ceil(this.speed * 0.9);
clearInterval(this.timer);
this.interval();
}
//结束游戏
this.end = function () {
$('#cav').hide();
$('#end .gold span').text(this.eatNumber);
$('#end').show();
clearInterval(this.timer);
}
}
window.onload = function () {
$('#cav').attr('width',$(window).width() + 'px');
$('#cav').attr('height',$(window).height() + 'px');
$('#cav').css('margin','0 auto');
var snake = new Snake();
snake.start();
$(window).on('keydown',function(e){
snake.keypress(e.keyCode || e.which);
});
$('.retry').click(function(){
location.reload();
});
}

CSS文件

@charset "utf-8";
html,body,div,canvas,span {
padding:0;
margin: 0;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#cav {
}
#end {
display: none;
width: 100%;
font-size: 30px;
color: #000;
text-align: center;
box-sizing: border-box;
margin-top: 50px;
}
#end .gold {
}
#end .gold span {
display: inline-block;
width: 100px;
text-align: center;
font-size: 40px;
color: #00f;
}
#end .retry{
display: inline-block;
margin-top: 30px;
text-align: center;
cursor: pointer;
color: #00f;
}

IMG文件