开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js写的简单小游戏代码

以下是一个使用 JavaScript 编写的简单小游戏的示例代码，这是一个猜数字的游戏：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>猜数字游戏</title>
</head>

<body>
  <h1>猜数字游戏</h1>
  <p>范围在 1 到 100 之间</p>
  <input type="number" id="guessInput">
  <button onclick="checkGuess()">猜猜看</button>
  <p id="result"></p>

  <script>
    const secretNumber = Math.floor(Math.random() * 100) + 1;
    let attempts = 0;

    function checkGuess() {
      const guess = parseInt(document.getElementById('guessInput').value);
      attempts++;
      if (isNaN(guess)) {
        document.getElementById('result').textContent = '请输入有效的数字';
        return;
      }
      if (guess === secretNumber) {
        document.getElementById('result').textContent = `恭喜你！你在 ${attempts} 次尝试后猜对了数字 ${secretNumber}`;
      } else if (guess < secretNumber) {
        document.getElementById('result').textContent = '太低了，再试一次';
      } else {
        document.getElementById('result').textContent = '太高了，再试一次';
      }
    }
  </script>
</body>

</html>

基础概念：

这是一个基于 HTML、CSS 和 JavaScript 的前端小游戏。
使用 Math.random() 生成一个随机数作为要猜的数字。
通过用户输入和点击按钮来触发猜测逻辑。

优势：

简单易懂，适合初学者学习和理解基本的 JavaScript 编程概念，如变量、函数、条件判断等。
可以快速运行在浏览器中，具有良好的交互性。

类型：

这属于简单的单人互动游戏。

应用场景：

可用于学习编程的教学场景。
作为个人娱乐或小型聚会中的趣味活动。

常见问题及解决方法：

如果页面显示不正常，可能是 HTML 结构或 CSS 样式有问题，检查标签是否正确闭合，样式是否冲突。
如果猜测逻辑出现错误，比如始终无法判断正确与否，检查 JavaScript 中的条件判断语句是否准确，以及输入值是否正确获取和处理。

希望这个示例对你有帮助！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js写2048游戏代码

2 2--> js.../jquery-1.8.3.js" type="text/javascript" charset="utf-8"> js/2048.js" type="text...（从右到左） var jj = j.toString();//转化为字符串 var jj_next = (j+1).toString();//当前块的右边的那一块所在列...($text); //当前移动块的值在数组的下标 $now.offset({"left":$now_left+100 }).text(_this.arr[$index...//当前移动块的值在数组的下标 $now.offset({"top":$now_top+100 }).text(_this.arr[$index+1])

23.5K3 1

【益智游戏】开锁小游戏+ChatGPT写html代码

跟军哥吃饭聊天，说到一些个有意思的思维题目，说是小学五年级的题目，我竟然想了好久，问的GPT才恍然大悟！哈哈，记录下，顺便给小孩讲讲 + 在网页上玩一玩！...游戏规则：密码锁有3位，每位只能是0或者1，现在锁坏掉了，你只要猜对密码的任意两位数字，就可以打开这把锁。请你尽可能用最少的次数打开它！...下面我们用 chatgpt 来生成一个网页版的小游戏然后粘贴到一个txt文档里，再简单修改下+改下后缀名为 html就可以了。直接贴出html代码的次数打开它！...\n原密码是: " + password + "\n您猜的是: " + guess + "\n共猜了" + counter + " 次。")

3362 0

【js】如何正确的写代码注释？

/* 时间戳日期格式化函数 */ function formTime(time,isyear){ } 简单的变量声明之类的内容可以进行简单注释，但是函数就不能这样做了，要知道注释的作用是一种为了让代码更易读...、易维护、易理解，起到提示的作用的，上面的两个注释都是正确的，但是它起到的作用太低了，在正式工作中我们往往会协同开发，这种注释是万万不可的。...，内容详细了很多，当然，不只是单单的内容多了，如果只是内容多了那么/* */段落注释同样也可以写，那么它还有什么优点呢？...普通注释文档注释这种提示就像嵌代码在里面一样，而不是浮于表面了，在我们书写npm包的时候，用户使用我们的包，就能看到这种提示，对使用者特别友好。...npm install jsdoc -g 基本使用 jsdoc 文件名其他的使用方式可以去官网查看 jsdoc 33.js 执行完此命令，会生成一个out文件夹，查看里面的index页面即可，右边侧边栏会显示函数的使用

