python秒表游戏代码_Javascript实现秒表计时游戏

最新推荐文章于 2023-05-04 21:52:29 发布
最新推荐文章于 2023-05-04 21:52:29 发布
阅读量622 收藏 3
点赞数
文章标签： python秒表游戏代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39851887/article/details/111758648
版权

本文实例为大家分享了javascript实现秒表计时游戏的具体代码，供大家参考，具体内容如下

一、说明

本游戏页面设计分为左右两栏。左上为跑马灯，左下为计时器和”START”按钮；右上为排行榜，右下为游戏规则说明。

跑马灯用的是定时器，循环走一遍。计时器是从”00:00:000”开始计时，需要点击”START”按钮开始游戏，停止游戏是点击空格键。游戏计算的是停止时间时刻和”00:10:000”时刻，也就是和10秒整的时间差。注意如果是在10秒前按下空格键停止，是有惩罚的，惩罚为之前计算的时间差翻倍。最后是按最终时间差从小到大顺序进行排名。

二、效果展示

三、代码

3.1 HTML

计时小游戏

00:

00:

000

START

3.2 CSS

body {

background-image: url("../images/img02.png");

background-size: cover;

}

body>div {

display: flex;

margin: 50px 50px 0px 50px;

}

/* 分栏-左部 */

#left {

height: 550px;

flex: 1;

text-align: center;

background-color: rgba(10, 0, 6, 0.3);

}

/* 跑马灯 */

#marquee {

width: 100%;

height: 300px;

}

#marquee table {

width: 95%;

height: 280px;

margin: 5px 20px 0px 20px;

border-spacing: 20px;

}

#marquee table td {

background-color: rgba(9, 28, 38, 0.8);

border-radius: 5px;

}

/* 计时器：分、秒、毫秒 */

#time {

font-size: 4.5em;

color: #02C4F2;

}

/* "START"按钮 */

#start {

font-size: 3em;

background-color: rgba(10, 0, 6, 0.5);

border-style: solid;

border-color: #344665;

color: #02C4F2;

border-radius: 10px;

cursor: pointer;

}

/* 分栏-右部 */

#right {

flex: 1;

margin-left: 50px;

}

/* 排行榜滚动界面 */

#right .board1 {

height: 350px;

width: 100%;

border: 1px solid #344665;

overflow-y: scroll;

padding: 5px;

background-color: rgba(10, 0, 6, 0.2);

}

/*滚动条整体样式*/

#right>div::-webkit-scrollbar {

background-color: rgba(219, 200, 212, 0.4);

}

/*滚动条里面小方块*/

#right>div::-webkit-scrollbar-thumb {

border-radius: 5px;

background: rgba(155, 24, 24, 0.5);

}

/* 排行榜 */

#leaderboard {

width: 100%;

border-color: #344665;

color: white;

font-size: 1.3em;

text-align: center;

}

#leaderboard th {

width: 18%;

}

/* 游戏规则说明 */

#right .board2 {

height: 165px;

width: 100%;

border: 1px solid #344665;

margin-top: 10px;

padding: 5px;

background-color: rgba(10, 0, 6, 0.2);

color: white;

line-height: 1.5em;

}

.board2>div {

margin: 4px;

}

3.3 Javascript

