编写有一些麻烦的简单游戏

时间:2018-11-14 22:47:13

标签: javascript html

我有以下代码(如果输入'u'-可以正常工作,但其他不能正常工作)。 如果您遇到类似“无法读取null属性”的问题-这是代码段发布的问题,那么在我的浏览器端,我不会遇到这样的问题。 主要问题-例如-如果您输入5,然后输入'd'-它说'您不能踩到这里'。但是你可以!似乎IF语句设置很好。

window.onload = function core () {
	let platform = document.createElement('div');
	platform.setAttribute('id','platform');
	document.body.appendChild(platform);
	let count = 0;
	for (let i=1; i<101; i++) {
		let grid = document.createElement('button');
		grid.setAttribute('id',i);
		grid.setAttribute('class','eachGridBlock');
		document.getElementById('platform').appendChild(grid);
		count++;
		if (count === 10) {
			let newLine = document.createElement('br');
			document.getElementById('platform').appendChild(newLine);
			count = 0;
		};
	};
	let defaultPosition = 1;
	document.getElementById(defaultPosition).setAttribute('class','focusedBlock');
	let nowPosition = prompt('where am I? (number)');
	let userInput = prompt('where to go? (up, down, left, right)');
	document.getElementById(defaultPosition).setAttribute('class','eachGridBlock');
	document.getElementById(nowPosition).setAttribute('class','focusedBlock');
	if (userInput === 'd') {
		if (nowPosition >= 91) {
			alert('you cant step here');
		} else {
			let nextPosition = nowPosition + 10;
			document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
			document.getElementById(nextPosition).setAttribute('class','focusedBlock');
		};
	};
	if (userInput === 'u') {
		if (nowPosition <= 10) {
			alert('you cant step here');
		} else {
			let nextPosition = nowPosition - 10;
			document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
			document.getElementById(nextPosition).setAttribute('class','focusedBlock');
		};
	};
	if (userInput === 'l') {
		if (nowPosition === 1 || nowPosition === 11 || nowPosition === 21 || nowPosition === 31 || nowPosition === 41 || nowPosition === 51 || nowPosition === 61 || nowPosition === 71 || nowPosition === 81 || nowPosition === 91) {
			alert('you cant step here');
		} else {
			let nextPosition = nowPosition - 1;
			document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
			document.getElementById(nextPosition).setAttribute('class','focusedBlock');
		};
	};
	if (userInput === 'r') {
		if (nowPosition === 10 || nowPosition === 20 || nowPosition === 30 || nowPosition === 40 || nowPosition === 50 || nowPosition === 60 || nowPosition === 70 || nowPosition === 80 || nowPosition === 90 || nowPosition === 100) {
			alert('you cant step here');
		} else {
			let nextPosition = nowPosition + 1;
			document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
			document.getElementById(nextPosition).setAttribute('class','focusedBlock');
		};
	};
};
<html>
<head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#plarform {
			width: 500px;
			height: 500px;
			background-color: #222222;
		}
		.eachGridBlock {
			margin: 0;
			padding: 0;
			width: 50px;
			height: 50px;
			background-color: #000044;
			border: 0;
		}
		.focusedBlock {
			margin: 0;
			padding: 0;
			width: 50px;
			height: 50px;
			background-color: #9900ff;
			border: 0;
		}
	</style>
	<script type="text/javascript" src="./core.js"></script>
</head>
<body>
	
</body>
</html>

0 个答案:

没有答案