2092 0

这样写的 JS 代码看着就很舒服

如何提高代码的可读性、复用性、扩展性。...严格遵守这条规则会让你的代码可读性更好，也更容易重构。如果违反这个规则，那么代码会很难被测试或者重用。...，合并相似函数很多时候虽然是同一个功能，但由于一两个不同点，让你不得不写两个几乎相同的函数。...这里没有实例代码，删除就对了三、类使用 ES6 的 class 在 ES6 之前，没有类的语法，只能用构造函数的方式模拟类，可读性非常差。...它让你的代码简洁优雅。

2.3K3 0

简单的扫雷小游戏

^前言：谈起扫雷小游戏大家想必都不陌生吧，或许是在以前的老电脑上自带的游戏中玩过；那么，我们今天便言归正传，用c语言来简单创造个简单版的扫雷小游戏吧！...下面整体对我们的设计分析：我将会在game.h内存放一些库函数头文件什么的，最后将会在另两个源文件中引用，大大减少了这种代码的创造量（#include"game.h"）。...if (board[x][y] == '0') { board[x][y] = '1'; lei--; } } } 6 下面介绍玩家如何扫雷：我们要想玩家肯定要先输入坐标，然后我们写的这个代码要判断它的合法性即不能越界...让我们的扫雷小游戏充满更大的趣味来吸引玩家兴趣等。...四·总结：我认为：无论我们用代码写什么，还是完成一项任务什么的，我们首先要思路清晰，分布将每一次该做什么想的清楚，再者就是每一步要发生什么，如何去解决等等都要考虑全面，接着便是动手一步一步去实践，每走一步就要检测自己是否出现了错误等

530 0

用js写简单选项卡

大家好，又见面了，我是你们的朋友全栈君。如图，最简单的纯粹的选项卡第一步，当然是先写html代码和css样式内容3 内容4 第二步，实现简单的切换效果...要点2：循环，先循环给li加上onclick事件，再onlink事件点击的时候，再循环让所有选项卡的act样式去掉，所有的内容隐藏。然后让所点击的选项及对应内容显示。...要点：tab_t_li[i][evt] 因为传值的时候是字符串，如果直接写的话就是tab_t_li[i].”onclick”这样话是执行不了的，tab_t_li[“onclick”]这样执行没问题。...，可以看下一篇用js写简单选项卡加自动切换效果发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/155183.html原文链接：https://javaforall.cn

5.7K2 0

用es6快乐的写js代码

ES6 提供的许多新特性。...用这些新特性，我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~ 箭头函数将数组的内容 * 2 以前我们这么写 [1, 2, 3].map(function(each){...){ name = name || 'Jack'; } 用 ES6 只需这样写 var introSomeBody = (name = 'Jack') => { } 不定参数数字求和以前我们这么写...return nums.reduce((prev, curr)=>{ return prev + curr; }, 0); } 解构(Destructuring)赋值交换两个变量的值...以前我们这么写 var temp = a; a = b; b = a; 用 ES6 只需这样写 [a, b] = [b, a] 参数赋值以前我们这么写 var introSomeBody = fuction

6.2K0 0

Python写的几个有趣的小游戏

