<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
body{
margin: 0px;
padding: 0px;
}
#main{
margin: 100px;
}
.btn{
width: 100px;
height: 40px;
}
.gtitle{
font-size: 25px;
font-width: bold;
}
#guan{
color: red;
}
</style>
</head>
<body> <div id="main">
<h1>贪吃蛇</h1>
<input type="button" value="开始游戏" class="btn" id="begin">
<input type="button" value="暂停游戏" class="btn" id="pause">
<span class="gtitle">第<span id="guan">1</span>关</span>
<script>
var main = document.getElementById('main');
var show_canvas = true;//是否开启画布格子
/*
地图对象的构造方法
atom 原子大小宽高是 10px
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;left:300px;top:40px;" +
"border:1px solid darkred;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(show_canvas){
for(var x = 0; x < xnum; x++) {
for(var y = 0; y < ynum; y++) {
var a = document.createElement('div');
a.style.cssText = "position:absolute;border:1px solid yellow;";
a.style.width = this.atom + "px";
a.style.height = this.atom + "px";
a.style.backgroundColor = "green";
a.style.left = x * this.atom +"px";
a.style.top = y * this.atom +"px";
this.canvas.appendChild(a);
}
}
}
}
}
/*
*创建食物的构造方法
*
*/
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);
}
/////////////////////////////////////////////////////// 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(let 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.width = this.width + "px";
s.style.height = this.height + "px";
s.style.backgroundColor = "red";
//设置位置rang
s.style.position = "absolute";
s.style.border = "1px solid yellow";
s.style.left = this.body[i].x * this.width + "px";
s.style.top = this.body[i].y * this.height + "px";
//添加到地图中
map.canvas.appendChild(s);
}
}
};
//让蛇运动起来
this.run = function () {
/*
{x:2,y:0}, //蛇头
{x:1,y:0}, //蛇身
{x:0,y:0} //蛇尾
*/
//alert(this.body.length);
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; }
//默认是right left up down
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});//添加一个空节点
map.canvas.removeChild(food.flag);//删除食物
food = new Food(map);//再随机产生一个食物 //设置级别
if(this.body.length > L.slength){
L.set();
}
} //判断是否出界
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("GAME OVER");
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("GAME OVER");
restart(map, this);
return false;
}
} //删除节点
for(let i = 0; i < this.body.length; i++){
if(this.body[i].flag!=null) {//当吃到食物，flag=null
map.canvas.removeChild(this.body[i].flag);
}
} this.display();
}
} //重新开始游戏
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";//初始化方向
map.canvas.removeChild(food.flag);
snake.display();
food = new Food(map);
}
//设置级别对象
function Level() {
this.num = 1;//级别数;
this.speek = 100;
this.slength = 5;// this.set = function () {
this.num++;
if(this.speek <= 50){
this.speek=50;
}else{
this.speek -= 50;
}
this.slength+=1;
start();
this.display();
};
this.display = function (){
document.getElementById('guan').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(); //添加键盘事件，上下左右
window.onkeydown = function (e) {
var event = e || window.event;
// alert(event.keyCode);
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;
}
};
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);
}
</script>
</div>
</body>
</html>