贪吃蛇小游戏

YZNH

于 2022-10-13 11:19:28 发布

阅读量103

点赞数

文章标签：贪吃蛇原生js

本文链接：https://blog.csdn.net/weixin_41772601/article/details/80481623

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>

</html>
<script type="text/javascript">
//地图
(function() {
//自定义地图构造函数
function MapG(width, height, background) {
this.width = width || 800;
this.height = height || 600;
this.background = background || '#ccc';
}
//定义到原型上为了数据共享
MapG.prototype.init = function() {
//创建地图标签
var mapDiv = document.createElement('div');
//获取body标签
var body = document.querySelector('body');
//地图标签追加到body当中
body.appendChild(mapDiv);
mapDiv.style.width = this.width + 'px';
mapDiv.style.height = this.height + 'px';
mapDiv.style.background = this.background;
mapDiv.style.margin = '50px auto';
mapDiv.style.position = 'relative';
mapDiv.className = 'map';
}
//将作用域中的构造函数公布给全局window中的属性
window.MapG = MapG;
}());

//食物
(function() {
//创建数组保存创建的食物的div
var elements = [];

function Food(width, height, background) {
this.Width = width || 20;
this.height = height || 20;
this.background = background || 'green';
//用来保存食物的坐标值
this.x = 0;
this.y = 0;
}
Food.prototype.init = function(mapDiv) {
//确保只有一个食物在地图上，所以当初始化生成食物div的时候
//先删除再添加
remove();
//创建食物div标签
var foodDiv = document.createElement('div');
//追加到地图标签的子标签
mapDiv.appendChild(foodDiv);
foodDiv.style.width = this.Width + 'px';
foodDiv.style.height = this.height + 'px';
foodDiv.style.background = this.background;
foodDiv.style.position = 'absolute';
this.x = parseInt(Math.random() * (mapDiv.offsetWidth / foodDiv.offsetWidth)) * foodDiv.offsetWidth;

this.y = parseInt(Math.random() * (mapDiv.offsetHeight / foodDiv.offsetHeight)) * foodDiv.offsetHeight;

foodDiv.style.left = this.x + 'px';
foodDiv.style.top = this.y + 'px';
//把创建的食物div元素存到数组中
elements.push(foodDiv);
console.log(elements);
}
//私有方法，删除
function remove() {
for(var i = 0; i < elements.length; i++) {
//从父节点删除食物div
elements[i].parentNode.removeChild(elements[i]);
//删除数组中存储的每个食物div元素
elements.splice(i, 1);
}
}
window.Food = Food;
}());
//蛇
(function() {
var elements = [];

function Snake(width, height, dir) {
this.width = width || 20;
this.height = height || 20;
this.dir = dir || 'right';
//创建数组，由于身体三部分的位置不同，所以用json保存
this.snBody = [{
x: 3,
y: 2,
color: 'red'
}, {
x: 2,
y: 2,
color: 'orange'
}, {
x: 1,
y: 2,
color: 'orange'
}];
}
/*
* 初始化蛇方法
* mapDiv参数：传入蛇的div元素
*/
Snake.prototype.init = function(mapDiv) {
//当初始化蛇的时候只能保证有一条蛇所以先删除后添加
remove();
//遍历身体的三部分，
for(var i = 0; i < this.snBody.length; i++) {
//为每个身体创建div元素
var snDiv = document.createElement('div');
console.log(this.snBody[i]);
mapDiv.appendChild(snDiv);
//分别给每个部分设置css属性
snDiv.style.width = this.width + 'px';
snDiv.style.height = this.height + 'px';
snDiv.style.background = this.snBody[i].color;
snDiv.style.position = 'absolute';
snDiv.style.left = this.snBody[i].x * this.width + 'px';
snDiv.style.top = this.snBody[i].y * this.height + 'px';
elements.push(snDiv);
}
}
//删除蛇
function remove() {
//从蛇尾向蛇头删除div
for(var i = elements.length - 1; i >= 0; i--) {
elements[i].parentNode.removeChild(elements[i]);
elements.splice(i, 1);
}
}
//蛇移动
Snake.prototype.snMove = function() {
//把蛇头的x,y坐标给蛇中段，把蛇中间的坐标再给蛇头
for(var i = this.snBody.length - 1; i > 0; i--) {
this.snBody[i].x = this.snBody[i - 1].x;
this.snBody[i].y = this.snBody[i - 1].y;
}
//判断蛇头的方向
switch(this.dir) {
case 'right':
this.snBody[0].x += 1;
break;
case 'left':
this.snBody[0].x -= 1;
break;
case 'top':
this.snBody[0].y -= 1;
break;
case 'bottom':
this.snBody[0].y += 1;
break;
}
}
window.Snake = Snake;
}());

