一、游戏效果展示（运行）
这是带有调整速度的游戏运行展示：
这是带有"重新游戏"的展示：这速度我还不能驾驭哈哈~
测试一下你最好得多少分数？
注意：
背景图片、游戏格子、提示语言等都可以根据需要进行更改哦~
二、全部代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇——CSDN追光者♂</title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/index.js"></script>
</head>
<body>
<div class="base">
<div id="context">
<div id="title">
<div class="left">
<div>说明：</div>
<div>1、上、下、左、右键控制蛇运动的方向</div>
<div>2、空格键控制游戏暂停与运行</div>
<div>3、"+"、"-"控制运行速度</div>
</div>
<div class="center">
<div>加油！奥利给！</div>
<img src="img/gong.jpg" width="75px" />
</div>
<div class="right">
分数：<label id="score"></label>
</div>
</div>
<canvas id="canvas" height="500px" width="700px"></canvas>
</div>
</div>
<div class="model" id="model1">
<div class="context">
<div class="saoma">就这？</div>
<img src="img/gong.jpg" width="160px" />
<div class="jixu">游戏已暂停，按空格键继续</div>
</div>
</div>
<div class="model" id="model2">
<div class="context">
<div class="saoma">这就认输了？！</div>
<img src="img/gong.jpg" width="160px" />
<button onclick="reLoad()">再来一局</button>
</div>
</div>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
}
.base{
position: fixed;
width: 100%;
height: 100%;
background-image: url(../img/bg.jpg);
background-repeat: no-repeat;
}
button{
width: 50px; }
a{
text-decoration:none;}
#context{
width: 700px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -300px;
background-color: white;
opacity: 0.7;
}
#title{
width: 100%;
height: 100px;
float: left;
}
#canvas{
float: left;
}
#title .left{
width: 49%;
height: 100%;
float: left;
}
#title .left div{
margin-left: 10px;
margin-top: 4px;
font-size: 14px;
}
#title .right,
#title .center{
width: 25%;
height: 100%;
float: left;
border-left: solid gray 1px;
}
#title .right{
line-height: 50px;
text-align: center;
font-size: 20px;
}
#title .center div{
float: left;
width: 100%;
text-align: center;
font-size: 16px;
}
#title .center img{
float: left;
position: relative;
left: 50%;
margin-left: -37.5px;
}
.model{
width: 100%;
height: 100%;
background-color: black;
position: fixed;
top: 0;
left: 0;
z-index: 10;
opacity: 0.65;
display: none;
}
.model .context{
width: 200px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -110px;
margin-left: -100px;
color: white;
}
.model .context img{
margin-left:20px;
}
.model .context div{
text-align: center;
margin-bottom: 5px;
}
.model .context button{
width: 120px;
height: 30px;
background-color: white;
color: black;
border-radius: 3px;
border: none;
margin-left: 40px;
margin-top: 20px;
}
index.js
/*
* 1、初始化 方法 init()
*
* */
//定义全局变量
var ROWS; //行数
var COLS; //列数
var CONTEXT; //画布上下文对象
var BLOCK_SIZE; //格子大小
var snakes = []; //保存蛇坐标
var snakeCount; //蛇身数量
var foodX, foodY; //食物的坐标
var interval; //计时
var moveTo; //蛇移动的方向
var isStop; //是否暂停
var score; //分数
var speed; //蛇运行速度
window.onload = function() {
//游戏初始化
init();
start();
}
//重新加载
function reLoad(){
window.location.reload()
}
//开始游戏
function start() {
interval = setInterval(move, speed);
document.onkeydown = function(event) {
var event = event || window.event;
keydown(event.keyCode);
}
}
//交互响应函数
function keydown(keyCode) {
switch(keyCode) {
case 37: //左边
if(moveTo != 0 && moveTo != 2) moveTo = 0;
break;
case 38: //上边
if(moveTo != 1 && moveTo != 3) moveTo = 1;
break;
case 39: //右边
if(moveTo != 2 && moveTo != 0) moveTo = 2;
break;
case 40: //下的
if(moveTo != 3 && moveTo != 1) moveTo = 3;
break;
case 32: //开始/暂停
if(isStop) {
interval = setInterval(move, speed);
isStop = false;
document.getElementById("model1").style.display='none';
} else {
clearInterval(interval);
isStop = true;
document.getElementById("model1").style.display='block';
}
break;
case 107:
if(speed>50){
speed-=50;
clearInterval(interval);
interval = setInterval(move, speed);
}
console.log(speed)
break;
case 109:
if(speed<500){
speed+=50;
clearInterval(interval);
interval = setInterval(move, speed);
}
console.log(speed)
break;
}
}
//制造食物
function addFood() {
foodX = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
foodY = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
drawFood();
}
//死亡判断
function isDie() {
if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||
snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS) {
clearInterval(interval);
document.getElementById("model2").style.display='block';
}
for(var i = 0; i < snakeCount - 1; i++) {
if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y) {
clearInterval(interval);
document.getElementById("model2").style.display='block';
}
}
}
//吃到食物判断
function isEat() {
if(snakes[snakeCount - 1].x == foodX && snakes[snakeCount - 1].y == foodY) {
document.getElementById("score").innerHTML=++score;
addFood();
addSnake();
}
}
//添加蛇身
function addSnake() {
snakeCount++;
snakes.unshift({
x: BLOCK_SIZE * ROWS,
y: BLOCK_SIZE * COLS
});
}
//移动函数
function move() {
switch(moveTo) {
case 0: //左边
snakes.push({
x: snakes[snakeCount - 1].x - BLOCK_SIZE,
y: snakes[snakeCount - 1].y
});
break;
case 1: //上边
snakes.push({
x: snakes[snakeCount - 1].x,
y: snakes[snakeCount - 1].y - BLOCK_SIZE
});
break;
case 2: //右边
snakes.push({
x: snakes[snakeCount - 1].x + BLOCK_SIZE,
y: snakes[snakeCount - 1].y
});
break;
case 3: //下边
snakes.push({
x: snakes[snakeCount - 1].x,
y: snakes[snakeCount - 1].y + BLOCK_SIZE
});
break;
default: ;
}
snakes.shift();
drawMap();
drawFood();
drawSnake();
isEat();
isDie();
}
//游戏初始化
function init() {
ROWS = 35; //初始化行数
COLS = 25; //初始化列数
BLOCK_SIZE = 20;
snakeCount = 3;
moveTo = 2;
score=0;
document.getElementById("score").innerHTML=score;
CONTEXT = document.getElementById('canvas').getContext('2d'); //初始化画布上下文对象的引用
for(var i = 0; i < snakeCount; i++) {
snakes[i] = {
x: i * BLOCK_SIZE,
y: 0
};
}
isStop=false;
speed=500;
addFood();
drawMap(); //初始化场地
drawSnake(); //初始化蛇
drawFood(); //初始化食物
}
//画出蛇运动的场地
function drawMap() {
CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);
//画横线
for(var i = 0; i < COLS; i++) {
CONTEXT.beginPath();
CONTEXT.moveTo(0, i * BLOCK_SIZE);
CONTEXT.lineTo(BLOCK_SIZE * ROWS, i * BLOCK_SIZE);
CONTEXT.strokeStyle = "gray";
CONTEXT.lineWidth=1;
CONTEXT.stroke();
}
//画竖线
for(var i = 0; i < ROWS; i++) {
CONTEXT.beginPath();
CONTEXT.moveTo(i * BLOCK_SIZE, 0);
CONTEXT.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * COLS);
CONTEXT.strokeStyle = "gray";
CONTEXT.lineWidth=1;
CONTEXT.stroke();
}
}
//画蛇
function drawSnake() {
for(var i = 0; i < snakes.length; i++) {
CONTEXT.beginPath();
CONTEXT.fillStyle = "red";
CONTEXT.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
CONTEXT.moveTo(snakes[i].x, snakes[i].y);
CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
CONTEXT.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
CONTEXT.closePath();
CONTEXT.strokeStyle = "gray";
CONTEXT.stroke();
}
}
//画食物
function drawFood() {
CONTEXT.beginPath();
CONTEXT.fillStyle = "yellow";
CONTEXT.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
CONTEXT.moveTo(foodX, foodY);
CONTEXT.lineTo(foodX + BLOCK_SIZE, foodY);
CONTEXT.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
CONTEXT.lineTo(foodX, foodY + BLOCK_SIZE);
CONTEXT.closePath();
CONTEXT.strokeStyle = "red";
CONTEXT.stroke();
}
三、说明
图片背景大家自行添加即可哦！按照自己的喜好更改就好！
如果需要直接运行的效果，即我在上面展示的效果，可以直接下载。我已
经上传到"资源"中了哦！
另外，欢迎各位在此留言讨论问题！