版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37506861/article/details/76100506
注意：若是用手机端，需要自行引入touch.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>贪吃蛇</title>
<style type="text/css">
h1 {
height: 100px;
text-align: center;
font-size: 50px
}
#score {
height: 50px;
font-size: 40px;
text-align: center;
}
#snakeMap {
border: 3px solid green;
margin: 0 auto;
}
.row {
height: 20px;
}
.col {
height: 20px;
width: 20px;
border: 1px solid black;
float: left;
/*使用怪异盒模型*/
box-sizing: border-box;
}
.active {
background-color: green;
}
.food {
background-color: blue;
}
</style>
</head>
<body>
<h1>贪吃蛇</h1>
<div id="score">0</div>
<div id="snakeMap"></div>
</body>
<script src="js/touch-0.2.14.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//得到snakeMap
var snakeMap = document.getElementById("snakeMap");
//得到显示分数的div
var scoreObj = document.getElementById("score");
//设置总行数
var rowNum = 15;
//设置总列数
var colNum = 15;
//设置每个小格子的宽度和高度
var smallDiv = 20;
//设置蛇地图的宽度
snakeMap.style.width = smallDiv * colNum + "px";
snakeMap.style.height = smallDiv * rowNum + "px";
//定义数组存储地图上所有的小格子
var snakeMapDivs = [];
//记录蛇头的位置坐标
var x = 0;
var y = 0;
//存储蛇身的一维数组
var snakeBody = [];
//记录食物的坐标
var foodX, foodY;
//记录分数
var scoreCount = 0;
//定义方向变量,默认蛇向右走
var snakeDirection = "right";
//1.创建地图
createMap()
//2.对蛇进行初始化（随机蛇的位置，蛇的初始节数为3节）
randomInitial();
//3.刚开始要随机食物的位置
randomFoods();
//4.创建定时器，使蛇动起来
var snakeMoveTimer = setInterval(moveSnake, 300);
//5.添加键盘事件，改变蛇的移动方向
document.onkeydown = function(e) {
changeDirection(e);
}
//添加轻扫事件，使其在手机端可以通过轻扫来游戏
touch.on(document, "touchstart", function() {
var event1 = event || e;
//关闭系统默认的滚动效果
event1.preventDefault();
});
touch.on(document, "swipeleft swiperight swipeup swipedown", function(e) {
snakeMovePhone(e);
});
/*
* 以下为各个函数的封装过程
*/
function createMap() {
for (var i = 0; i < rowNum; i++) {
//创建一个数组，存储每一行中所有的div元素
var rowArray = [];
//创建每一行的div
var rowDiv = document.createElement("div");
snakeMap.appendChild(rowDiv);
rowDiv.className = "row";
for (var j = 0; j < colNum; j++) {
//创建div
var div = document.createElement("div");
//添加样式
div.className = "col";
//将新创建的div小格子，存储到每一行中
rowDiv.appendChild(div);
//将每个小格子，存储到数组中
rowArray.push(div);
}
//将每一行的div存储到数组中
snakeMapDivs.push(rowArray);
}
}
//随机函数
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//假设刚开始的蛇身是3节
//随机蛇的初始位置
function randomInitial() {
x = randomNum(0, colNum - 4);
y = randomNum(0, rowNum - 1);
for (var i = x; i < x + 3; i++) {
snakeMapDivs[y][i].className = "active col";
snakeBody.push(snakeMapDivs[y][i]);
}
x = x + 2;
}
//随机食物函数
function randomFoods() {
foodX = randomNum(0, colNum - 1);
foodY = randomNum(0, rowNum - 1);
//保证随机的食物不在蛇身上
if (snakeMapDivs[foodY][foodX].className == "active col") {
randomFoods();
} else {
snakeMapDivs[foodY][foodX].className = "food col";
}
}
function moveSnake() {
switch (snakeDirection) {
case "left":
{
x--;
break;
}
case "up":
{
y--;
break;
}
case "right":
{
x++;
break;
}
case "down":
{
y++;
break;
}
default:
break;
}
//判断蛇是否碰撞墙壁
if (x < 0 || y < 0 || x >= colNum || y >= rowNum) {
alert("game over");
//清除定时器
clearInterval(snakeMoveTimer);
//结束函数执行
return;
}
//判断是否迟到了食物
if (isEating()) {
//重新随机食物
randomFoods();
} else {
//改变蛇头的颜色
snakeMapDivs[y][x].className = "active col";
//添加蛇头
snakeBody.push(snakeMapDivs[y][x]);
//判断是否撞到自己了
if (isCreasedSelf()) {
return;
}
//改变蛇尾的颜色
snakeBody[0].className = "col";
//删除蛇尾
snakeBody.shift();
}
}
//蛇移动函数
function changeDirection(e) {
var event1 = event || e;
//为了合理性,判断当蛇正朝着左边走时,不能够改变蛇的方向为左
if (event1.keyCode == 37 && snakeDirection == "right") {
return;
}
if (event1.keyCode == 38 && snakeDirection == "down") {
return;
}
if (event1.keyCode == 39 && snakeDirection == "left") {
return;
}
if (event1.keyCode == 40 && snakeDirection == "up") {
return;
}
switch (event1.keyCode) {
case 37:
{
snakeDirection = "left";
break;
}
case 38:
{
snakeDirection = "up";
break;
}
case 39:
{
snakeDirection = "right";
break;
}
case 40:
{
snakeDirection = "down";
break;
}
default:
break;
}
}
//判断是否吃到了食物
function isEating() {
if (snakeMapDivs[foodY][foodX] == snakeMapDivs[y][x]) {
//吃到了食物,增加分数
scoreCount++;
scoreObj.innerHTML = scoreCount;
//将食物变为蛇头
snakeMapDivs[foodY][foodX].className = "active col";
//将蛇头存进数组中
snakeBody.push(snakeMapDivs[foodY][foodX]);
return true;
} else {
return false;
}
}
//判断蛇是否碰撞到了自己
function isCreasedSelf() {
for (var i = 0; i < snakeBody.length - 1; i++) {
if (snakeBody[i] == snakeMapDivs[y][x]) {
//说明当前碰撞到了自己
alert("碰到自己了！！");
//清除定时器
clearInterval(snakeMoveTimer);
return true;
}
}
}
//通过轻扫事件来控制蛇的移动
function snakeMovePhone(e) {
var event1 = e || event;
console.log("aaaa");
//为了合理性进行判断(例如：当蛇向左边走的时候按右键不能直接向右走)
if (snakeDirection == "left" && event1.type == "swiperight") {
return;
}
if (snakeDirection == "right" && event1.type == "swipeleft") {
return;
}
if (snakeDirection == "up" && event1.type == "swipedown") {
return;
}
if (snakeDirection == "bottom" && event1.type == "swipeup") {
return;
}
switch (event1.type) {
case "swipeleft":
{
snakeDirection = "left";
break;
}
case "swiperight":
{
snakeDirection = "right";
break;
}
case "swipeup":
{
snakeDirection = "up";
break;
}
case "swipedown":
{
snakeDirection = "down";
break;
}
default:
break;
}
}
</script>
</html>