(function() {
var myThis;

function Game() {
//实例化地图对象
var m = new MapG();
this.m = m;
//实例化食物对象
var food = new Food();
this.food = food;
//实例化蛇对象
var snake = new Snake();
this.snake = snake;
myThis = this;
}
Game.prototype.init = function() {
//调用初始化方法，将创建的地图div添加到body
this.m.init();
var mapDiv = document.querySelector('.map')
//调用食物的init方法，参数中传入mapDiv，为了将食物加到地图div的子元素
this.food.init(mapDiv);
this.snake.init(mapDiv);
rule();
userKeydown();
}
//规则
var rule = function() {
var mapDiv = document.querySelector('.map');
//蛇移动
var timer = setInterval(function() {
//由于定时器是window对象调用的，所以在定时器内部的匿名函数中，this指的是window
//所以第一种方法：在定时器外声明一个变量，把指向Game的this保存到变量中
//在函数内可以通过变量访问Game对象的属性和方法
//第二种方法:直接在用匿名函数调用bind(对象)，匿名函数中的this指向的就是bind()参数中对象
this.snake.snMove();
this.snake.init(mapDiv);

//蛇头出地图游戏结束
//判断蛇头的坐标值是否和地图的坐标相等
// this.snake.snBody[0].x * this.snake.width 份数乘以自身宽度等于坐标值
var overX = this.snake.snBody[0].x * this.snake.width;
var overY = this.snake.snBody[0].y * this.snake.height;
function divStyle() {
var div = document.createElement('div');
var body = document.querySelector('body');
body.appendChild(div);
div.style.cssText = 'width:300px;height:200px;border:1px #000 solid;position: absolute;left: 50%;top:0;transform: translateX(-50%);background: #fff;text-align: center; line-height: 200px;';
div.innerHTML = '游戏结束';
}
if(overX < 0 || overX == this.m.width||overY < 0 || overY == this.m.height) {
this.snake.init(mapDiv);
//关闭定时器游戏结束
clearInterval(timer);
divStyle();
}
//蛇头吃到食物
//判断蛇的坐标是否等于食物的坐标时，表示吃到食物，食物重新初始化蛇尾加一个div
console.log(this.snake.snBody[0].x+'-------------'+ this.food.x);
if(this.snake.snBody[0].x * this.snake.width== this.food.x && this.snake.snBody[0].y * this.snake.height == this.food.y){
//初始化食物
this.food.init(mapDiv);
//蛇尾增加一个div,div的坐标就是当前蛇尾的坐标
//创建一条json数据获取蛇尾的坐标，赋值给json追加到数组中
var snJson = {
x:this.snake.snBody[this.snake.snBody.length-1].x,
y:this.snake.snBody[this.snake.snBody.length-1].y,
color:'orange'
}
this.snake.snBody.push(snJson);
this.snake.init(mapDiv);

}

}.bind(myThis), 150)
}
var userKeydown = function() {
//addEventListener 事件监听第一个参数:事件类型第二个参数:匿名函数第三个参数:是否事件冒泡
document.addEventListener('keydown', function(e) {
switch(e.keyCode) {
case 37:
this.snake.dir = 'left';
break;
case 38:
this.snake.dir = 'top';
break;
case 39:
this.snake.dir = 'right';
break;
case 40:
this.snake.dir = 'bottom';
break;
}
}.bind(myThis), false)
}
window.Game = Game;
}());

var game = new Game();
game.init();
</script>