JavaScript之赛车游戏

哄哄9709

于 2022-12-07 23:42:32 发布

阅读量435

点赞数

分类专栏：代码笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55626132/article/details/128229031

版权

代码笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>赛车游戏</title>
	</head>
	<body>
		<!-- <img src="https://t7.baidu.com/it/u=2607436094,546726765&fm=193&f=GIF"  height=100 width=100/> -->
		<h1 id="test">特斯拉右移</h1>
		<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
		<script>
			/* 这是面向对象的方法 */
			var Car=function(x,y){
				this.x=x;
				this.y=y;
			};
			// 创建绘制方法
			Car.prototype.draw=function(){
				var carHtml='<img src="https://t7.baidu.com/it/u=2607436094,546726765&fm=193&f=GIF" height=100 width=100/>';
				this.carElement=$(carHtml);
				
				this.carElement.css({
					position:"absolute",
					left:this.x,
					top:this.y
				})
				
				$("body").append(this.carElement);
			};
			// 创建右移方法
			Car.prototype.moveRight=function(){
				this.x+=100;
				this.carElement.css({
					left:this.x,
					top:this.y
				})
			};
			
			var tesla=new Car(20,65);
			var nissan=new Car(100,180);
			tesla.draw();
			nissan.draw();
			new Car(190,330).draw();
			$("#test").click(function(){
				tesla.moveRight();
			});
			
			
			/* 以下是非面向对象的方法 */
			// var Car=function(x,y){
			// 	this.x=x;
			// 	this.y=y;
			// 	// drawCar(this);
			// }
			
			// var drawCar=function(car){
			// 	var carHtml='<img src="https://t7.baidu.com/it/u=2607436094,546726765&fm=193&f=GIF" height=100 width=100/>';
			// 	var carElement=$(carHtml);
				
			// 	carElement.css({
			// 		position:"absolute",
			// 		left:car.x,
			// 		top:car.y,
			// 	});
				
			// 	$("body").append(carElement);
			// }
			
			// var tesla=new Car(20,20);
			// var nissan=new Car(100,200)
			
			// drawCar(tesla);
			// drawCar(nissan);
			 
		</script>
		
	</body>
</html>