经典冒泡排序算法： 1.冒泡排序：小的排前面，大的排后面。...2.排序:最终使得数组中的这几个数字按照从小到大的顺序排序。 3.冒泡排序的概念，关系到下来怎么写程序。(重要概念）相邻的两个元素，依次比较。...3.售价分别是3.5 4 2 4.5 写一个函数用来表示贩卖机的功能：4.用户投钱和选择饮料，并通过判断之后，给用户吐出饮料和找零。...选择饮料：字典投钱：1 5 10 判断金额的面值判断，钱不够，钱多了的情况，钱刚好的情况 drinks={"1":3.5,"2":4,"3":2,"4":4.5} #用户选择饮料： total=0#...") ''' 输出结果如下：请选择你要购买的饮料：1：橙汁 2：椰汁 3：矿泉水 4：早餐奶 q:退出1 请选择你要购买的饮料：1：橙汁 2：椰汁 3：矿泉水 4：早餐奶 q:退出2 请选择你要购买的饮料

7742 0

用python写一个简单的表白代码

大家好，又见面了，我是你们的朋友全栈君。

6503 0

几行js代码就可以实现拳皇小游戏

前言今天，我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说，我们赶紧来看下如何实现吧！效果（非静止八神）分别按W、S、A、D键可实现位置移动，并且效果真实。...源码 html与css很简单，主要是js中有几点需要注意的。 <!...var fu=set(play,key); if(fu){ fu(); } } 源码地址源码如下，大家可以按照这个思路丰富下效果，实现一个完整的拳皇游戏...https://github.com/maomincoding/game_kz.git 结语谢谢阅读，希望没有浪费您的时间。这篇文章篇幅较短，主要是给大家实现一个小效果。

9284 0

几行js代码就可以实现拳皇小游戏

前言今天，我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说，我们赶紧来看下如何实现吧！效果（非静止八神）分别按W、S、A、D键实现不同的效果。...源码 html与css很简单，主要是js中有几点需要需要注意的。 <!

8483 0

分享 21 个简单实用的 JS 代码技巧

删除 cookie 删除cookie的想法是什么？其实只要把它的过期时间设置到这个时刻，它就会立即过期。...如何打乱数组的原始顺序？...第一种格式化货币的方法格式化钱的方式有很多种，比如这两种方式。...所以我们需要找到一种更简单的方法来格式化货币。...// '123,456,789' formatMoney(123456789.123) // '123,456,789.123' formatMoney(123) // '123' 太喜欢这种方式了，简单易懂

2456 0

用java写一个简单的区块链代码

区块链技术已经发展了十几年，现在的区块链技术已经比较成熟。...下面是一个用java做的比较简单的区块链代码， import java.util.ArrayList; import java.util.Date; import java.util.List; import...tokenData); } public static void addTokenToBlockchain(String tokenData) { // 获取最后一个区块的哈希值作为前一个区块的哈希值...; } } 这个简单的区块链代码包含了一个区块类（Block）和一个字符串工具类（StringUtil），用于计算区块的哈希值。

5101 0

中文写代码？开始不信后来用中文写了剧情小游戏！嗯，真香~

用中文写了剧情小游戏前言一，安装汉化Unity 1.1 Hub安装： 1.2 安装语言包： 1.3 设置中文：二，制作游戏前的准备 2.1 创建脚本： 2.2 搭建场景：三，使用中文编辑脚本 3.1...官方也说了会在后续的版本持续进行翻译，并且使得翻译过来的词汇更符合我们的认知，争取做到见字知意。...首选项)→→ Language (首选项窗口中)→→ Chinese (中文) 设置后，如没有中文效果，重启 Unity 即可，就这么简单！！！...文本 = UnityEngine.UI.Text; // 定义 public 文本内容文本; 3.2 游戏逻辑：可以看到下面脚本，除了关键字和官方提供的API，需要我们自己写的地方几乎用的全都是中文了...你小心的走进密道，害怕有什么恐怖的东西突然袭击。密道里有两间屋子:" + "\nA.左边的门半掩着，门缝里传出花的香味。"

5472 0

java代码运行简单js方法案例

