html5简单的贪吃蛇小游戏代码

一款html5简单的贪吃蛇小游戏代码，通过键盘的方向箭来控制蛇的运动方向，来吃掉白色的蛋，首尾相连或撞墙则结束游戏，这个游戏比较的经典，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，设置好页面各元素的样式即可，代码如下：

::selection {
	color:#FFFFFF;
	background:transparent;
}
::-moz-selection {
	color:#FFFFFF;
	background:transparent;
}
* {
	margin:0;
	padding:0;
	font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
body {
	background-color:#000000;
}
.wrap {
	margin-left:auto;
	margin-right:auto;
}
header {
	width:340px;
	font-size:0;
}
canvas {
	display:none;
	border-style:solid;
	border-width:8px;
	border-color:#FFFFFF;
}
canvas:focus {
	outline:none;
}
/* Top Styles */
h1 {
	display:inline-block;
	width:100px;
	font-size:20px;
	color:#FFFFFF;
    font-weight: 500;
}
.score {
	display:inline-block;
	width:240px;
	font-size:20px;
	color:#FFFFFF;
	text-align:right;
}
.score_value {
	font-size:inherit;
}
/* All screens style */
#gameover a,#setting a,#menu a {
	display:block;
}
#gameover a,#setting a:hover,#menu a:hover {
	cursor:pointer;
}
#gameover a:hover::before,#setting a:hover::before,#menu a:hover::before {
	content:">";
	margin-right:10px;
}
/* Menu Screen Style */
#menu {
	display:block;
	width:340px;
	padding-top:95px;
	padding-bottom:95px;
	font-size:30px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	color:#FFF;
}
#menu h2 {
	-webkit-animation:logo-ani 1000ms linear infinite;
	animation:logo-ani 1000ms linear infinite;
	margin-bottom:30px;
}
#menu a {
	font-size:26px;
}
@-webkit-keyframes logo-ani {
	50% {
	-webkit-transform:scale(1.3,1.3);
}
100% {
	-webkit-transform:scale(1.0,1.0);
}
}@keyframes logo-ani {
	50% {
	transform:scale(1.3,1.3);
}
100% {
	transform:scale(1.0,1.0);
}
}/* Game Over Screen Style */

#gameover {
	display:none;
	width:340px;
	padding-top:95px;
	padding-bottom:95px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:26px;
	color:#FFF;
}
#gameover p {
	margin-top:25px;
	font-size:20px;
}
/* Settings Screen Style */
#setting {
	display:none;
	width:340px;
	margin-left:auto;
	margin-right:auto;
	padding-top:85px;
	padding-bottom:85px;
	font-size:30px;
	color:#FFF;
	text-align:center;
}
#setting h2 {
	margin-bottom:15px;
}
#setting p {
	margin-top:10px;
}
#setting input {
	display:none;
}
#setting label {
	cursor:pointer;
}
#setting input:checked + label {
	background-color:#FFF;
	color:#000;
}

页面的body部分，设置好顶部得分显示内容、游戏设置界面内容、游戏结束显示内容等，当然啦，游戏的canvas容器是不能少的，代码如下：

<header class="wrap">
    <h1>贪吃蛇</h1>
    <p class="score">得分：<span id="score_value">0</span></p>
</header>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>

<!-- Game Over Screen -->
<div id="gameover">
    <h2>游戏结束</h2>
    <p>请按 <span style="background-color: #FFFFFF; color: #000000">空格键</span> 开始</p>
    <a id="newgame_gameover">新游戏</a>
    <a id="setting_gameover">设置</a>
</div>

<!-- Setting screen -->
<div id="setting">
    <h2>设置</h2>
    <a id="newgame_setting">新游戏</a>
    <p>速度：
        <input id="speed1" type="radio" name="speed" value="120" checked/>
        <label for="speed1">Slow</label>
        <input id="speed2" type="radio" name="speed" value="75" />
        <label for="speed2">Normal</label>
        <input id="speed3" type="radio" name="speed" value="35" />
        <label for="speed3">Fast</label>
    </p>
    <p>墙体：
        <input id="wallon" type="radio" name="wall" value="1" checked/>
        <label for="wallon">开启</label>
        <input id="walloff" type="radio" name="wall" value="0" />
        <label for="walloff">关闭</label>
    </p>
</div>
<!-- Main Menu Screen -->
<div id="menu">
    <h2>贪吃蛇</h2>
    <a id="newgame_menu">新游戏</a>
    <a id="setting_menu">设置</a>
</div>

页面的底部，才是游戏真正的实际内容，代码较多，这里仅贴出部分代码：

var checkBlock = function(x, y, _x, _y) {
    return (x == _x && y == _y) ? true : false;
}

/////////////////////////////////////////////////////////////

var altScore = function(score_val) {
    ele_score.innerHTML = String(score_val);
}

/////////////////////////////////////////////////////////////

var mainLoop = function() {

    var _x = snake[0].x;
    var _y = snake[0].y;
    snake_dir = snake_next_dir;

    // 0 - Up, 1 - Right, 2 - Down, 3 - Left
    switch (snake_dir) {
        case 0:
            _y--;
            break;
        case 1:
            _x++;
            break;
        case 2:
            _y++;
            break;
        case 3:
            _x--;
            break;
    }

    snake.pop();
    snake.unshift({
        x: _x,
        y: _y
    });


    // --------------------

    // Wall

    if (wall == 1) {
        // On
        if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {
            showScreen(3);
            return;
        }
    } else {
        // Off
        for (var i = 0, x = snake.length; i < x; i++) {
            if (snake[i].x < 0) {
                snake[i].x = snake[i].x + (canvas.width / 10);
            }
            if (snake[i].x == canvas.width / 10) {
                snake[i].x = snake[i].x - (canvas.width / 10);
            }
            if (snake[i].y < 0) {
                snake[i].y = snake[i].y + (canvas.height / 10);
            }
            if (snake[i].y == canvas.height / 10) {
                snake[i].y = snake[i].y - (canvas.height / 10);
            }
        }
    }

    // --------------------

    // Autophagy death
    for (var i = 1; i < snake.length; i++) {
        if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
            showScreen(3);
            return;
        }
    }

    // --------------------

    // Eat Food
    if (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {
        snake[snake.length] = {
            x: snake[0].x,
            y: snake[0].y
        };
        score += 1;
        altScore(score);
        addFood();
        activeDot(food.x, food.y);
    }

    // --------------------

    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --------------------

    for (var i = 0; i < snake.length; i++) {
        activeDot(snake[i].x, snake[i].y);
    }

    // --------------------

    activeDot(food.x, food.y);

    // Debug
    //document.getElementById("debug").innerHTML = snake_dir + " " + snake_next_dir + " " + snake[0].x + " " + snake[0].y;		

    setTimeout(mainLoop, snake_speed);
}