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'进行显示

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