html版贪吃蛇源码分享 - 黑马程序员技术交流社区

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Snake web edition</title>
<script type="text/javascript">
var map = null; //面板对象
var food = null; //食物对象
var snake = null; //蛇对象（null是空指针，可用于声明空对象）
var mytime = null; //定时器对象
//1.制作操作面板
function Map(){
this.width = 800;//面板宽
this.height = 400;//面板高
this.color = "lightblue";// 面板背景颜色
this.bord = 0;
//通过方发绘制操作面板
this.showmap = function(){
//创建div, 通过div展示面板
var ban = document.createElement('div');
ban.style.width = this.width+"px";//面板宽
ban.style.height = this.height+"px";//高
ban.style.backgroundColor = this.color;
//对div面板进行定位
ban.style.position = "absolute";//绝对定位
ban.style.left = 0;
ban.style.top = 0;
//把div面板追加到body里面
document.body.appendChild(ban);
}
}
//2.绘制食物
function Food(){//构造函数
this.height = 20;//食物高
this.width = 20;//食物宽
this.color = "red";
this.pice = null;
//food 位置随机
this.showfood = function(){
//创建一个食物div
if( this.pice == undefined){
this.pice = document.createElement('div');
this.pice.style.width = this.width+"px";//食物宽
this.pice.style.height = this.height + "px";//食物高
this.pice.style.backgroundColor = this.color;// 食物颜色
//定位
this.pice.style.position = "absolute";
}
//让食物的位置发生变化
//食物水平位置0--780px --->获得随机数范围0--39
//Math.random()产生的随机数位小数在0--1之间
//Math.floor() 向下取整
this.weizhiX = Math.floor(Math.random() * 40 );//取0--39之间随机数
this.weizhiY = Math.floor(Math.random() * 20);//取0--19之间随机数
this.pice.style.left = this.width* this.weizhiX+"px";
this.pice.style.top = this.width * this.weizhiY + "px";
//body追加shiwu
document.body.appendChild(this.pice);
}
}
//3.绘制蛇
function Snake(){
this.range = 20; //每个蛇节的宽度和高度
// 段 duans的每个元素就是一个蛇节的信息
this.duans = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];
this.redirect = "right";//蛇默认向右走
//绘制小蛇
this.showduans = function(){
//遍历duans的数组，获得具体蛇的信息
for(var i in this.duans){
//创建每个蛇段的 div
//判断每个蛇段，之前是否有创建出来，避免创建重复的蛇段
if(this.duans[i][3] == undefined){
this.duans[i][3] = document.createElement('div');
this.duans[i][3].style.backgroundColor = this.duans[i][2];
this.duans[i][3].style.width = this.range+"px";
this.duans[i][3].style.height = this.range+"px";
this.duans[i][3].style.position = "absolute";
}
this.duans[i][3].style.left = this.duans[i][0] * this.range+ "px";
this.duans[i][3].style.top = this.duans[i][1] * this.range+ "px";
//展示每个蛇段
document.body.appendChild(this.duans[i][3]);
}
}
//移动小蛇
this.moveduans = function (){
for(var i=0;i< this.duans.length-1;i++){
//当前元素的下标 === 下个元素的下标
this.duans[i][0] = this.duans[i+1][0];//移动x轴坐标
this.duans[i][1] = this.duans[i+1][1];//移动y轴坐标
}
//移动蛇头--向右
if(this.redirect == "right"){
this.duans[this.duans.length-1][0] += 1;
}
//移动蛇头--向下
if(this.redirect == "down"){
this.duans[this.duans.length-1][1] += 1;
}
//移动蛇头--向左
if(this.redirect == "left"){
this.duans[this.duans.length-1][0] -= 1;
}
//移动蛇头--向上
if(this.redirect == "up"){
this.duans[this.duans.length-1][1] -= 1;
}
//判断蛇头是否越界 --x坐标是否超过39
// y坐标是否超过19
// x坐标是否小于0
// y坐标是否小于0
if(this.duans[this.duans.length-1][0] > 39 ||
this.duans[this.duans.length-1][0] < 0 ||
this.duans[this.duans.length-1][1] > 19 ||
this.duans[this.duans.length-1][1] < 0
){
//game over---停止定时器
alert("Game over!!");
clearInterval(mytime);
return false; //停止程序执行
}
//判断蛇是否吃到自己--即蛇头部坐标与某个蛇段坐标是否相等
var shetouX = this.duans[this.duans.length-1][0];//蛇头X坐标
var shetouY = this.duans[this.duans.length-1][1]; //蛇头Y坐标
//遍历蛇段
for(var i = 0; i< this.duans.length-1; i++){
if(this.duans[i][0] == shetouX && this.duans[i][1]==shetouY){
alert("吃到自己了，Game over！！！");
clearInterval(mytime);
return false; //停止程序执行
}
}
//判断蛇头是否碰到食物
var snakeX = this.duans[this.duans.length-1][0] ;
var snakeY = this.duans[this.duans.length-1][1];
var fX = food.weizhiX;
var fY = food.weizhiY;
if(snakeX == fX && snakeY == fY){//蛇头坐标和食物坐标相等,则吃上食物
// 吃掉食物--把一个新段创建出来,新段的坐标就是最后一个蛇段的坐标
var newduan = [this.duans[0][0],this.duans[0][1],'green',null];
this.duans.unshift(newduan);
// 重新生成食物
food.showfood();
}
//蛇段的位置发生变化，重新绘制小蛇
this.showduans();
}
}
window.onload = function(){//加载事件
//1.绘制面板
map = new Map();
map.showmap();
//2.绘制食物
food = new Food();
food.showfood();
//3.绘制小蛇
snake = new Snake();
snake.showduans();
//4.移动蛇
mytime = setInterval("snake.moveduans()",100);//定时器单位ms
//snake.moveduans();
//5.给body添加键盘事件
document.body.onkeydown = function(evt){
//console.log(evt.keyCode);//获得键码表上下左右-- 38 40 37 39
if(evt.keyCode == 38 && snake.redirect!= "down"){
snake.redirect = "up";
}
if(evt.keyCode == 40 && snake.redirect!= "up"){
snake.redirect = "down";
}
if(evt.keyCode == 37 && snake.redirect!= "right"){
snake.redirect = "left";
}
if(evt.keyCode == 39 && snake.redirect!= "left"){
snake.redirect = "right";
}
}
}
</script>
</head>
<body>
hehe
</body>
</html>

复制代码