从零开始飞机大战（一）

敢跟头像对视三秒吗？

于 2021-08-22 10:17:50 发布

阅读量118

点赞数

分类专栏： java script

本文链接：https://blog.csdn.net/weixin_45769564/article/details/119849068

版权

java script 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网站结构

html css 与js的结合应用必要的准备工作
我们需要使用到jquery开源的核心库，所以要去相关网站下载好，然后新建js文件，将jq应用到新建的文件中
建立css文件
建立js文件针对游戏的核心控制文件
最开始我想的是想让背景动起来，这里可能涉及到两个要点：
1通过时钟控件
2设置便令改变变量来看你告知背景图片的值
基本结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>飞机大战</title>
		<link rel="stylesheet" type="text/css" href="css/commen.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="stage">
			<div class="bg1"></div>
		</div>
	</body>
</html>

背景运动：

$(function(){
	//这里写代码的时候是可以控制所有html代码的
	//dom
	var stage=document.getElementById("stage"); //获取舞台节点
	var bg1=stage.getElementsByClassName("bg1")[0];//获取背景图片
	// console.log(bg1)
	var topval=0;
	
	// bg1.style.cssText="top: -30px;"
	var t1=setInterval(function(){
		// console.log("ddd")
		console.log(bg1.style.cssText)
		// bg1.scrollTop=bg1.scrollTop+10;
		bg1.style.cssText="top: "+topval+"px";
		topval+=1
		
	},70);
	
});