遊戲開發之--簡單的人物走動和地圖移動（一）

瓜瓜東西發表於2014-08-23
遊戲開發地圖
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	var myevent;
	$(document).ready(function() {

		$("#gamemain #bg1").click(function() {
			$(this).css("display", "none");
			$("#gamemain #map #tianyong").css("display", "block");
			loadZhuJiao();
		});
		$("#gamemain #map #tianyong").click(function() {
			myevent = window.event;
			mapMove.init(myevent);
			mapMove.moveRen();
			mapMove.moveMap();
		});
	});

	function loadZhuJiao() {
		$("#gamemain #map #tianyong #zhujiao").show();
	}

	var mapMove = {
		'mapXloop' : 1,
		'mapYloop' : 1,
		'juliX' : 0,
		'juliY' : 0,
		'e' : window.event,
		'k' : 0,
		'l' : 0,
		'renX' : 0,
		'renY' : 0,
		'changeJuliX' : 0,
		'changeJuliY' : 0,
		'renId' : 1,
		'mapId' : 1,
		'mapXSpeed' : 5,
		'mapYSpeed' : 5,
		'continueXAdd':true,
		'continueYAdd':true,
		'isOver' : true,
		'init' : function(e) {
			k=0;
			mapXloop = 1;
			mapYloop = 1;
			mapXSpeed = 5;
			mapYSpeed = 5;
			isOver = true;
			continueXAdd=true;
			continueYAdd=true;
			renX = $("#gamemain #map #tianyong #zhujiao").position().left;
			renY = $("#gamemain #map #tianyong #zhujiao").position().top;
			juliX = e.clientX - $("#gamemain #map #tianyong #zhujiao").position().left;
			juliY = e.clientY - $("#gamemain #map #tianyong #zhujiao").position().top;
		},
		'moveRen' : function() {
			if (isOver == true) {
				renId = setInterval(this.renWalk, 100);
				isOver = false;
			}
		},
		'moveMap' : function() {
			mapId = setInterval(this.mapDeal, 100);
		},
		'renWalk' : function() {
			
			changeJuliX = $("#gamemain #map #tianyong #zhujiao").css("background-position-x");
			changeJuliY = $("#gamemain #map #tianyong #zhujiao").css("background-position-y");
			//alert(changeJuliX+":"+changeJuliY);
			//此次l預設為0;
			/* $("#gamemain #map #tianyong #zhujiao").css("background-position",
					-(35 + this.k * 70 + 60 * this.k) + "px " + -(15 + this.l * 100 + this.l * 35) + "px"); */
			$("#gamemain #map #tianyong #zhujiao").animate({
				"background-positionX" : -(35 + this.k * 70 + 60 * this.k)}, 100);
			$("#gamemain #map #tianyong #zhujiao").animate({
				"background-positionY" : -(15 + this.l * 100 + this.l * 35)}, 100);
			this.k++;
			if (k == 4) {
				k = 0;
			}
		},
		'mapDeal' : function() {
			if (juliX > 0) {

			} else {
				mapXSpeed = -mapXSpeed;
			}
			if (juliY > 0) {

			} else {
				mapYSpeed = -mapYSpeed;
			}
			//alert(juliX+":"+juliY);
			if (Math.abs(juliX) <= Math.abs(mapXSpeed)){
				continueXAdd = false;
			}
			if(Math.abs(juliY) <= Math.abs(mapYSpeed)) {
				continueYAdd = false;
			}
			if (Math.abs(juliX) <= Math.abs(mapXSpeed) && Math.abs(juliY) <= Math.abs(mapYSpeed)) {
				//alert("clear");
				clearInterval(renId);
				clearInterval(mapId);
				isOver = true;
			}

			changeJuliX = $("#gamemain #map #tianyong").css("background-position-x");
			changeJuliY = $("#gamemain #map #tianyong").css("background-position-y");
			$("#gamemain #map #tianyong").animate({
				"background-positionX" : -mapXSpeed * this.mapXloop
			}, 100);
			$("#gamemain #map #tianyong").animate({
				"background-positionY" : -mapYSpeed * this.mapYloop
			}, 100);
			if(continueXAdd){
				juliX = juliX-mapXSpeed ;
				mapXloop++;
			}
			if(continueYAdd){
				juliY = juliY-mapYSpeed;
				mapYloop++;
			}
		}
	}

	function testFuhao() {
		test.testZF();
	}

	var test = {
		'fh' : '-',
		'testZF' : function() {
			this.fh = '-';
			//+- test
			alert(5 + 3);
			alert(5 + this.fh + 3);
		},

	}
</script>
<style type="text/css">

#position {
	width: 300px;
	heigth: 200px;
}

#gamemain {
	width: 640px;
	height: 480px;
	position: absolute;
}

#gamemain #bg1 {
	width: 640px;
	height: 480px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/real/bg/bg1.jpg);
}

#gamemain #map {
	position: absolute;
}

#gamemain #map #tianyong {
	width: 640px;
	height: 480px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/real/bg/大唐官府.jpg);
	display: none;
	position: absolute;
	background-repeat: no-repeat;
	background-position: -0px -0px;
}

#gamemain #map #tianyong #zhujiao {
	position: relative;
	width: 70px;
	height: 100px;
	background-image: url(<%=request.getContextPath()%>/img/game/askway/c.png);
	background-repeat: no-repeat;
	background-position: -35px -15px;
	display: none;
}
</style>
</head>
<body>

	<input type="button" value="測試+-號" onclick="testFuhao()">

	<div id="gamemain">
		<div id="bg1"></div>
		<div id="map">
			<div id="tianyong">
				<div id="zhujiao"></div>
			</div>
		</div>
	</div>

</body>
</html>






相關文章