JS实现点星星消除小游戏

最新推荐文章于 2022-09-21 16:45:45 发布

张贺_

最新推荐文章于 2022-09-21 16:45:45 发布

阅读量2.3k

点赞数 2

分类专栏：学习笔记 js基础部分文章标签： javascript js实现游戏

本文链接：https://blog.csdn.net/weixin_41849462/article/details/80614293

版权

学习笔记同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

js基础部分

18 篇文章 3 订阅

订阅专栏

步骤及游戏功能分析：

1.网页上的随机出现小星星；
2.点击小星星，小星星消失；
    绑定一个onclick事件：
    对象.事件 = 事件处理函数；
    注意：要想删除某个节点，必须找到它的父节点
    注意：在绑定事件中this可以直接使用
3.添加功能开始游戏
4.添加功能暂停游戏

5.游戏进度条功能

<style type="text/css">
	#d2{
		width: 100px;
		height: 20px;
		border: 1px solid red;
		display: inline-block;
	}
	#d3{
		display: inline-block;
		background: yellow;
		height: 20px;
	}
</style>
<script type="text/javascript">
	//window.onload = init;
	
	var countstar = 0;//控制星星个数变量
	var timerStar;//生成星星定时器
	var timerGameTime
	var t = 0;//记录时间变量
	//开始游戏的函数
	function startGame(){
		window.clearInterval(timerStar);
		window.clearInterval(timerGameTime);
		timerStar = window.setInterval("star()",500);
		timerGameTime = window.setInterval("time()",1000);	//记录游戏时间
	}

	//创建星星的函数
	function star(){
		var obj = document.createElement("img");
		obj.src = "images/star.png";
		obj.width = Math.floor(Math.random()*60+20);
		obj.style.position = "absolute";
		obj.style.left = Math.floor(Math.random()*1700+100)+"px";
		obj.style.top = Math.floor(Math.random()*500+30)+"px";
		document.body.appendChild(obj);
		countstar++;
		var sp = document.getElementById("d3");
		sp.style.width = countstar*10+"px";

		if (countstar > 10) {
			alert("游戏结束");
			window.clearInterval(timerStar);
			location.reload();
		}
		obj.onclick = removeStar;
	}

	//点击删除星星的函数
	function removeStar(){
		this.parentNode.removeChild(this);
		countstar --;
		var sp = document.getElementById("d3");
		sp.style.width = countstar*10+"px";
	}

	//点击暂停游戏的函数
	function pauseGame(){
		alert("游戏已暂停，点击确定继续游戏。");
	}
	
	//记录游戏时间的函数
	function time(){
		t++
		var obj = document.getElementById("d1");
		obj.innerHTML= "游戏进行了"+t+"秒";
	}
</script>

<body>
    <input type="button" value="开始游戏" οnclick="startGame()" name="">
    <input type="button" value="暂停游戏" οnclick="pauseGame()" name="">
    <span id="d1">游戏进行了0秒</span>
    <span id="d2"><span id="d3"></span></span>
</body>

游戏效果：

张贺_

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
JS实现点星星消除小游戏

步骤及游戏功能分析：1.网页上的随机出现小星星；2.点击小星星，小星星消失；绑定一个onclick事件：对象.事件 = 事件处理函数；注意：要想删除某个节点，必须找到它的父节点注意：在绑定事件中this可以直接使用3.添加功能开始游戏4.添加功能暂停游戏5.游戏进度条功能&lt;style type="text/css"&gt; #d2{ width: 100...
复制链接

扫一扫

专栏目录