js实现贪吃蛇小游戏
用js写的一个贪吃蛇小游戏，依赖jquery，用键盘上下左右键控制方向，撞到边界或者撞到自身游戏结束。先上个效果图。
css代码如下：
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.table{
width: 600px;
height: 600px;
margin: 50px auto;
background: url("../img/table.jpg") no-repeat center center /cover;
}
.table div{
width:30px;
height: 30px;
border: 1px solid #000;
float: left;
}
.snake{
background: purple;
}
.food{
background: #00F7DE!important;
}
</style>样式中表格有一张背景图片，不过没有也不影响，可能就是简陋一点。
html代码如下：
<body>
<div class="table">
</div>
</body>js代码如下：
<script type="text/javascript">
var snake = {
posArr :[{x:0,y:0},{x:0,y:1},{x:0,y:2}],
directive:'right',
interval:'',
food:{x:0,y:0},
/**
* 启动函数
*/
init:function () {
this.initTable();
this.run();
this.getFood();
},
/**
* 画表格
*/
initTable:function () {
for(var i=0;i<20;i++){
for(var j=0;j<20;j++){
$('<div id="'+i+'_'+j+'"></div>').appendTo($('.table'));
}
}
},
/**
* 小蛇每次移动触发渲染函数
* @returns {*}
*/
render:function () {
var x = snake.posArr[snake.posArr.length - 1]['x'];
var y = snake.posArr[snake.posArr.length - 1]['y'];
if(snake.directive === 'right'){
y += 1;
}
else if(snake.directive === 'left'){
y += -1;
}
else if(snake.directive === 'bottom'){
x += 1;
}
else if(snake.directive === 'top'){
x += -1;
}
snake.posArr.push({x :x,y:y});
//判断撞墙或者身体碰撞
if(($('#' + snake.posArr[snake.posArr.length - 1]['x'] + '_' + snake.posArr[snake.posArr.length - 1]['y']).length < 1) || this.crash(x,y)){
snake.posArr.pop();
return snake.die();
}
for(var i=0;i<snake.posArr.length;i++){
$('#' + snake.posArr[i]['x'] + '_' + snake.posArr[i]['y']).addClass('snake');
}
//判断吃到食物
if(snake.posArr[snake.posArr.length - 1]['x'] === snake.food['x'] && snake.posArr[snake.posArr.length - 1]['y'] === snake.food['y']){
$('#'+snake.food['x'] + '_' + snake.food['y']).removeClass('food');
this.getFood();
}
//没有吃到食物就去掉尾巴
else {
var tail = snake.posArr.shift();
$('#' + tail['x'] + '_' + tail['y']).removeClass('snake');
}
},
/**
* 获取实物
* @returns {*}
*/
getFood:function(){
var x = Math.floor(Math.random()*20);
var y = Math.floor(Math.random()*20);
for(var i=0;i<snake.posArr.length;i++){
if(snake.posArr[i]['x'] == x && snake.posArr[i]['y'] == y){
return arguments.callee.call();
}
}
snake.food['x'] = x;
snake.food['y'] = y;
$('#'+ x + '_' + y).addClass('food');
},
/**
* 控制小蛇走动
*/
run:function () {
snake.interval = setInterval(function () {
snake.render();
},300);
},
/**
* 判断是否撞到自己
* @param x
* @param y
*/
crash:function (x,y) {
for(var i=0;i<snake.posArr.length -1;i++){
if(x === snake.posArr[i]['x'] && y === snake.posArr[i]['y'] ){
this.die();
}
}
},
/**
* 游戏结束
*/
die:function () {
clearInterval(snake.interval);
document.onkeydown = null;
return alert('游戏结束');
}
};
snake.init();
document.onkeydown = function (e) {
var e = e || window.event;
var nub = e.keyCode;
if (nub === 37) {
if (snake.directive === "right") {
return
}
snake.directive = "left";
snake.render();
}
else if (nub === 38) {
if (snake.directive === "bottom") {
return
}
snake.directive = "top";
snake.render();
}
else if (nub === 39) {
if (snake.directive === "left") {
return
}
snake.directive = "right";
snake.render();
}
else if (nub === 40) {
if (snake.directive === "top") {
return
}
snake.directive = "bottom";
snake.render();
}
}
</script>以上就是小游戏完整代码，样式还可以美化一下，给蛇头弄个图片，还可以设置一下游戏难度，把run函数的间隔时间弄成可以配置的，难度高就间隔短一点，感兴趣的小伙伴可以试一下。\(^o^)/~