| 贪吃蛇小游戏 |
在我的记忆里，小时候经常趁父母不在家的时候，偷偷拿爷爷奶奶的手机玩贪吃蛇，推箱子等游戏，这是童年记忆里的游戏。现在我已经好久没有玩过这个游戏了，但是！！！马上就可以拥有一个独一无二是属于自己的贪吃蛇了，快来和博主一起动手设计这个简易的贪吃蛇游戏吧
| 前提准备 |
游戏区域：一个大盒子.bigBox 宽高都为640px(可以跟随自己的想法设置)
食物：属性有 宽：20px 、高：20px
蛇头：属性： 宽：20px 、 高：20px 、direction（蛇头的方向）：right（初始方向）
蛇身：属性： 宽：20px 、 高：20px
start按钮：属性： 宽：200px 、 高：150px
stop按钮：属性： 宽：70px 、 高：70px （一开始需要隐藏起来）
样式如下图所示：
| 需要完成的需求 |
1. 开始游戏功能
当用户进入游戏主界面时，可在界面中下方显眼的位置找到“**start”按钮，**点击后用户可进行新游戏。
2. 运动功能
- 默认运动功能
当用户点击”开始游戏“按钮后，蛇的方向默认从左到右方向移动。 - 键盘控制方向运动功能（重点）
用户可通过使用键盘上的上下左右方位键控制 蛇的移动方向，蛇在控制的方向上进行直线前进。
3. 吃食物功能
当界面任意位置出现食物，用户使用方位键控制蛇移动到食物周围，当蛇头碰到食物时则表示贪吃蛇吃到此食物，界面上会在任意位置出现下一个食物，用户再次控制蛇去吃这一食物。
蛇吃到食物自身会增加一个节点
死亡判定功能
当蛇头在前进方向上撞到墙壁或蛇头吃到蛇身时，给出死亡判定，并弹框给出用户本次游戏得分。
暂停/继续游戏功能
当用户使用软件时，由于个人原因需要暂停游戏进程，用户可点击游戏界面时及时“暂停”游戏，此时会出现“游戏暂停”的按钮，当再次点击“暂停”按钮则继续之前的游戏。
| 代码部分 |
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<<link rel="stylesheet" href="css/index.css">
<script src="js/snake.js"></script>
</head>
<body>
<div class="bigBox">
<div class="start">
<img src="images/btn1.gif" alt="">
</div>
<div class="stop">
<img src="images/btn4.png" alt="">
</div>
<div class="con">
</div>
</div>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bigBox {
position: relative;
width: 640px;
height: 640px;
margin: 50px auto;
background-color: #fce4ec;
border: 20px solid #f8bbd0;
box-sizing: border-box;
}
.start {
width: 200px;
height: 150px;
}
.start,
.stop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.stop {
display: none;
width: 70px;
height: 70px;
}
img {
width: 100%;
height: 100%;
}
js部分
window.addEventListener('load', function () {
var bigBox = this.document.querySelector('.bigBox');
var start = this.document.querySelector('.start');
var stop = this.document.querySelector('.stop');
var con = this.document.querySelector('.con');
function Snake() {
//设置蛇的宽、高、方向
this.width = 20;
this.height = 20;
this.direction = 'right';
//设置初始状态 一个头加两个身体
this.body = [
{
x: 2, y: 0 }, //蛇头
{
x: 1, y: 0 }, //蛇身
{
x: 0, y: 0 } //蛇身
]
//将贪吃蛇显示在游戏区域内
this.display = function () {
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].x != null) {
var s = document.createElement('div');
this.body[i].flag = s;
s.style.height = this.height + 'px';
s.style.width = this.width + 'px';
s.style.borderRadius = '10px';
//通过蛇头的方向，对舌头进行旋转，确保蛇头的方向和行走的方向一致
if (i == 0) {
if (this.direction == 'up') {
s.style.transform = 'rotate(-90deg)';
}
if (this.direction == 'down') {
s.style.transform = 'rotate(90deg)';
}
if (this.direction == 'left') {
s.style.transform = 'rotate(-180deg)';
}
if (this.direction == 'right') {
s.style.transform = 'rotate(0deg)';
}
s.style.backgroundImage = 'url(./images/snake.png)';
s.style.backgroundSize = '25px 20px ';
s.style.backgroundPosition = 'center center';
} else {
s.style.backgroundColor = '#9ccc65';
}
s.style.position = 'absolute';
s.style.left = this.body[i].x * this.width + 'px';
s.style.top = this.body[i].y * this.height + 'px';
con.appendChild(s);
}
}
}
//蛇移动，后一个元素到前一个元素的位置
this.run = function () {
//蛇头另外根据方向处理，所以 i 不等于0
for (var i = this.body.length - 1; i > 0; i--) {
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
//根据方向处理蛇头的转向
switch (this.direction) {
case 'left': this.body[0].x -= 1;
break;
case 'right': this.body[0].x += 1;
break;
case 'up': this.body[0].y -= 1;
break;
case 'down': this.body[0].y += 1;
break;
}
//判断是否出界
if (this.body[0].x < 0 || this.body[0].x > 29 || this.body[0].y < 0 || this.body[0].y > 29) {
clearInterval(timer);//清除定时器
alert('你的得分是：' + score);
//删除旧的贪吃蛇
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].flag != null) {
con.removeChild(this.body[i].flag);
}
}
//初始化
this.body = [
{
x: 2, y: 0 }, //蛇头，第一个点
{
x: 1, y: 0 }, //蛇身
{
x: 0, y: 0 } //蛇身
];
this.direction = 'right';
score = 0;
start.style.display = 'block'; //结束显示开始按键
con.removeChild(food.flag);
return false;
}
//蛇头吃到食物 xy的坐标相等
if (this.body[0].x == food.x && this.body[0].y == food.y) {
//蛇加一节 因为根据最后节点定，下面display时会更新
this.body.push({
x: null, y: null, flag: null });
score++;
//清除食物再重新生成食物
con.removeChild(food.flag);
food.display();
}
//吃到自己死亡，从第五个开始判断
for (var i = 4; i < this.body.length; i++) {
if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
clearInterval(timer);
alert('你的得分是：' + score);
//删除旧的贪吃蛇
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].flag != null) {
con.removeChild(this.body[i].flag);
}
}
//初始化
this.body = [
{
x: 2, y: 0 }, //蛇头，第一个点
{
x: 1, y: 0 }, //蛇身
{
x: 0, y: 0 } //蛇身
];
this.direction = 'right';
score = 0;
btn.style.display = 'block'; //结束显示开始按键
con.removeChild(food.flag);
// this.display();
return false;//结束
}
}
//先删除旧的蛇再显示新蛇
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].flag != null) {
//当吃到食物时， flag等于 null,且不能删除
con.removeChild(this.body[i].flag);
}
}
this.display();
}
}
//构造食物 并设置食物出现的位置
function Food() {
this.width = 20;
this.height = 20;
this.name = 'zhangsan';
this.display = function () {
var f = document.createElement('div');
this.flag = f;
f.style.width = this.width + 'px';
f.style.height = this.height + 'px';
f.style.backgroundImage = 'url(./images/food2.png)';
f.style.backgroundSize = '100% 100%';
f.style.position = 'absolute';
this.x = Math.floor(Math.random() * 30);
this.y = Math.floor(Math.random() * 30);
f.style.left = this.x * this.width + 'px';
f.style.top = this.y * this.height + 'px';
console.log(this.x);
console.log(this.y);
con.appendChild(f);
}
}
//调用函数，游戏开始
var timer = null;
var flag = false;
var score = 0;
var snake = new Snake();
var food = new Food();
var flag1 = false;
start.addEventListener('click', function (e) {
e.stopPropagation();
start.style.display = 'none';
snake.display();
food.display();
timer = setInterval(function () {
snake.run();
}, 200)
//键盘按键事件
document.addEventListener('keydown', function (e) {
switch (e.keyCode) {
case 38:
if (snake.direction != 'down') {
snake.direction = 'up';
}
break;
case 40:
if (snake.direction != 'up') {
snake.direction = 'down';
}
break;
case 37:
if (snake.direction != 'right') {
snake.direction = 'left';
}
break;
case 39:
if (snake.direction != 'left') {
snake.direction = 'right';
}
break;
}
})
flag1 = true;
flag = true;
})
// 游戏开始后，点击游戏界面可以暂停游戏，再点击继续游戏
bigBox.addEventListener('click', function () {
console.log('+++++' + flag1);
console.log('====' + flag);
if (flag1) {
if (flag) {
clearInterval(timer);
stop.style.display = 'block';
flag = false;
} else {
clearInterval(timer);
timer = setInterval(function () {
snake.run();
}, 200)
stop.style.display = 'none';
flag = true;
}
}
})
})
| 结尾 |
快去动手试试吧，相信这对于你来说就是小菜一碟