window.onload = function () {

var count = 0; // 记录开始后当前的毫秒数

var timer; // 定时器返回值，用于停止定时器

var timer_color; // 定时器返回值，用于停止跑马灯

var flag = false; // 增加判断，防止重复点击开始导致有多个定时器同时计数

/* 计时 */

var id_M = document.getElementById("id_M");

var id_S = document.getElementById("id_S");

var id_MS = document.getElementById("id_MS");

/* 跑马灯 */

var td1 = this.document.getElementById("tr1").getElementsByTagName("td");

var td2 = this.document.getElementById("tr2").getElementsByTagName("td");

var td3 = this.document.getElementById("tr3").getElementsByTagName("td");

var td4 = this.document.getElementById("tr4").getElementsByTagName("td");

var color = td1[1].style.backgroundColor; // 存储跑马灯原来的颜色，用于还原

/* 开始按钮 */

var start = this.document.getElementById("start");

start.onclick = function () {

start.blur(); // 移除焦点

if (flag) {

clearInterval(timer); // 处理没按空格键停止就再次点击"START"的情况

}

flag = true;

/* 计时器 */

var ms = new Date().getTime();

timer = setInterval(function () {

count = new Date().getTime() - ms;

id_M.innerText = handleTime1(parseInt(count / 1000 / 60));

id_S.innerText = handleTime1(parseInt(count / 1000 % 60));

id_MS.innerText = handleTime2(count % 1000);

}, 103);

/* 跑马灯 */

clear(0); // 先全部清除

row = 4; // 初始化行

col = 4; // 初始化列

timer_color = setInterval(paomadeng, 200);

}

/* 处理时间(分、秒) */

function handleTime1(num) {

if (num < 10) {

return '0' + num;

}

return num;

}

/* 处理时间(毫秒) */

function handleTime2(num) {

if (num < 10) {

return "00" + num;

} else if (num < 100) {

return '0' + num;

}

return num;

}

/* 跑马灯 */

var row = 4,

col = 4;

function paomadeng() {

if (col == -1) {

clear(col + 1);

col = 4;

}

if (row == 4) {

clear(col + 1);

td4[col].style.backgroundColor = "green";

row--;

} else if (row == 3) {

td3[col].style.backgroundColor = "red";

row--;

} else if (row == 2) {

td2[col].style.backgroundColor = "blue";

row--;

} else if (row == 1) {

td1[col].style.backgroundColor = "#47DE00";

row = 4;

col--;

}

}

/* 清除跑马灯 */

function clear(n) {

for (; n <= 4; n++) {

td1[n].style.backgroundColor = color;

td2[n].style.backgroundColor = color;

td3[n].style.backgroundColor = color;

td4[n].style.backgroundColor = color;

}

}

/* 点击空格键停止 */

this.document.onkeypress = function (ev) {

// 32对应空格

if (ev.keyCode == 32 && flag) {

clearInterval(timer);

clearInterval(timer_color);

flag = false;

// 表格添加行

addRow();

}

}

// 排行榜

var table = this.document.getElementById("leaderboard");

// 玩家最终时间差记录

var players = [];

/* 表格添加行 */

function addRow() {

var rows = table.rows.length;

var insertTr;

var before_time_diff = count - 10 * 1000; // 基础时间差

var after_time_diff; // 最终时间差

if (before_time_diff < 0) {

after_time_diff = Math.abs(before_time_diff) * 2;

} else {

after_time_diff = before_time_diff;

}

// rows==1，说明是第一个玩家；否则遍历全部玩家

if (rows != 1) {

for (var i = 0; i < players.length; i++) {

if (after_time_diff < players[i]) {

console.log(after_time_diff, players[i])

insertTr = table.insertRow(i + 1);

break;

}

}

if (insertTr == null) {

insertTr = table.insertRow(rows);

}

} else {

insertTr = table.insertRow(rows);

}

// 排名

var inserTd = insertTr.insertCell(0);

inserTd.innerText = rows

// 玩家名

var inserTd = insertTr.insertCell(1);

inserTd.innerText = "玩家" + rows

// 时间记录

var inserTd = insertTr.insertCell(2);

inserTd.innerText = id_M.innerText + ":" + id_S.innerText + ":" + id_MS.innerText

// 是否罚时

var inserTd = insertTr.insertCell(3);

if (before_time_diff < 0) {

inserTd.innerText = "是"

} else {

inserTd.innerText = "否"

}

// 最终时间差

var inserTd = insertTr.insertCell(4);

var M = handleTime1(parseInt(after_time_diff / 1000 / 60));

var S = handleTime1(parseInt(parseInt(after_time_diff / 1000 % 60)));

var MS = handleTime2(parseInt(parseInt(after_time_diff % 1000)));

inserTd.innerText = M + ":" + S + ":" + MS

// 将玩家最终时间差信息加入数组players，并排序

players.push(after_time_diff);

players.sort(sortNum); // 注意，sort是对数组中的字符串进行排序，如果是数字需要自定义

// 重置排名

resetRank();

}

/* 数组中数字的排序(从小到大) */

function sortNum(a, b) {

return a - b;

}

/* 重置排名 */

function resetRank() {

var tr = document.getElementById("leaderboard").getElementsByTagName("tr");

for (var i = 1; i < tr.length; i++) {

tr[i].getElementsByTagName("td")[0].innerText = String(i);

}

}

}

