其他分享
首页 > 其他分享> > JS项目_贪吃蛇

JS项目_贪吃蛇

作者:互联网

预览

源码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>七彩贪吃蛇</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			background-color: #000000;
		}
		
		div {
			width: 1000px;
			height: 500px;
			margin: 20px auto;
		}
		
		canvas {
			border: 1px solid #000;
			background-color: #000;
		}
		
		#startGame {
			width: 120px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-size: 20px;
			color: #0000FF;
			background-color: #FFC0CB;
			margin: 20px 40%;
		}
		
		span {
			display: inline-block;
			color: red;
		}
	</style>

	<body>
		<div>
			<canvas id="cvs" width="1000" height="500"></canvas>
			<span id="span">0分</span>
			<button id="startGame">开始游戏</button>

		</div>
	</body>
	<script type="text/javascript">
		let ctx = cvs.getContext('2d')
		let x = 60
		let y = 20 //初始位置
		let f = {}
		let arr = [{
				x: 20,
				y: 20
			},
			{
				x: 40,
				y: 20
			},
			{
				x: 60,
				y: 20
			}
		]
		//网格
		function gridding(x, y, x1, y1) {
			ctx.beginPath()
			ctx.lineWidth = 0.2
			ctx.strokeStyle = '#800080'
			ctx.moveTo(x, y)
			ctx.lineTo(x1, y1)
			ctx.closePath()
			ctx.stroke()
		}

		function maps() {
			for(let i = 20; i <= cvs.width; i += 20) {
				gridding(i, 0, i, cvs.height)
			}
			for(let i = 20; i <= cvs.height; i += 20) {
				gridding(0, i, cvs.width, i)
			}
		}
		maps()
		//填充矩形

		function fillRects(x, y) {

			ctx.fillStyle = getRandomColor()
			ctx.fillRect(x, y, 20, 20);
			ctx.stroke();
		}
		//		蛇身位置
		function initial() {
			for(let i = 0; i < arr.length; i++) {
				fillRects(arr[i].x, arr[i].y)
			}
		}
		initial()

		//随机颜色
		function getRandomColor() {
			return '#' + (function(color) {
				return(color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
			})('');
		}

		function cler(x, y) {
			ctx.clearRect(0, 0, cvs.width, cvs.height)

		}

		//	定时器

		let timeX = setInterval(moveX, 100)
		let timeY = setInterval(moveY, 100)
		let a = 20
		clearInterval(timeX)
		clearInterval(timeY)

		timeX = 0
		timeY = 0
		//移动
		function moveX() {

			x += a
			fillRects(x, y)
			cler()
			maps()
			fillRects(f.x, f.y)
			arr.push({
				x: x,
				y: y
			})
			arr = arr.slice(1)
			initial()
			gameOver()
			Decide()

			if(x == f.x && y == f.y) {
				arr.push({
					x: f.x,
					y: f.y
				})
				food()
			}
			span.innerHTML = arr.length - 3 + '分'
		}

		function moveY() {
			y += a
			fillRects(x, y)
			cler()
			maps()
			fillRects(f.x, f.y)
			arr.push({
				x: x,
				y: y
			})
			arr = arr.slice(1)
			initial()
			gameOver()
			Decide()

			//		console.log('y==='+y)
			if(x == f.x && y == f.y) {
				arr.push({
					x: f.x,
					y: f.y
				})
				food()
			}
		}

		//	开始游戏
		startGame.onclick = function() {
			console.log(timeX, timeY)

			if(this.innerHTML == '开始游戏') {
				this.innerHTML = '暂停游戏'
				timeX = setInterval(moveX, 100)
				console.log(timeX)

				//	键盘事件
				a = 20
				document.addEventListener('keydown', function(e) {
					let event = e || window.event
					let ke = event.keyCode
					//			右
					if(timeX == false) {
						if(ke == 39) {
							clearInterval(timeY)
							timeY = 0
							clearInterval(timeX)
							timeX = 0
							a = 20
							timeX = setInterval(moveX, 100)

						}
						//			左
						else if(ke == 37) {

							clearInterval(timeY)
							timeY = 0
							clearInterval(timeX)
							timeX = 0

							a = -20
							timeX = setInterval(moveX, 100)

						}

					} else if(timeY == false) {

						//			上
						if(ke == 38) {

							clearInterval(timeX)
							timeX = 0

							a = -20
							timeY = setInterval(moveY, 100)

						}
						//			下
						if(ke == 40) {

							//					console.log(timeY)
							clearInterval(timeY)
							timeY = 0

							clearInterval(timeX)
							timeX = 0

							a = 20
							timeY = setInterval(moveY, 100)

						}
					}

					//			

				})

			} else {
				this.innerHTML = '开始游戏'
				clearInterval(timeX)
				clearInterval(timeY)
				timeX = 0
				timeY = 0
			}
			console.log(timeX, timeY)

		}
		//游戏结束
		function gameOver() {
			if(x > 1000 - 20) {
				clearInterval(timeX)
				clearInterval(timeY)
				timeY = 0
				timeX = 0
				alert('呀呀哎呀啊')
				cler()
				maps()
				arr = [{
						x: 20,
						y: 20
					},
					{
						x: 40,
						y: 20
					},
					{
						x: 60,
						y: 20
					}
				]
				x = 60
				y = 20
				initial()
				startGame.innerHTML = '开始游戏'
			}
			if(x < 0) {
				clearInterval(timeX)
				clearInterval(timeY)
				timeY = 0
				timeX = 0
				alert('呀呀哎呀啊')
				cler()
				maps()
				arr = [{
						x: 20,
						y: 20
					},
					{
						x: 40,
						y: 20
					},
					{
						x: 60,
						y: 20
					}
				]
				x = 60
				y = 20
				initial()
				startGame.innerHTML = '开始游戏'

			}
			if(y > 500 - 20) {
				clearInterval(timeX)
				clearInterval(timeY)
				timeY = 0
				timeX = 0
				alert('呀呀哎呀啊')
				cler()
				maps()
				x = 60
				y = 20
				arr = [{
						x: 20,
						y: 20
					},
					{
						x: 40,
						y: 20
					},
					{
						x: 60,
						y: 20
					}
				]
				initial()
				startGame.innerHTML = '开始游戏'
			}
			if(y < 0) {
				clearInterval(timeX)
				clearInterval(timeY)
				timeY = 0
				timeX = 0
				alert('呀呀哎呀啊')
				cler()
				maps()
				x = 60
				y = 20
				arr = [{
						x: 20,
						y: 20
					},
					{
						x: 40,
						y: 20
					},
					{
						x: 60,
						y: 20
					}
				]
				initial()
				startGame.innerHTML = '开始游戏'
			}

		}

		//	食物
		function food() {
			let a = (Math.floor(Math.random() * 49 + 1)) * 20
			let b = (Math.floor(Math.random() * 24 + 1)) * 20
			return f = {
				x: a,
				y: b
			}
		}
		food()
		fillRects(f.x, f.y)
		//判断是否撞到自己了		

		function Decide() {
			for(let i = 0; i < arr.length - 1; i++) {
				if(arr[i].x == arr[arr.length - 1].x && arr[i].y == arr[arr.length - 1].y) {
					clearInterval(timeX)
					clearInterval(timeY)
					timeY = 0
					timeX = 0

					alert('撞到自己了!')
					cler()
					maps()
					x = 60
					y = 20
					arr = [{
							x: 20,
							y: 20
						},
						{
							x: 40,
							y: 20
						},
						{
							x: 60,
							y: 20
						}
					]
					initial()
					startGame.innerHTML = '开始游戏'
				}
			}

		}
	</script>

</html>

标签:arr,20,timeY,项目,clearInterval,JS,60,贪吃蛇,timeX
来源: https://www.cnblogs.com/zhuhukang/p/15838821.html