2024年最新JavaScript基础——点击星星小游戏_javascript 游戏点击(2)，解析底层原理

2401_84617131

已于 2024-05-07 14:32:47 修改

阅读量270

点赞数 8

分类专栏：程序员文章标签： javascript 游戏开发语言

于 2024-05-07 14:32:45 首次发布

本文链接：https://blog.csdn.net/2401_84617131/article/details/138531251

版权

程序员专栏收录该内容

104 篇文章 0 订阅

订阅专栏

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在这里插入图片描述

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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">
  <!--
    var dingshiqi;   //定时器
	var count=0;   //记录星星的个数
	var n=0;   //记录游戏时间的变量。
	var sj;    //时间定时器（解决一直按开始游戏bug）
	function StarGame(){   //开始游戏
		window.clearInterval(sj); //清除时间定时器
		window.clearInterval(dingshiqi);//清楚定时器
	dingshiqi=window.setInterval("star()",400);
	sj=window.setInterval("shijian()",1000);
	}
	//创建星星
	function star(){
	var obj=document.createElement("img");
	//给星星添加src属性
	obj.src="image.png"
	//随机星星大小
	var w=Math.floor(Math.random()*80+20);
	obj.width=w;
	obj.height=w;
	//随机位置
	var x=Math.floor(Math.random()*1166+100);
	var y=Math.floor(Math.random()*500+100);
	obj.style.position="absolute";
	obj.style.top=y+"px";
	obj.style.left=x+"px";
	//放到body中
	document.body.appendChild(obj);
	//添加onclick点击事件（绑定的onclick 不需要加";"）
	obj.οnclick=removeStar;
	//控制大于20个星星游戏结束
	count++;
	var sp=document.getElementById("d3");
	sp.style.width=count*5+"px";
	if(count>20){
	  alert("大于20个星星游戏结束");
	  window.clearInterval(dingshiqi);
	  location.reload();     //重新加载
	}
	//放到body中


### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/d30b832686bf0b741840985a51de3017.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/b689b2862a53f13c2a516983703b7db2.webp?x-oss-process=image/format,png)

家**

[外链图片转存中...(img-hR6j0gww-1715063549181)]

[外链图片转存中...(img-JDSsLbz6-1715063549182)]