js石头剪刀布小游戏

代码：

<!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石头剪刀布小游戏的更多相关文章

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

随机推荐

客户端使用自定义代理类访问WCF服务
通常在客户端访问WCF服务时,都需要添加服务引用,然后在客户端app.config或web.config文件中产生WCF服务的客户端配置信息.若是每添加一个服务都是这样做,这样势必会将比较麻烦,能否简 ...
RAL调用
[RPC的定义].RPC的全称为 Remote Procedure Call(远程过程调用).远程过程调用是一个计算机通信协议.该协议允许运行于一台计算机的程序调用另一台计算机的子程序,而程序员无需额 ...
SPFieldLookupValue class
using System; using Microsoft.SharePoint; namespace ConsoleApp { class Program { static void Main(st ...
爬虫第一篇基本库的使用——urllib
在Python2中有urllib2和urllib3两个库来实现请求的发送,在Pyhon3中则统一为urllib. urilib包含以下4个模块 request:最基本的请求模块,可以用来实现请求的发送 ...
SQL：获取语句执行时间2
获取sql执行时间方法2 --清除缓存 CHECKPOINT; DBCC DROPCLEANBUFFERS; DBCC FREEPROCCACHE; DBCC FREESYSTEMCACHE ('AL ...
【转载】#335 - Accessing a Derived Class Using a Base Class Variable
You can use a variable whose type is a base class to reference instances of a derived class. However ...
Vuex基础-Mutation
借助官网的一张图,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.不可以直接对其进行赋值改变.需要注意的是,mutations只能做一些同步的操作. 代码结构: ...
C#类的实例
一.C#类的实例类的实例其实就是类的对象.定义类之后即可声明类的对象,声明对象之后便可以访问对象的成员了. 语法格式如下: 类名对象名; // 声明对象对象名 = new 类名() ...
caffe在 14.04安装
同事安装遇到的问题,记录一下需要把cuda里面带的opengl不安装才行,否则冲突.在安装时,首先和之前一样,切换到无图形界面,关掉lightdm,安装cuda时选择--no-opengl-lib, ...
一篇SSM框架整合友好的文章（二）
上一篇讲述了DAO 层,mybatis实现数据库的连接,DAO层接口设计,以及mybtis和spring的整合.DAO层采用接口设计方式实现,接口和SQL实现的分离,方便维护.DAO层所负责的仅仅是接 ...

js石头剪刀布小游戏

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

随机推荐

热门专题