<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Greedy Snake</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style type="text/css">
body {
margin: 0;
}
#game-content {
position: relative;
width: 600px;
height: 600px;
border: 1px solid blue;
margin: 50px 0 0 50px;
}
.snake-piece {
position: absolute;
display: -webkit-inline-box;
width: 28px;
height: 28px;
background: blue;
border: 1px solid black;
}
.food {
position: absolute;
display: -webkit-inline-box;
width: 30px;
height: 30px;
background: orange;
}
.super {
background: red;
}
.score {
font-size: 40px;
color: red;
padding: 20px;
}
.start {
position: absolute;
left: 50px;
line-height: 50px;
background: green;
color: #fff;
padding: 0 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id='game-content'>
</div>
<div style="text-align:center">得分:
<span class="score">0</span>
</div>
<div class="start" onclick="$.play();">开始</div>
<script type="text/javascript">
; (function ($) {
$.extend({
play: function (options) {
var defaults = {
xOffset: 30,
yOffset: 30,
delay: 500
};
const moveType = {
'right': 1,
'down': 2,
'left': 3,
'up': 4
};
var setting = $.extend(defaults, options);
var snake = $(this),
snakeDiv = [[0, 2], [0, 1], [0, 0]],
rowMax = parseInt($('#game-content').height() / setting.yOffset) - 1,
columnMax = parseInt($('#game-content').width() / setting.xOffset) - 1,
moveDirection = moveType.right,
moveTimer = null,
score = 0,
keyDownEnable = true,
normalFoodCount = 0;
//显示蛇的位置
var displaySnake = function () {
$('.snake-piece').remove();
$.each(snakeDiv, function (i, value) {
var divEle = $('<div class="snake-piece"></div>');
divEle.css({ 'top': value[0] * setting.xOffset, 'left': value[1] * setting.yOffset });
if (i == 0) {
divEle.addClass('snake-head');
}
$('#game-content').append(divEle);
})
};
//初始化食物
var displayFood = function (type) {
var superFood = type == 'super',
foodRow = getRandomNum(0, rowMax),
foodColumn = getRandomNum(0, columnMax),
foodEle = $('<div class="food"></div>'),
foodScore = superFood ? 5 : 1;
if (!ifExistInSnakeDiv(foodRow, foodColumn)) {
foodEle.css({
'top': foodRow * setting.xOffset,
'left': foodColumn * setting.yOffset
});
foodEle.attr({
'data-row': foodRow,
'data-column': foodColumn,
'data-score': foodScore
})
superFood && foodEle.addClass('super');
$('#game-content').append(foodEle);
} else {
displayFood();
}
};
//食物与蛇重叠
var ifExistInSnakeDiv = function (row, column) {
return snakeDiv.find(function (item) {
return item[0] == row && item[1] == column;
});
};
//取区间随机整数
var getRandomNum = function (n, m) {
var c = m - n + 1; //能取到的整数个数
return Math.floor(Math.random() * c) + n;
}
//蛇移动
var snakeMove = function () {
moveTimer = setInterval(function () {
var head = [snakeDiv[0][0], snakeDiv[0][1]];
switch (moveDirection) {
case moveType.right:
head[1]++;
break;
case moveType.down:
head[0]++;
break;
case moveType.left:
head[1]--;
break;
case moveType.up:
head[0]--;
break;
}
//触碰墙壁
if (head[0] < 0 || head[0] > rowMax || head[1] < 0 || head[1] > columnMax) {
die();
return false;
}
snakeDiv.pop();
snakeDiv.splice(0, 0, head);
displaySnake();
keyDownEnable = true;
beatSelf() && die();
eatFood();
}, setting.delay);
};
//触碰墙壁死亡
var die = function () {
alert('You are die!');
keyDownEnable = true;
clearInterval(moveTimer);
};
//吃到食物
var eatFood = function () {
var foodEle = $('.food'),
foodRow = parseInt(foodEle.attr('data-row')),
foodColumn = parseInt(foodEle.attr('data-column')),
foodScore = parseInt(foodEle.attr('data-score'));
if (ifExistInSnakeDiv(foodRow, foodColumn)) {
snakeDiv.splice(0, 0, [foodRow, foodColumn]);
if (foodEle.hasClass('super')) {
foodEle.remove();
displayFood();
$('.score').text(score += foodScore);
return false;
}
foodEle.remove();
$('.score').text(score += foodScore);
normalFoodCount++;
if (normalFoodCount % 5 == 0) {
displayFood('super');
} else {
displayFood();
}
if (normalFoodCount % 10 == 0) {
setting.delay /= 2;
}
};
};
//咬到自己
var beatSelf = function () {
var head = snakeDiv[0];
return snakeDiv.slice(1).find(function (item) {
return item[0] == head[0] && item[1] == head[1];
});
};
//初始化方向键
var initKeyEvent = function () {
$(document).off('keydown').on('keydown', function (e) {
var keyCode = e.keyCode;
if (!keyDownEnable) {
return false;
}
switch (keyCode) {
case 39://right arrow
if (moveDirection == moveType.right) {
return false;
}
moveDirection == moveType.left && snakeDiv.reverse();
moveDirection = moveType.right;
break;
case 40://down arrow
if (moveDirection == moveType.down) {
return false;
}
moveDirection == moveType.up && snakeDiv.reverse();
moveDirection = moveType.down;
break;
case 37://left arrow
if (moveDirection == moveType.left) {
return false;
}
moveDirection == moveType.right && snakeDiv.reverse();
moveDirection = moveType.left;
break;
case 38://up arrow
if (moveDirection == moveType.up) {
return false;
}
moveDirection == moveType.down && snakeDiv.reverse();
moveDirection = moveType.up;
break;
default:
break;
}
keyDownEnable = false;
});
}
$('#game-content').empty();
$('.score').text(0);
displaySnake();
displayFood();
snakeMove();
initKeyEvent();
}
});
})(jQuery);
</script>
</body>
</html>
网友评论