数字闯关游戏HTML代码

左手的ㄟ右手 2024-03-02 10:36 39阅读 0赞

代码如下

--------------------

<!DOCTYPE html>  
<html>  
<head>  
<title>算数闯关游戏</title>  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<style>  
body \{  
  
\}  
.container \{  
text-align: center;  
margin-top: 100px;  
\}  
.btn \{  
background-color: green;  
color: white;  
padding: 10px 20px;  
font-size: 18px;  
border: none;  
cursor: pointer;  
\}  
</style>  
</head>  
<body>  
<div class="container">  
<h2>计算题APP</h2>  
<p>请回答以下题目：</p>  
<p id="question"></p>  
<input type="number" id="answer" placeholder="请输入答案">  
<button class="btn" οnclick="checkAnswer()">提交答案</button>  
<p id="score">得分: 0</p>  
</div>

<script>  
var score = 0;

function generateQuestion() \{  
var num1 = Math.floor(Math.random() \* 100);  
var num2 = Math.floor(Math.random() \* 100);  
var operator = Math.floor(Math.random() \* 4);  
var questionString = "";

switch (operator) \{  
case 0:  
questionString = num1 + " + " + num2;  
break;  
case 1:  
questionString = num1 + " - " + num2;  
break;  
case 2:  
questionString = num1 + " \* " + num2;  
break;  
case 3:  
questionString = num1 + " / " + num2;  
break;  
\}

document.getElementById("question").innerHTML = questionString;  
\}

function checkAnswer() \{  
var userAnswer = parseInt(document.getElementById("answer").value);  
var question = document.getElementById("question").innerHTML;  
var correctAnswer = eval(question);

if (userAnswer === correctAnswer) \{  
score += 1;  
\} else \{  
score -= 2;  
\}

document.getElementById("score").innerHTML = "得分: " + score;  
document.getElementById("answer").value = "";

generateQuestion();  
\}

generateQuestion();  
</script>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关数字闯关游戏HTML代码

代码如下 -------------------- <!DOCTYPE html> <html> <head> <title>算数闯关游戏</title>

左手的ㄟ右手/ 2024年03月02日 10:36/ 0 赞/ 40 阅读

相关 Java字母游戏：如何用Java编写一个字母闯关游戏

随着互联网的发展，各种游戏层出不穷，其中字母游戏备受欢迎。这种游戏不仅可以锻炼玩家的英语能力，还能培养玩家的反应能力。本文将介绍如何使用Java编写一个字母闯关游戏。 Jav

我就是我/ 2023年10月13日 19:09/ 0 赞/ 63 阅读

相关数据结构闯关

数据结构闯关文章目录数据结构闯关一、此系列博客序章二、拙见三、关卡第一关：干掉链表这

心已赠人/ 2023年02月10日 07:46/ 0 赞/ 141 阅读

相关 pythonchallenge闯关游戏_pythonchallenge解题报告

由图中的映射关系，K->M，O->P，E->G，可以看出它是将字母表中的每个字母顺次往后平移两次。对下方的一串文字进行此操作即可。 import string hints

- 日理万妓/ 2022年10月27日 13:47/ 0 赞/ 18 阅读

相关 Python3 黑板客爬虫闯关第一关

coding=utf-8 import re import requests from requests.exceptions import R

迷南。/ 2022年05月08日 12:42/ 0 赞/ 167 阅读

相关黑板客闯关的第四关

挑战地址:http://www.heibanke.com/lesson/crawler\_ex03/ 挑战难度:★★★★☆☆☆☆☆☆ 题目介绍： ![在这里插入图片

朱雀/ 2022年01月22日 15:45/ 0 赞/ 177 阅读

相关黑板客闯关的第三关

挑战地址:[http://www.heibanke.com/lesson/crawler\_ex02/][http_www.heibanke.com_lesson_crawle

r囧r小猫/ 2022年01月22日 13:05/ 0 赞/ 168 阅读

相关黑板课闯关的第二关

挑战地址:[http://www.heibanke.com/lesson/crawler\_ex01/][http_www.heibanke.com_lesson_crawle

落日映苍穹つ/ 2022年01月22日 12:51/ 0 赞/ 230 阅读

相关黑板客闯关的第一关

挑战地址:[http://www.heibanke.com/lesson/crawler\_ex00/][http_www.heibanke.com_lesson_crawle

深藏阁楼爱情的钟/ 2022年01月22日 12:23/ 0 赞/ 198 阅读

相关《报任安书》文言文化常识闯关游戏·网络版

《报任安书》文言文化常识闯关游戏从这个链接进入：[《报任安书》文言文化常识闯关游戏][Link 1] 试试iframe跨域访问直接嵌入还是不行：转载于:htt

落日映苍穹つ/ 2021年11月23日 06:22/ 0 赞/ 179 阅读