HTML石头剪刀布游戏,js实现石头剪刀布游戏
前言
用户选择出石头剪刀布,电脑系统随机生成石头剪刀布,然后判断结果并显示给用户
一、实现效果
二、使用步骤
1.HTML和CSS
石头剪刀布
#bigbox{
width: 600px;
height: 600px;
background: slateblue;
margin: 0 auto;
}
#bigbox>h1{
width: 100%;
text-align: center;
color: #ffffff;
}
.box1{
height: 200px;
}
.box2{
height: 220px;
}
.box1 img{
float: left;
margin: 25px;
}
.box2 img{
float: left;
margin:20px 63px;
width: 150px;
height: 150px;
}
.box2 h1{
display: block;
color: #000;
float: left;
line-height: 150px;
}
img{
width: 150px;
height: 150px;
}
p{
text-align: center;
color: red;
font-size: 20px;
font-weight: bold;
}
.text{
height: 20px;
}
.text span{
font-size: 20px;
color: #ffffff;
margin: 0 100px;
line-height: 20px;
}
请选择
您选择了
系统选择了
pk
结果显示中。。。
2.JavaScript
let imgs=document.getElementsByTagName('img')
// console.log(imgs.length)
for(let i=0;i<3;i++){
imgs[i].οnclick=function(){
game(this,i)
}
}
function game(src,i){
// console.log(i)
//用户
let str=src.src;
let user=document.getElementsByTagName('img')[3]
user.src=str
//系统
setTimeout(function (){
let user=document.getElementsByTagName('img')[4]
let imgSrc=['../img/shitou.png','../img/jiandao.png','../img/bu.png']
let num = Math.floor(Math.random() * imgSrc.length)
console.log(num)
user.src=imgSrc[num]
i=i*1
//结果
let rs=document.getElementsByTagName('p')[0]
if(i==0&&num==1 || i==1&&num==2
|| i==2&&num==0){
rs.innerHTML="恭喜你获得胜利!"
}else if(i==num){
rs.innerHTML="平局,请再来一次吧"
}else{
rs.innerHTML="不好意思,游戏失败"
}
},200)
}
总结
利用数组,将石头剪刀布src地址保存,利用随机数将生成0-2的任意数字,电脑延时0.2秒生成。用户利用for循环将照片绑定onclick(),点击图片,用户选择图片修改为当前图片。创建参数函数,传入数组标,以及this对象。通过this.src改变用户选择的显示图片,将数组下标 与随机数进行条件判断。0代表石头,1代表剪刀,2代表布。生成结果操作dom'进行显示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
HTML石头剪刀布游戏,js实现石头剪刀布游戏相关推荐
- js开发html5游戏,JS开发HTML5游戏《神奇的六边形》(五)
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击这里可进入游戏体验) 因内容 ...
- 勇闯掘金小游戏为一款多个小游戏的合集游戏,有五个关卡:找掘金、石头剪刀布、寻找藏宝图、打地鼠、抽奖。基于Vue
游戏简介 勇闯掘金小游戏为一款多个小游戏的合集游戏,共有五个关卡,分别为:找掘金.石头剪刀布.寻找藏宝图.打地鼠.抽奖.每个环节20分,满分100分. 完整代码下载地址:勇闯掘金小游戏 快速体验 ht ...
- 用Java编译“三国群英传”游戏(本质石头剪刀布)
用Java编译"三国群英传"游戏(本质石头剪刀布) package com.domain; //玩家类 public abstract class Player { //玩家有哪些 ...
- html css js 实战案例_使用html+css+js实现弹球游戏
php中文网最新课程 每日17点准时技术干货分享 使用html+css+js实现弹球游戏 代码如下,复制即可使用: <head> <style type="text/css ...
- 也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏 想起去年的时候自己也做了一个 于是也拿出来分享之 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释 ...
- html实现页面弹球,使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏 代码如下,复制即可使用: 开始 0 暂停 提示:键盘左右箭头控制滑板
- 消除类游戏(js版)
原文:消除类游戏(js版) 最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码 ...
- H5原生js简单拼图游戏
H5原生js简单拼图游戏 演示地址 效果展示 源码 index.html puzzle.css puzzle.js 源码下载 演示地址 链接: 演示地址 效果展示 源码 index.html < ...
- JS开发HTML5游戏《神奇的六边形》(四)
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
最新文章
- Android 操作串口 (android serial port api)
- 皮一皮:所以说...哪里的程序猿最能吃辣?
- 智能算法的研究与实现
- Windows7旗舰版磁盘分区详解—附分区步骤截图
- 雷电交加,雨水倾泻--北京
- 基于FPGA实现SDI接口
- Jquery-数组删除元素
- 国内外大厂集结,远程办公大考成绩单发布!
- java 1亿个数字中_求一亿个数字里面最小的10个数字
- xShell终端中文乱码完全解决方法
- Python-datetime模块
- 有一个无法超越的神国,叫“外国”
- 机器学习【系列】之第六章随机森林模型
- wps带阴影的边框怎么设置_wps文字加阴影边框怎么设置
- UFS Host基础特性分析 -- 硬件部分
- dot com过时了,个性域名“钱”景看好
- 32年正大天晴肝疾攻坚路 半部中国乙肝抗争史
- 电源管理允许此设备唤醒计算机怎么关掉,允许计算机关闭此设备以节省电量灰色 | MOS86...
- revit二次开发 创建标注标记
- ORACLE MERGE INTO语句,unable to get a stable set of rows in the source tables报错解决
热门文章
- 了解Vue框架的大致学习方向(第一课)
- Excel中获取最后一个指定字符后的字符串
- zabbix监控windows磁盘读写速度
- jsp和 serlvet总和
- proxy跨域不生效_vue-cli3.0使用proxytable解决跨域问题
- ArcGIS 创建空间数据库表
- Maven报错org.apache.jasper.JasperException: Unable to compile class for JSP
- 水平拉滑轮组计算机械效率的题,滑轮组机械效率计算题.doc
- CyPress CapSense 参数设置基本概念
- 串口通讯隔离利用光耦隔离的问题