js实现石头剪刀布游戏
前言
用户选择出石头剪刀布，电脑系统随机生成石头剪刀布，然后判断结果并显示给用户
一、实现效果
二、使用步骤
1.HTML和CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>石头剪刀布</title>
<style>
#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;
}
</style>
</head>
<body>
<div id='bigbox'>
<h1>请选择</h1>
<div class="box1">
<img src="../img/shitou.png" alt="">
<img src="../img/jiandao.png" alt="">
<img src="../img/bu.png" alt="">
</div>
<div class="text">
<span>您选择了</span>
<span>系统选择了</span>
</div>
<div class="box2">
<img src="../img/undefined.png" alt="">
<h1>pk</h1>
<img src="../img/undefined.png" alt="">
</div>
<p>结果显示中。。。</p>
</div>
</body>
2.JavaScript
<script>
let imgs=document.getElementsByTagName('img')
// console.log(imgs.length)
for(let i=0;i<3;i++){
imgs[i].onclick=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)
}
</script>
总结
利用数组，将石头剪刀布src地址保存，利用随机数将生成0-2的任意数字，电脑延时0.2秒生成。用户利用for循环将照片绑定onclick（），点击图片，用户选择图片修改为当前图片。创建参数函数，传入数组标，以及this对象。通过this.src改变用户选择的显示图片，将数组下标 与随机数进行条件判断。0代表石头，1代表剪刀，2代表布。生成结果操作dom'进行显示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现的石头剪刀布游戏源码分享
这个游戏主要设计到两点: 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布 杀 石头 石头 杀 剪子 ... 根据以上特点找出规律,写出算法即可. 让电脑随机 这点比较容易,前面我有写过文章介绍,不明白的童鞋可以去看看. 随机刷屏 其实这个效果不是游戏的关键性,但为了看起来更加互动,好玩,我就给加上了.这里用到了一个取模算法,根据余数去循环显示即可达到效果. 界面截图 最后上代码 <!DOCTYPE html> <html> <head&g
-
js实现石头剪刀布游戏
前言 用户选择出石头剪刀布,电脑系统随机生成石头剪刀布,然后判断结果并显示给用户 一.实现效果 二.使用步骤 1.HTML和CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
-
ruby实现石头剪刀布游戏示例
ruby实现石头剪刀布游戏 复制代码 代码如下: #encoding: utf-8arr = ['石头', '剪刀', '布']win_arr = [['石头', '剪刀'], ['剪刀', '布'], ['布', '石头']]#随机computer的值,放入result数组中result = [arr.sample]while (true) puts "请输入石头.剪刀.布" input_value = gets.force_encoding("GBK").e
-
js贪吃蛇游戏实现思路和源码
本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
-
JS实现网页游戏中滑块响应鼠标点击移动效果
本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html
-
JS数字抽奖游戏实现方法
本文实例讲述了JS数字抽奖游戏实现方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>新年网页抽奖程序</title> <style type="text/css"> * {margin:0; padding:0;} ul,li {list-style-type:non
-
使用非html5实现js板连连看游戏示例代码
向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http
-
C# Winform实现石头剪刀布游戏
本文实例为大家分享了Winform实现石头剪刀布游戏的具体代码,供大家参考,具体内容如下 新建一个windows窗体程序,用数字1代表石头,用数字2代表剪刀,用数字3代表布,结果取玩家和电脑出拳之差,有三种结果 玩家赢: -1,2 平手: 0 玩家输: 其它值 新建3个类: 1)Computer.cs 电脑随机出拳 using System; using System.Collections.Generic; using System.Linq; using System.Text; using
-
H5+C3+JS实现五子棋游戏（AI篇）
本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){
-
JS实现打字游戏
本文实例为大家分享了JS实现打字游戏的具体代码,供大家参考,具体内容如下 第一步:页面的排版和布局 1.1实现开始游戏的界面 1.1.1开始游戏 1.1.2游戏说明 <!--游戏开始的界面--> <div id="gameStart"> <div id="start">开始</div> <div id="describe">说明</div> <div id="
-
js实现小星星游戏
本文实例为大家分享了js实现小星星游戏的具体代码,供大家参考,具体内容如下 功能简介 如图:实现一个点击游戏 准备 准备一个星星的图片(这里我重命名为xxx.png) 开搞 新建一个html文件,并将其与准备好的图片放在同一目录下(东西多了不建议这样搞,但这个就俩) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小