更多有趣的经典小游戏实现专题，分享给大家：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

weixin_39851887
关注
PyStopwatch:一个非常简单的 Python 秒表
06-14
秒表 一个用 Python 编写的非常简单的命令行秒表。 用法 可以使用 PyStopwatch 启动 python stopwatch 这将自动启动秒表。 通过按 Enter，您可以将秒表的状态从运行切换到暂停。 秒表启动后的总时间将打印在屏幕上。 使用 Ctrl+C 停止秒表，并打印出总经过时间。 输出将如下所示： Started stopwatch at: 18:04:19 Press Enter to pause... Stopped: 00:00:01:54 seconds passed Press Enter to continue... Running: 00:00:01:54 seconds passed Press Enter to pause...^C Stopped: 00:00:03:17 seconds passed Stopped stopwatch at
python秒表游戏代码_python编程实战：制作秒表程序
weixin_29557457的博客
12-23 783
现如今生活节奏的加快，再加个人们对营养的需求也是在不断加大。我们平时所食用的食物只有在它烹饪到刚刚好的时候才会把它自身的营养充分的发挥出来，可是我们一般对于它的时间方面不是很好把握，所以对于这一点，秒表计时器就帮了我们很大的忙。秒针在生活中一般用作精确计时，作用很大。那你知道用我们万能的python怎么做秒表吗？下面我们来看看吧~代码：#！ python3# stopwatch.py - A si...
python代码示例100行-怎样写贪吃蛇小游戏？用100行python代码轻松解决！
weixin_37988176的博客
10-29 549
大家小时候都玩过贪吃蛇吧？小编小时候可喜欢拿爸妈的手机玩了，厉害着呢！今天，小编就来用100行代码实现一个简易版的贪吃蛇。在网上，贪吃蛇教程蛮多的，但要安装蛮多库的，而且也不够清晰，今天的代码比较短，而且理解起来或者说你更改起来要简单一些。最终会实现效果如下：基本准备首先，我们需要安装pygame库，小编通过pip install pygame，很快就安装好了。在完成贪吃蛇小游戏的时候，我们需要知...
python 学习 ： 一个简单的秒表
dianmi2675的博客
01-07 241
游戏说明：绿色数字（左边表示成功停止在整秒的次数，右边表示停止的总次数） 点击stop，如果小数点后为0，即你停止的时间是整秒数，右上方斜杠左边数字加一 把代码复制到这个网页 code run here,把原来的代码覆盖掉，然后点击左上角的三角 运行就可以了。 import simplegui import random import math time ...
python项目之秒表
憬暕空灵的博客
06-01 4463
秒表 程序说明 本项目我们尝试用Python语言设计一个计算机程序来模拟“秒表”游戏。程序的文件名称为Timer.py，程序将使用到import、def、if/elif、return等Python保留字，也会用到simplegui的create_timer方法，frame的add_button、set_draw_handler等方法，还会使用到变量、数学运算表达式、逻辑条件表达式、字符串运算表达式、自定义函数、代码格式、注释等Python语言的一些特性。 通过该项目你可以获得以下能力： 窥视计算机的工作原理
【JavaScript源代码】JS实现一个秒表计时器.docx
12-29
在JavaScript中，实现一个秒表计时器涉及到定时器（setTimeout和setInterval）以及DOM操作。下面我们将详细探讨这些知识点： 1. **定时器：** - `setInterval` 函数用于每隔一定时间执行一次指定的函数。在这个...
miaobiao.rar_倒计数_倒计时秒表
09-24
"miaobiao.rar_倒计时_倒计时秒表"这个压缩包文件显然是一个专注于倒计时功能的程序或者代码库，可能包含了实现这一功能的源代码或者执行文件。让我们深入探讨一下倒计时秒表的核心知识点。 首先，倒计时秒表的基本...
简单秒表与倒计时代码
11-10
以下是一个简单的JavaScript秒表实现： ```javascript let startTime = null; let elapsedTime = 0; function startStopwatch() { if (!startTime) { startTime = Date.now(); } } function stopStopwatch() {...
paobiao.rar_stopwatch_数字跑表_秒表 暂停_秒表暂停复位
09-19
实现这样的功能，开发者通常会使用编程语言中的时间函数，例如在Python中使用`time`库，在JavaScript中使用`Date`对象，在Java中使用`System.currentTimeMillis()`等。计时器的工作通常通过事件驱动实现，比如监听...
秒表计时代码
05-03
秒表计时器在计算机编程中是一个常见的功能，特别是在游戏开发、性能测试、实时系统监控等领域。本项目名为“秒表计时代码”，显然是一段用于实现秒表功能的程序，可能是一个简单的命令行工具或者一个图形用户界面...
python秒表.py
06-27
这是用python3.7的tkinter time模块做的一个秒表小程序，有开始，停止，归零，退出，显示秒数功能
Python实现秒表
Jason Xu 的博客
07-31 551
说明 按Enter开始，按Ctrl+C停止 [注意：请勿在编辑器中执行本程序] 代码 from time import time as ti from os import system def t(): return(float('%.2f' % ti())) start_time=0 #开始时时间戳 time=[0,0,0] #时间差 [时，分，秒] input('按Enter开始...') start_time=t() try: while True: t
python秒表代码_斌哥教你自制千分秒表（键盘控制）
weixin_31102797的博客
02-06 813
上节课我们绘制了用鼠标控制的千分秒表，还指出了一个隐藏的bug及其解决方案。今天我们来绘制使用键盘控制的千分秒表，请大家比较它与上节课代码的区别。话不多说，上代码。素材准备：不需要任何素材，只需直接引用Python内置模块turtle和time即可。项目目标：利用time.perf_counter()记录程序运行时间，使用海龟绘图画出时间信息，从而实现秒表计时功能：1.绘制秒表显示框...
python秒表游戏_数学游戏Tkinter中的Python计时器
weixin_32655655的博客
02-21 331
匿名用户我想你需要的是这个。from Tkinter import *import timeclass StopWatch(Frame):""" Implements a stop watch frame widget. """def __init__(self, parent=None, **kw):Frame.__init__(self, parent, kw)self._start = 0....
如何使用Python 实现秒表功能？
m0_51713294的博客
12-02 1554
其实python不是我们看到那么复杂，如果打好扎实的基础，我们可以用python做一些好玩的事情，比如实现秒表功能，一起来看下把~ 前言： 本文的重点是在python中使用Tkinter创建秒表。 关于Tkinter: Tkinter是Python的标准GUI库。Python与Tkinter结合使用时，提供了一种创建GUI应用程序的快速而简单的方法。Tkinter为Tk GUI工具包提供了一个强大的面向对象接口。Tkinter很容易入门，下面是一些示例代码，可以让您在python中使用Tkinter。 语法
python秒表游戏代码_在pygam游戏中添加秒表
weixin_30175731的博客
02-04 766
例如，您可以使用pygame.time.get_ticks()来获取自调用pygame.init()以来的毫秒数，然后使用简单除法从该数字中获得秒和分钟等。在下面是一个简单的例子：import pygameimport pygame.freetypedef main():pygame.init()screen=pygame.display.set_mode((400, 300))clock=pyg...
python：实现一个简单的秒表应用程序(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
03-17 294
python：实现一个简单的秒表应用程序(附完整源码)
python TK 实现秒表
人生苦短，何妨一试
05-04 567
在update()方法中，我们检查计时器的状态并更新标签中的时间。我们还使用after()函数在1秒钟后再次调用update()方法，从而实现了计时器的循环更新。在这个示例中，我们首先定义了一个Timer类，并在构造函数中创建了一个窗口和一些标签和按钮。我们还定义了一些变量来跟踪当前时间和计时器的状态。在pause()、stop()和record()方法中，我们分别暂停计时器、停止计时器、重置时间并清除记录列表或添加当前时间。在start()方法中，我们启动计时器并更新按钮的状态。
open3d-0.11.2-cp36-cp36m-win_amd64.whl
最新发布
10-19
open3d-0.11.2-cp36-cp36m-win_amd64.whl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值