H5+JavaScript 剪刀石头布小游戏完整代码

效果图：（单局游戏中可计数）

刚学JavaScript的时候做的，槽点太多了，就图一乐，别太较真

有精力的朋友可以自行改成jQuery版或者其他精简又高效写法，我比较懒就不改啦

HTML：

<!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"><link rel="shortcut icon" href="https://img.tukuppt.com/png_preview/00/08/92/ITzBK1O4hC.jpg!/fw/780"> <title>石头剪刀布</title><link rel="stylesheet" href="style.css"><script src="javaScript.js"></script>
</head><body><div class="head"><h1>石头</h1><h1>剪刀</h1><h1>布</h1></div><div class="left"><h2>我的</h2><image class="left_show" src="https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg" mode="widthFix"id="choose"></image><div id="stats">胜：0 负：0 平：0</div></div><div class="right"><h2>电脑</h2><image class="right_show" src="https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg" mode="widthFix"id="change"></div><div class="bottom"><div>选择你的选项</div><img class="show" src="https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg" id="paper" /><img class="show" src="https://s3.bmp.ovh/imgs/2022/04/09/7372bc211969aec4.jpg" id="jian" /><img class="show" src="https://s3.bmp.ovh/imgs/2022/04/09/e278c240c29a050d.jpg" id="stone" /></div><button id="start">开始游戏</button><span id="G">12</span><div id="win"><h1>等待结果出现</h1></div><div id="last"><button id="contin">继续游戏</button><button id="brek">退出游戏</button></div></body></html>

CSS:

html {margin: 0 auto;min-width: 100px;
}.head {display: flex;justify-content: center;margin: 50px;
}h4 {margin: 10px;
}.show {width: 100px;
}.left {position: absolute;left: 0;border: 1px solid black;text-align: center;width: 350px;height: 350px;
}.left_show {width: 200px;height: 200px;
}.right {position: absolute;right: 0;border: 1px solid black;text-align: center;width: 350px;height: 350px;
}.right_show {width: 200px;height: 200px;
}.bottom {margin: 0 auto;text-align: center;visibility: hidden;
}#stop,
#out,
#start {display: flex;margin: 0 auto;width: 200px;height: 50px;text-align: center;padding: 15px 70px 15px 70px;
}#win {visibility: hidden;margin: 0 auto;text-align: center;
}#last {text-align: center;
}#contin,
#brek {visibility: hidden;margin: 0 auto;text-align: center;border: 1px solid black;width: 150px;height: 40px;
}#G{visibility: hidden;
}

JavaScript:

window.onload = function () {var Iwin = 0;var Ifal = 0;var IP = 0;var array = ["https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg", "https://s3.bmp.ovh/imgs/2022/04/09/7372bc211969aec4.jpg", "https://s3.bmp.ovh/imgs/2022/04/09/e278c240c29a050d.jpg"];var index = 0;var timer;var contin = document.getElementById('contin');var brek = document.getElementById('brek');var change = document.getElementById('change');var bottom = document.getElementsByClassName('bottom')[0];var win = document.getElementById('win');var stats = document.getElementById('stats');var choose = document.getElementById('choose');var start = document.getElementById('start');var paper = document.getElementById('paper');var jian = document.getElementById('jian');var stone = document.getElementById('stone');var timer_2 = setInterval(function () {change.src = array[index++];if (index == array.length) {index = 0;}}, 80);start.onclick = function () {contin.style.visibility = 'hidden';brek.style.visibility = 'hidden';clearInterval(timer_2);timer = setInterval(function () {change.src = array[index++];if (index == array.length) {index = 0;}}, 80);win.style.visibility = 'hidden';start.style.visibility = 'hidden';bottom.style.visibility = 'visible';paper.onclick = function () {var src = this.src;end(src,0, 2, 1)}jian.onclick = function () {var src = this.src;end(src,1, 0, 2)}stone.onclick = function () {var src = this.src;end(src,2, 1, 0)}};//开始游戏  contin.onclick = function () {start.onclick()}//重置游戏brek.onclick = function () {location.reload();}var end = function (src,P, W, L) {clearInterval(timer);var Number = Math.round(Math.random() * (2));choose.src = src;change.src = array[Number];win.style.visibility = 'visible';bottom.style.visibility = 'hidden';if (Number == P) {win.innerHTML = "<h1>" + '平局' + "</h1>";IP++;} else if (Number == W) {win.innerHTML = "<h1>" + '你赢了' + "</h1>";Iwin++;} else if (Number == L) {win.innerHTML = "<h1>" + '你输了' + "</h1>";Ifal++;}contin.style.visibility = 'visible';brek.style.visibility = 'visible';stats.innerHTML = "胜：" + Iwin + "&nbsp;" + "负：" + Ifal + "&nbsp;" + "平：" + IP; // 显示元素}
}

H5+JavaScript 剪刀石头布小游戏完整代码相关推荐

java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...
C++ 简化推箱子小游戏完整代码参考网络资料命令行运行仅供初学者参考交流
C++ 简化推箱子小游戏完整代码参考网络资料命令行运行仅供初学者参考交流说明:学做了4关推箱子, 仅供初学者参考可用g++ 编译,可以将内容复制到TXT文件,将后缀改为".cp ...
【Java】Java基础飞机大战小游戏完整代码
Java基础飞机大战小游戏完整代码先来展示一下代码实现结果图主函数ShootGame 初始化游戏原始背景图片,游戏人物图片,游戏开始结束图片:构建产生敌人算法:产生英雄机算法:发射子弹算法:判断是 ...
Friends小游戏完整代码
Friends小游戏完整代码 Mover[] movers = new Mover[10]; Attractor a; int num = 50; int maxnum = 10001; int r ...
python 贴吧盖楼_ es6 + canvas 开源盖楼小游戏完整代码注释从零教你做游戏（一）...
盖楼游戏一个基于 Canvas 的盖楼游戏 Demo 预览手机设备可以扫描下方二维码 github Game Rule 游戏规则以下为默认游戏规则,也可参照下节自定义游戏参数每局游戏生命值为3 ...
抖音很火的召唤神龙的小游戏完整代码-召唤神龙
抖音很火的解压小游戏,完整代码分享.有兴趣的可以试着写一下. 1. index <!DOCTYPE html> <html> <head><meta cha ...
python进阶应用：飞机大作战小游戏完整代码实现（初级）
飞机大作战(初级) 完整代码如下: 注意,需要在对应同一个文件中放入相应的游戏需要用的图片及音效.否则可能报错 # 导入pygame库 import pygame import random# 设置常 ...
天天酷跑php源码_Java实现天天酷跑小游戏完整代码(附源码)
首先,写一个需求文档: 一.项目名称:<天天酷跑>(RunDay) 二.功能介绍: 闯关类游戏,玩家登录后,选择进入游戏,通过键盘控制玩家的上下左右移动,来躲避障碍物和吃金币,玩家躲避的 ...
天天酷跑电脑版代码C语言,Java实现天天酷跑小游戏完整代码(附源码).pdf
Java实实现现天天天天酷酷跑跑小小游游戏戏完完整整代代码码(附附源源码码) 首首先先,,写写一一个个需需求求文文档档:: 一.项目名称: <天天酷跑> (RunDay ) 二.功能介绍: ...

H5+JavaScript 剪刀石头布小游戏完整代码

H5+JavaScript 剪刀石头布小游戏完整代码相关推荐

最新文章

热门文章