[游戏开发]jQuery——赛车小游戏

效果分析:

效果展示:

html代码如下:

css代码:

* {
	margin: 0;
	padding: 0;
}

/*父容器*/
.car_box {
	width: 50%;
	height: 100%;
	background: whitesmoke;
	position: absolute;
	left: 25%;
	border-left: 5px solid white;
	border-right: 5px solid white;
	box-shadow: 0px 0px 10px black;
}


/*赛道*/
img {
	width: 100%;
	height: 200%;
	background: dimgrey;
	/*弹性布局*/
	display: -webkit-box;
	animation: track_play 4s linear infinite;
	position: absolute;
}

@keyframes track_play {
	from {
		top: -100%;
	}

	to {
		top: 0;
	}
}

.track li {
	list-style: none;
	-webkit-box-flex: 1;
	border-right: 5px dashed white;
}

.track li:nth-child(5) {
	border: none;
}

#car {
	width: 20%;
	height: 25%;
	background: url(../img/1.png) no-repeat center;
	background-size: 50%;
	position: absolute;
	left: 30%;
	bottom: 20%;
}


.dicar {
	width: 20%;
	height: 25%;
	background: url(img/3.png) no-repeat center;
	background-size: 50%;
	position: absolute;
}


h1 {
	position: absolute;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	border-radius: 20px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
	color: #e73f00;
	color: red;
	display: none;
}

#restart {
	top: -250px;
	height: 60px;
	line-height: 60px;
	color: white;
	background: white;
	text-shadow: none;
	box-shadow: -1px -1px 3px #ffb69a, 1px 1px 3px #922e09, -1px -1px #ffb69a, 1px 1px #922e09;
	color: #e73f00;
}

#circuit {
	top: -250px;
	height: 60px;
	line-height: 60px;
	color: white;
	background: white;
	text-shadow: none;
	box-shadow: -1px -1px 3px #ffb69a, 1px 1px 3px #922e09, -1px -1px #ffb69a, 1px 1px #922e09;
	color: #e73f00;
}

#third {
	top: -250px;
	height: 60px;
	line-height: 60px;
	color: white;
	background: white;
	text-shadow: none;
	box-shadow: -1px -1px 3px #ffb69a, 1px 1px 3px #922e09, -1px -1px #ffb69a, 1px 1px #922e09;
	color: #e73f00;
}

js代码:

alert("使用左右方向键或者A,D字母控制小车左右移动\n\n点击确定按钮开始游戏");

window.onload = function() {

	//初始值
	var score = 0;
	var timer = null; //生产汽车计时器对象
	var car = document.querySelector("#car");

	//定义
	$(function() {

		//jq代码或调方法
		//车子移动方法
		carMove();
		addDicar();
	})


	// 车子移动方法
	//var code = 1; //赛道编号：0 1 2 3 4
	//code*20+2：2 22 42 62 82

	//var left =car.offsetLeft;
	// 车子移动方法
	function carMove() {
		//键盘事件监听
		document.onkeydown = function(event) {
			//判断键盘来控制车子移动
			//37代表左键
			if (event.keyCode == 37) {
				/*code--;
				if(code<0){
					code=0;					
				}*/
				var left = parseFloat($("#car").css("left"));
				$("#car").css("left", (left - 50) + "px")
			}
			//38代表上面的按键
			/*if (event.keyCode == 38) {
				var top = parseFloat($("#car").css("top"));
				$("#car").css("top", (top - 25) + "px")
			}*/
			//39代表右键
			if (event.keyCode == 39) {
				/*code++;
				if(code>4){
					code=4;				
				}*/
				var left = parseFloat($("#car").css("left"));
				$("#car").css("left", (left + 50) + "px")
			}
			//40代表下面的按键
			/*if (event.keyCode == 40) {
				var top = parseFloat($("#car").css("top"));
				$("#car").css("top", (top + 25) + "px")
			}*/

			//键盘A事件
			if (event.keyCode == 65) {

				var left = parseFloat($("#car").css("left"));
				$("#car").css("left", (left - 50) + "px")

			}

			//键盘D事件
			if (event.keyCode == 68) { 
				var left = parseFloat($("#car").css("left"));
				$("#car").css("left", (left + 50) + "px")

			}

			console.log(event.keyCode);

			//jq动画 对象animate({"属性":"属性值"},时间,其它操作)
			$("#car").animate({
				"left": code * 20 + 2 + "%"
			}, 300)
		}
	}

	//通过生产敌方汽车的方法
	function item_car() {
		//新增div节点
		var item = document.createElement("div");
		var top = $(".car_box").css("top");
		var left = $(".car_box").css("left");
		//把节点添加到父容器里
		$(".car_box").append(item);
		item.className = "dicar";
		//随机汽车
		var rand_img = Math.floor(Math.random() * 7 + 2);
		//设定
		item.style.backgroundImage = "url(img/" + rand_img + ".png)";
		//随机赛道
		var rand_code = Math.floor(Math.random() * 4);
		//jq更改css的方式来让赛道随机
		$(item).css("left", rand_code * 26 + 2 + "%");
		//随机速度
		var ran_speed = Math.floor(Math.random() * 5000 + 1000);

		//汽车运动的动画
		$(item).animate({
			"top": "100%"
		}, ran_speed, function() {
			//清除汽车
			$(this).remove()
			//得分
			score++;
		})
		//碰撞检测方法
		car_ko(item);
	}


	//生产多辆赛车
	function addDicar() {
		timer = setInterval(function() {
			item_car()
		}, 1500)
	}

	//碰撞检测方法
	function car_ko(item) {
		//添加定时器进行20毫秒检测一次
		setInterval(function() {
			//拿到我方汽车top height
			var car_top = car.offsetTop;
			var car_height = car.offsetHeight;
			//拿到我方汽车的left width
			var car_left = car.offsetLeft;
			var car_width = car.offsetWidth;
			//拿到敌方汽车的top left
			var item_top = item.offsetTop;
			var item_left = item.offsetLeft;
			//拿到敌方汽车的left width
			var item_height = item.offsetHeight;
			var item_width = item.offsetWidth;
			if (Math.abs(car_top - item_top) * 2 < car_height &&
				Math.abs(car_left - item_left) * 2 < car_width) {
				alert("GAME OVER!");
				//调用游戏结束的方法
				gameOver();
			}
		}, 20)
	}


	//游戏结束的方法
	function gameOver() {
		//更新分数
		$("#score").html("得分:" + score + "分");
		//分数面板重新开始按钮面板显示出来
		$("#restart").fadeIn(500);
		$("#score").fadeIn(500);
		//敌方汽车停止生产
		clearInterval(timer);
		//我方汽车飞出
		$("#car").animate({
			"top": "100%"
		}, 200)
		restart();
	}


	//重新开始按钮
	function restart() {
		//重新开始按钮被触发
		$("#restart").click(function() {
			//淡出
			$("#restart").fadeOut(500);
			$("#score").fadeOut(500);
			//重新加载页面
			document.location.reload();
		})
		//当按回车的时候触发重新开始
		document.onkeydown = function(event) {
			if (event.keyCode == 13) {
				//淡出
				$("#restart").fadeOut(500);
				$("#score").fadeOut(500);
				//重新加载页面
				document.location.reload();
			}
		}
	}
}

总结：

功能还不是很齐全，有兴趣的可以进一步改进^_^
?