大家好，又见面了，我是你们的朋友全栈君。...{ public static void main(String[] args) { //引入js ScriptEngine engine= new ScriptEngineManager...().getEngineByName("js"); //这里我们做的实验是把下面的dog对象方到js中，并运行js方法 //这里我们把对象放到map中， Map(); Dogs dog=new Dogs(); map.put("dog", dog); System.out.println(dog.name); //把对象放到js...func(){return new Date("\2019/05/9\") >new Date().setMonth(new Date().getMonth()-2);}") //返回某个日期减去2年得到的日期

2.4K2 0

shell 写一个简单的 git 提交代码脚本

背景工作中，默认提测分支叫 staging，每次提测，都需要将开发分支合并到 staging 提测分支，并 push，才算提测，当修复一些 bug 之后，免不了反复执行同一套 git 命令，于是写一个简单的...注意本脚本仅适用于开发分支合并到提测分支（目标分支），并 push，没有做过多的判断和条件限制，如个人有需要，可扩展为适用于自己的脚本。 #!...从当前分支或开发分支提交代码，push， # 2. 切到提测分支或指定要合入的分支 # 3. 合并 master 分支 # 4. 合并该开发分支 # 5....# -t 传入要合入的目标分支，不传默认合并到提测分支 staging # -f 传入提测文件，不传全部修改都提交 # 合并如果有冲突，脚本会自动停止执行，需要手动解决冲突后，提交代码，切换到开发分支...fi # 如果传入 commit message，则传入 message if [ ${message} ]; then git commit -m ${message} else # 否则写默认

8602 0

需求很简单，但代码写的很复杂，这是为啥呢？

勤劳一些的同学应该会经常的去看其它人的代码，经常会发现明明很简单的需求，但代码的具体实现却写的很复杂，这是为啥呢？面对这种问题，我一般会回复说，“为了应付各种不同的情况”。...但是实际工作中，许多情况确实不是人的意志为转移。例如代码的烂掉，刚开始的时候，我或是你或是其它的人，会把代码的结构设计的尽量的ok，可扩展，可修改，让它尽量的可以面对或满足各种不同的工作场景。...但随着时间的推移，我们没有办法去预测需求。所以事实上我们并不知道，这个代码在未来的时候会处于什么样的工作场景。而需求的产生，是因为用户的需求，大家都知道，在现如今的互联网时代，用户是很没有耐心的。...而是以快速的满足用户需求，完成工作任务为目的。各种代码就像在墙上打的补丁一样，一块一块的慢慢加上去了。时间一长了，再一看这个代码，就会发现这代码怎么这么乱，这么复杂。...更为要命的是前任的代码，前任的代码，本身就已经是打满了各种补丁。而且里面逻辑都是各种交织，在这种情况下，你所能做的，也只是打上一个新的补丁。

6855 0

自己写一个简单的MyBatis工具类代码+注释

代码 package gua; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession;...:59 */ public class MyBatisUtils { private static SqlSessionFactory sqlSessionFactory; //静态代码块...，在方法调用之前调用,而且只调用一次 static { System.out.println("在静态代码块中ongoing给sqlSessionFactory做初始化");

4141 0

写日报的代码

requ_html(url) html2=requ_html("http://www.drinks888.com/news/53/2.html") url=url.split('/news') # 第一页的三条数据...) for i in range(0,3): datas.append(url[0]+urls[i]) datas.append(title[i].strip()) # 第二页的两条...Administrator\Desktop\唐富\唐富\5月工作表\各类长尾词统计.xlsx') print('链接已写入各类关键词表中') return datas 网站999文章更新的函数...Safari/537.36' } res=requests.get(url,headers=headers) html=res.text url_list=re.search('js-initialData...urllib.request.Request(urls) cont= urllib.request.urlopen(urls).read() with open('baidu.txt',"wb") as f: # 写文件用

1.7K3 0

如何写一个简单的node.js c++扩展

如何写一个简单的node.js c++扩展 node 是由 c++ 编写的，核心的 node 模块也都是由 c++ 代码来实现，所以同样 node 也开放了让使用者编写 c++ 扩展来实现一些操作的窗口...为什么要写 c++ 扩展可以简单理解为，如果想基于 node 写一些代码，做一些事情，那么有这么几种选择：写一段 JS 代码，然后 require 执行写一段 c++ 代码，编译后 require...执行打开 node 源码，把你想要的代码写进去，然后重新编译日常的开发其实只用第一项就够了，我们用自己熟悉的语言，写一段熟悉的代码，然后发布在 NPM 之类的平台上，其他有相同需求的人就可以下载我们上传的包...但有的时候可能纯粹写 JS 满足不了我们的需求，也许是工期赶不上，也许是执行效率不让人满意，也有可能是语言限制。...简单总结一下，写 c++ 的扩展大概有这么几个好处：可以复用 node 的模块管理机制有比 JS 更高效的执行效率有更多的 c++ 版本的轮子可以拿来用怎么去写一个简单的扩展 node 从问世到现在已经走过了

2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