代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        .div1{

            margin-left: 40px;

            margin-top: 40px;

        }

    </style>

</head>

<body>

    <table border="1px" cellspacing="0px"><!-- border设置表格边线，cellspacing设置边框的边距 -->

        <tr>

            <td>

                <p>我方出拳</p>

                <img src="img/2.png" id="img2">

            </td>

            <td>VS</td>

            <td>

                <p>敌方出拳</p>

                <img src="img/3.png" id="img3">

            </td>

        </tr>

        <tr>

            <td colspan="3">

                <p id="result">PLEASE CHOLCE</p>

            </td>

        </tr>

        <tr>

            <td>

                <p>我方选择的是</p>

                <img src="img/2.png" id="img1">

            </td>

            <td>请出拳</td>

            <td>

                <div class="div1">

                    <select onchange="changeImg()" id="choiceSelect">

                        <option value="2">剪刀</option>

                        <option value="1">石头</option>

                        <option value="3">布</option>

                    </select>

                </div>

                <div class="div1">

                    <input type="button" value="想好了出拳" onclick="getChoice()">

                </div>

                <div class="div1">

                    <input type="button" value="查看结果" onclick="showresult()">

                </div>

            </td>

        </tr>

        <tr>

            <td colspan="3" id="finalresult">

            <p>您玩了0局，您平0次，赢0次，输0次</p></td>

        </tr>

    </table>

<script type="text/javascript">

    // n1代表我方数

    var n1 = 2;

    var peace = 0;

    var win = 0;

    var lose = 0;

    var all = 0

    function changeImg(){

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

        n1 = choiceSelect.value;

        document.getElementById("img1").src = "img/"+n1+".png";

    }

    function getChoice(){

        //n2代表敌方数

        var n2 = parseInt(Math.random()*3)+1;

        // alert(n2);

        document.getElementById("img2").src = "img/"+n1+".png";

        document.getElementById("img3").src = "img/"+n2+".png";

        pk(n1,n2);

    }

    function pk(n1,n2){

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

        if (n1-n2 == 0) {

            result.innerHTML = "你和计算机平"+n1+"-------"+n2;

            peace++;

        }

        if (n1-n2 == -1||n1-n2 == 2) {

            result.innerHTML = "你赢了！！！"+n1+"-------"+n2;

            win++;

        }

        // if (n1-n2 == 1) {

        if (n1-n2 == 1||n1-n2 == -2 ) {

            // getChoice();

            result.innerHTML = "你输了！！！"+n1+"-------"+n2;

            lose++;

        }

        all++;

        document.getElementById("finalresult").innerHTML = "<p>您玩了"+all+"局，您平"+peace+"次，赢"+win+"次，输"+lose+"次</p>";

    }

    function showresult(){

        document.getElementById("finalresult").innerHTML = "<p>您玩了"+all+"局，您平"+peace+"次，赢"+win+"次，输"+lose+"次</p>";

    }

</script>

</body>

</html>
changeImg：获取选择的结果，显示对应的图片
n1：为获取下拉框选择的结果的内容

getChoice：获取0-1的随机数（不包括1）乘以3向下取整+1，得到的数为1，2，3

pk：计算输赢（例如：当我选石头为1，电脑选剪刀为2，那么n1-n2等于-1，所以判断如果结果等于-1时为我赢。一共有九种可能）


图片：

												


											
js石头剪刀布小游戏的更多相关文章
	

    
								
  1. pixi.js 微信小游戏 入手
		
    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
    
		
    2. 
						
  2. JS写小游戏（一）：游戏框架
		
    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
    
		
    3. 
						
  3. three.js 微信小游戏
		
    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...
    
		
    4. 
						
  4. 微信小程序开发入门学习(1):石头剪刀布小游戏
		
    从今天起开始捣鼓小程序了2018-12-17   10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
    
		
    5. 
						
  5. js消除小游戏(极简版)
		
    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...
    
		
    6. 
						
  6. 例子：js超级玛丽小游戏
		
    韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...
    
		
    7. 
						
  7. Java石头剪刀布小游戏
		
    package com.neusoft.test; import java.awt.BorderLayout; import java.awt.Choice; import java.awt.Colo ...
    
		
    8. 
						
  8. JS扫雷小游戏
		
    HTML代码 <title> 扫雷 </title> <!-- ondragstart:防拖拽生成新页面 oncontextmenu:屏蔽右键菜单--> <b ...
    
		
    9. 
						
  9. 使用JS制作小游戏贪吃蛇
		
    先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 算法练习-Palindrome Number
			
    判断回文整数 来源 https://leetcode.com/problems/palindrome-number/ 要求 判断一个整数是不是回文数,尽量减少内存暂用. 思路 可能的情况: 负数的应当 ...
    
			
    2. 
						
  2. --disable-column-names,--skip-column-names,--column-names=0
			
    --disable-column-names,--skip-column-names,--column-names=0
    
			
    3. 
						
  3. Android程序员不容错过的10款在线实用工具
			
    Android十款在线工具,在做Android开发过程中,会遇到一些小的问题,虽然自己动手也能解决,但是有了一些小工具,解决这些问题就得心应手了.Android在线工具,包括在线测试工具,及其他较为重 ...
    
			
    4. 
						
  4. mouse事件在JQ中的应用(在动画与交互中用得比较多).
			
    mousedown与mouseup事件 用户交互操作中,最简单直接的操作就是点击操作,因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作,与其对应的还有一个方法mouse ...
    
			
    5. 
						
  5. java研发常见问题总结 1
			
    1.java中所有类的父类是什么?他都有什么方法? Object类是所有类的直接或间接基类,如果一个类在声明时未继承基类,Java就默认其基类是Object,故Object被称为根类.该类位于java ...
    
			
    6. 
						
  6. C语言中的特殊变量
			
    auto: 函数中的局部变量,动态地分配存储空间,数据存储在动态存储区中,在调用该函数时系统会给它们分配存储空间,在函数调用结束时就自动释放这些存储空间. register: 为了提高效率,C语言允许 ...
    
			
    7. 
						
  7. 屏蔽firefox浏览器连接失败页面的广告
			
    现象 最近一直在使用firefox浏览器(版本:57.0.1(64位)),同步书签特别方便,但是最近发现当访问的一个不存在的网址时,连接失败页面竟然有广告!firefox不是号称没有广告吗? 分析 F ...
    
			
    8. 
						
  8. MYSQL忘记超级用户密码修改
			
    #service mysql stop #mysqld_safe --skip-grant-tables 另外开个SSH连接或终端 [root@localhost ~]# mysql mysql> ...
    
			
    9. 
						
  9. win8下使用IIS服务器及自定义服务器端包含模块（SSI）步骤
			
    配置完过段时间就容易忘记,特此记录. 1.开启IIS服务器. 默认没有安装,需要先安装. 打开控制面板--> 打开“程序和功能”--> 左侧选择“启用或关闭windows功能”--> ...
    
			
    10. 
						
  10. centos 开启http代理tinyproxy
			
    一.前言 就算有一些公司想到要进行压力测试也是用一些微软,官网出的一些软件,一个ip发起很多访问.等有一天黑客攻击来了发现还是顶不住.华盟君认为知此知彼才是压力测试的关键点,应当模拟黑客手法进行压力测 ...
    
			
    11.