<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游戏初始化界面</title>
<style>
body {
margin: 0;
padding: 0;
}
#main {
margin: 100px;
}
.btn {
width: 100px;
height: 40px;
}
.gtitle {
font-size: 25px;
font-weight: bold;
}
#gnum {
color: red;
}
</style>
</head>
<body>
<div id="main">
<!-- 按钮 -->
<h1>贪吃蛇游戏</h1>
<input class="btn" type="button" value="开始游戏" id="begin">
<input class="btn" type="button" value="暂停游戏" id="pause">
<span class="gtitle">第<span id="gnum">1</span>关</span>
</div>
<!-- 贪吃蛇游戏设计 -->
<script>
var main = document.getElementById('main');
/* 画布格子是否开启 */
var showcanvas = true;
/* atom 原子大小 xnum横向原子数量 ynum纵向原子数量 */
function Map(atom, xnum, ynum) {
this.atom = atom;
this.xnum = xnum;
this.ynum = ynum;
//声明画布
this.canvas = null;
//第二部分 创建画布方法
this.create = function() {
this.canvas = document.createElement('div');
this.canvas.style.cssText = 'position:relative;top:40px;border:1px solid red;background:#FAFAFA';
this.canvas.style.width = this.atom * this.xnum + 'px'; //画布的宽
this.canvas.style.height = this.atom * this.ynum + 'px'; //画布的宽
main.appendChild(this.canvas);
if (showcanvas) {
for (var x = 0; x < xnum; x++) {
for (var y = 0; y < ynum; y++) {
var a = document.createElement('div');
a.style.cssText = "border:1px solid yellow";
a.style.width = this.atom + 'px';
a.style.height = this.atom + 'px';
a.style.backgroundColor = 'green';
this.canvas.appendChild(a);
a.style.position = 'absolute';
a.style.left = x * this.atom + 'px';
a.style.top = y * this.atom + 'px';
}
}
}
}
}
/*第四部分 创建蛇 */
function Snake(map) {
//设置宽度高度
this.width = map.atom;
this.height = map.atom;
/* 蛇的方向 */
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++) {
//当吃到食物时候 x==null 不能新建 不然会在00处新建一个
if (this.body[i].x != null) {
var s = document.createElement('div');
//将蛇的节点保存到状态变量中 方便删除使用
this.body[i].flag = s;
/* console.log(1); */
//设置蛇的样式
s.style.width = this.width + 'px';
s.style.height = this.height + 'px';
s.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 200) + "," +
Math.floor(Math.random() * 200) + "," +
Math.floor(Math.random() * 200) + ")"
s.style.position = 'absolute';
s.style.left = this.body[i].x * this.width + 'px';
s.style.top = this.body[i].y * this.height + 'px';
//添加到地图中
map.canvas.appendChild(s);
}
}
}
/* 让蛇动起来
{
x: 2,
y: 0
}, //第一点
{
x: 1,
y: 0
}, //第二点
{
x: 0,
y: 0
} //第四点 让蛇改变方向*/
this.run = function() {
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 == food.x && this.body[0].y == food.y) {
//蛇会加一个
this.body.push({
x: null,
y: null,
flag: null
});
//判断一下几倍
if (this.body.length > l.slength) {
l.set();
}
map.canvas.removeChild(food.flag);
food = new Food(map);
}
//判断是否出界
if (this.body[0].x < 0 || this.body[0].x > map.xnum - 1 || this.body[0].y < 0 || this.body[0].y > map.ynum - 1) {
clearInterval(timer);
alert("真笨啊,活活的撞墙了");
restart(map, this);
return false;
}
//判断是否和自己重合
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("真笨啊,活活的吃到自己了");
restart(map, this);
return false;
}
}
/* console.log(111); */
/* this.body[0].x += 1; */
for (var i = 0; i < this.body.length; i++) {
//不等于空 就删除 当吃到食物的时候 flag等于空
if (this.body[i].flag != null) {
map.canvas.removeChild(this.body[i].flag);
}
}
this.display();
//给body加键盘事件 第五步 给蛇改变方向
window.onkeydown = function(e) {
var event = e || window.event;
switch (event.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;
}
}
/*
*/
}
}
//重新开始游戏 第六部分
function restart(map, snake) {
for (var i = 0; i < snake.body.length; i++) {
map.canvas.removeChild(snake.body[i].flag);
}
snake.body = [{
x: 2,
y: 0
}, //第一点
{
x: 1,
y: 0
}, //第二点
{
x: 0,
y: 0
} //第三点
];
snake.direction = 'right';
snake.display();
map.canvas.removeChild(food.flag);
food = new Food(map);
}
//创建级别
function Level() {
this.num = 1; //第几级别
this.speek = 300; //速度加快
this.slength = 8; //每个关的长度判断
this.set = function() {
this.num++;
if (this.speek <= 50) {
this.speek = 50;
} else {
this.speek -= 50;
}
//可以自己定义
this.slength += 3;
this.display();
start();
}
this.display = function() {
document.getElementById('gnum').innerHTML = this.num;
}
}
var l = new Level();
l.display();
var map = new Map(20, 40, 20);
//创建画布
map.create();
//构造食物
var food = new Food(map);
//构建蛇
var snake = new Snake(map);
snake.display();
/* 第三部分 创建食物 map地图对象 */
function Food(map) {
this.width = map.atom;
this.height = map.atom;
this.bgcolor = "rgb(" + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + "," +
Math.floor(Math.random() * 200) + ")"
this.x = Math.floor(Math.random() * map.xnum);
this.y = Math.floor(Math.random() * map.ynum);
//画出食物
this.flag = document.createElement('div');
this.flag.style.width = this.width + 'px';
this.flag.style.height = this.height + 'px';
this.flag.style.backgroundColor = this.bgcolor;
this.flag.style.borderRadius = '50%';
this.flag.style.position = 'absolute';
this.flag.style.left = this.x * this.width + 'px';
this.flag.style.top = this.y * this.height + 'px';
map.canvas.appendChild(this.flag);
}
var timer; //变量可以提升
/* 第一部分 */
function start() {
clearInterval(timer);
timer = setInterval(function() {
snake.run();
}, l.speek)
}
/* 第一部分开始 */
document.getElementById('begin').onclick = function() {
start();
}
/*第一部分 暂停 */
document.getElementById('pause').onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
}, 300)
}
</script>
</body>
</html>
运行结果
