网页小游戏.贪吃蛇

现在的位置: 首页 > 综合 > 正文

RSS

网页小游戏.贪吃蛇

2013年07月28日 ⁄ 综合 ⁄ 共 3623字 ⁄ 字号小中大 ⁄ 评论关闭

模块结构:

-snake

+images

+scripts

snake.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xHTML">
<HEAD>
<META http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<TITLE>贪吃蛇</TITLE>
<SCRIPT src="SCRIPTs/jquery-1.4.2.js"></SCRIPT>
<SCRIPT src="SCRIPTs/snakegame.js"></SCRIPT>
<STYLE>
#map{
width:390px;
height:455px;
left:20px;
top:10px;
position:relative;
border:3px inset #CCCCCC;
}
</STYLE>
</HEAD>

<BODY>
<DIV>
  <DIV id="round">
    <DIV id="score"></DIV>
    <DIV id="level"></DIV>
    <DIV id="life"></DIV>
  </DIV>
  <DIV id="map"></DIV>
  <P style="font-color:blue">结束游戏:Esc  暂停或开始:回车/空格  控制蛇头运动方向:↑↓←→</P>
</DIV>
</BODY>
</HTML>

scripts: js+jQuery

/* * * * * * * * * * * * * * * * * * *
 project: snake 1.0
 author: hulang
 date: 15:02 2013/10/17  
* * * * * * * * * * * * * * * * * * */

$(document).ready(function(){
var game = {
    mapBlockSize: 13,
    mapRow: 35,
    mapCol: 30,
    isPause: true,
    isOver:  false,
    score: 0
};
var timer;
var snake = {
    nodes: [],
    length: 0,
    dir: 4, /* 1-UP,2-DOWN,3-LEFT,4-RIGHT */
    speed: 100
};
var food = {x:0, y:0};

$(document).keyup(function(event){
    switch (event.keyCode) {
    case 38://up
        if (snake.dir != 2)
            snake.dir = 1;
        break;
    case 40://down
        if (snake.dir != 1)
            snake.dir = 2;
        break;
    case 37://left
        if (snake.dir != 4)
            snake.dir = 3;
        break;
    case 39://right
        if (snake.dir != 3)
            snake.dir = 4;
        break;
    case 13://enter
    case 32://space
        game.isPause = !game.isPause;
        if (game.isPause)
            clearInterval(timer);
        else
            timer = setInterval(moveSnake,snake.speed);
        break;
    case 27://esc
        gameOver();
        break;
    }
});

initMap = function() {
    var map = $('#map').empty();
    for (var r = 0; r < game.mapRow; r++) {
        for (var c = 0;c < game.mapCol; c++) {
            var div = $(document.createElement("div"));
            div.attr('id', r+'-'+c);
            div.css('position', 'absolute');
            div.width(game.mapBlockSize);
            div.height(game.mapBlockSize);
            div.offset( {top: (r*game.mapBlockSize), left: (c*game.mapBlockSize)} );
            div.html('<img/>');
            map.append(div);
        }
    }
};

initSnake = function() {
    snake.nodes = new Array(game.mapRow * game.mapCol);
    for (var i = 0; i < snake.nodes.length; i++)
        snake.nodes[i] = {x:0, y:0};
    snake.length = 5;
    snake.dir = 4;
    for (var i = 0; i < snake.length; i++) {
        snake.nodes[i].x = snake.length - i;
        snake.nodes[i].y = 6;
    }
};

isInSnake = function(pt) {
    for (var i = 0; i < snake.length; i++)
        if (snake.nodes[i].x==pt.x && snake.nodes[i].y==pt.y)
            return true;
    return false;
};

drawFood = function() {
    do {
        food.y = Math.floor( Math.random() * game.mapRow );
        food.x = Math.floor( Math.random() * game.mapCol );
    } while (isInSnake(food));

    $('#'+(food.y+'-'+food.x) ).children().attr('src', 'images/food'+(1+Math.floor(Math.random()*4))+'.jpg');
};

drawSnake = function() {
    $('#'+(snake.nodes[0].y+'-'+snake.nodes[0].x) ).children().attr('src', 'images/head.jpg')
    for (var i = 1;i < snake.length-1; i++)
        $('#'+(snake.nodes[i].y+'-'+snake.nodes[i].x) ).children().attr('src', 'images/body.jpg')
    $('#'+(snake.nodes[snake.length-1].y+'-'+snake.nodes[snake.length-1].x) ).children().attr('src', 'images/body.jpg')
};

moveSnake = function() {
    var newHead= {x:snake.nodes[0].x, y:snake.nodes[0].y};
    switch (snake.dir) {
    case 1: newHead.y--; break;
    case 2: newHead.y++; break;
    case 3: newHead.x--; break;
    case 4: newHead.x++; break;
    }

    if ((newHead.y < 0 || newHead.y > game.mapRow-1) ||
        (newHead.x < 0 || newHead.x > game.mapCol-1) ||
        isInSnake(newHead)) {
        gameOver();
        return;
    }
    if (newHead.x==food.x && newHead.y==food.y) {
        snake.length++;
        game.score++;
        drawFood();
    }

    var tail = {x:snake.nodes[snake.length-1].x, y:snake.nodes[snake.length-1].y};
    for (var i = snake.length-2; i >= 0; i--)
        snake.nodes[i+1] = snake.nodes[i];
    snake.nodes[0] = newHead;

    $('#'+(tail.y+'-'+tail.x) ).children().attr('src',' ');
    drawSnake();
};

gameStart = function() {
    initMap();
    initSnake();
    drawSnake();
    drawFood();
    document.onkeyup();
    timer = setInterval(moveSnake, snake.speed);
};

gameOver = function() {
    clearInterval(timer);
    alert('Game Over!您的得分:' + game.score);
    gameStart();
};


gameStart();

});//ready end

图片资源

用QQ表情。。