贪吃蛇源码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>贪吃蛇</title>
	<style type="text/css">
		.map{
			width: 800px;
			height: 600px;
			margin: 0 auto;
			background: #ccc;
			position: relative;
		}
		.map>div{
			border-radius: 40%;
		}
	</style>
</head>
<body>
	<div class="map"></div>
	<script type="text/javascript">
		var map = document.querySelector('.map');
		var mapWidth = map.clientWidth;
		var mapHight = map.clientHeight;
		var body = [];
		var snakeBox = [];
		var timer = null;
		//构造函数
		function Game() {
			//小方块
			this.width = 20;
			this.height = 20;
			this.color = 'blue';
			this.x = 0;
			this.y = 0;
			this.speed = 20;
			this.box = document.createElement('div');
			//蛇
			this.direction = 'right';
            this.body  = [
                {x:3,y:2,color:'red'},//蛇头
                {x:2,y:2,color:'orange'},//蛇的身体
                {x:1,y:2,color:'orange'},//蛇的身体
            ]
		}
		//原型方法
		Game.prototype = {
			//调用
			init: function () {
				this.food();
				this.snake();
				this.snakeMove();
				this.keydown();
			},
			//随机小方块
			food: function (x,y) {
				var div = this.box;
				console.log(div);

				div.style.position = 'absolute';
	            div.style.width = this.width+'px';
	            div.style.height = this.height+'px';
	            div.style.backgroundColor = this.color;
	            //把小方块添加在map地图中了
	            map.appendChild(div);

	            //随机产生横纵坐标
	            var x = Math.floor(Math.random()*mapWidth/this.width)*this.width;
	            var y = Math.floor(Math.random()*mapHight/this.height)*this.height;
	            this.x = x;
	            this.y = y;
	            div.style.left = this.x+'px';
	            div.style.top = this.y+'px';
			},
			//创建小蛇
			snake:function(){
				for (var i = 0; i < this.body.length; i++) {
					var obj = this.body[i];
                    var div = document.createElement('div');
                    map.appendChild(div);
                    div.style.position = 'absolute';
                    div.style.width = this.width + 'px';
                    div.style.height = this.height + 'px';
                    div.style.left = this.width*obj.x + 'px';
                    div.style.top = this.height*obj.y + 'px';
                    div.style.backgroundColor = obj.color;
                    snakeBox.push(div);
                    console.log(snakeBox);
				}
			},
			snakeMove:function () {
             	clearInterval(timer);

    			timer = setInterval(()=>{
	                for(var i = snakeBox.length - 1; i > 0 ; i--) {
                		snakeBox[i].style.left = snakeBox[i - 1].style.left;
			        	snakeBox[i].style.top = snakeBox[i - 1].style.top;
				    }
	                //设置小蛇的头部
	                switch(this.direction){
	                    case 'right':
	                        snakeBox[0].style.left = parseInt(snakeBox[0].style.left) + this.speed + 'px';
	                        break;
	                    case 'left':
	                        snakeBox[0].style.left = parseInt(snakeBox[0].style.left) - this.speed + 'px';
	                        break;
	                    case 'top':
	                       snakeBox[0].style.top = parseInt(snakeBox[0].style.top) - this.speed + 'px';
	                        break;
	                    case 'bottom':
	                        snakeBox[0].style.top = parseInt(snakeBox[0].style.top) + this.speed + 'px';
	                        break;
	                }

	                if(parseInt(snakeBox[0].style.left) == this.x && parseInt(snakeBox[0].style.top) == this.y){
	                	var div = document.createElement('div');
	                    map.appendChild(div);
	                    div.style.position = 'absolute';
	                    div.style.width = this.width + 'px';
	                    div.style.height = this.height + 'px';
	                    var lastLeft = parseInt(snakeBox[snakeBox.length - 1].style.left) + 'px';
	                    var lastTop  = parseInt(snakeBox[snakeBox.length - 1].style.top) + 'px';
	                    div.style.top = lastTop;
	                    div.style.left = lastLeft;
	                    div.style.backgroundColor = 'orange';
	                    snakeBox.push(div);
	                    this.food();
	                }
	                var left = parseInt(snakeBox[0].style.left);
	                var top = parseInt(snakeBox[0].style.top);
	                if (left < 0 || left > parseInt(mapWidth) || top < 0 || top > parseInt(mapHight)) {
	                	alert('游戏结束，重新开始');
	                	window.location.reload();
	                }
    			},200)
			},
			keydown:function(){
                document.addEventListener('keydown',function(e){
                    //console.log(e.keyCode)
                    switch (event.keyCode){
                        case 37:
                            this.direction = 'left';
                            break;
                        case 38:
                            this.direction = 'top';
                            break;
                        case 39:
                            this.direction = 'right';
                            break;
                        case 40:
                            this.direction = 'bottom';
                            break;
                    }
                    this.snakeMove();

                }.bind(this))
            },
		}
		//实例对象
		var game = new Game();
		game.init();
	</script>
</body>
</html>
猜你喜欢
