使用JavaScript实现剪刀石头布的小游戏(由浅到深)

使用JavaScript实现剪刀石头布的小游戏

简单的解析:

剪刀石头布的原理类似于一个数组中数字大小的比较,当然我们也可以将其分别使用对应的数字来代表剪刀石头布,在这里我们将 0 - 剪刀, 1 – 石头 , 2 – 布

我们要得到自己胜利的方式有一下几种可能

① 我们胜利

② 和电脑平局

③ 电脑胜利

思路一:

将剪刀石头布分别使用数字代替,将数字作为实参,传入一个进行比较的方法,由于数字的不同,也使得出现的组合就不同。(这里我能使用随机数来让电脑随机生成0,1,2三个数的任意一个)

假设我们第一次出的是剪刀(0),那么电脑会有三种可能(0 ,1, 2),而这三种能也就代表了三种结果

我们就可以对这三种结果使用if进行判断

    function getValue(num1){
                var num = 0;
                var img = document.getElementById("computer");
                var sheng = document.getElementById("sheng");
                var shu = document.getElementById("shu");
                if(img.getAttribute("src") == "js-01基础/QQ图片20180427170838.png"){
                    num = 0 ;

                }else if(img.getAttribute("src")== "js-01基础/QQ图片20180427170845.png"){
                    num=1;
                }else if(img.getAttribute("src") == "js-01基础/QQ图片20180427170755.png"){
                    num=2;
                }
                alert(num1);
                alert(num);
                //玩家出剪刀时
                if(num1 == 0){
                    if(num1 - num == -1){
                        shu.innerText = parseInt(shu.innerText)+1;
                    }else if(num1 - num == -2){
                        sheng.innerText = parseInt(sheng.innerText)+1;
                    }else if(num1 - num==0){
                        sheng.innerText = parseInt(sheng.innerText);
                        shu.innerText = parseInt(shu.innerText);
                    }
                }
                //玩家出石头时
                if(num1 - num == 1){
                    sheng.innerText = parseInt(sheng.innerText)+1;
                }else if(num1 - num==0){
                    sheng.innerText = parseInt(sheng.innerText);
                    shu.innerText = parseInt(shu.innerText);
                }else if(num1-num == -1){
                    shu.innerText = parseInt(shu.innerText)+1;
                }

//                玩家出布的时候
                if(num1- num ==2){
                    shu.innerText = parseInt(shu.innerText)+1;
                }else if(num1-num == 1){
                    sheng.innerText = parseInt(sheng.innerText)+1;
                }else if(num1 - num==0){
                    sheng.innerText = parseInt(sheng.innerText);
                    shu.innerText = parseInt(shu.innerText);
                }

            }
            

    对上面的代码进行解析:

    我们首先需要传入一个参数(参数是在每个图片的点击事件中自己设定一个参数),根据参数我们可以知道我们选定的是剪刀石头布中的哪一个,

    然后再根据 0 1 2 之间的运算关系进行判断。

  这就是对于上述代码的解析,同理可以得出其余情况。

      

    但是思路一虽然能够实现我们的想法,但是不够简洁,因此我们通常使用思路二的方式,来针对这种对随机数的判断

  思路二:我们可以采用数组的形式来进行比较判断

<script type="text/javascript">
    var imgs = document.querySelectorAll("#imgs img");

    var imgSrc = ["img/jiandao.png","img/shitou.png","img/bu.png"];

    imgs.forEach(function(item,index,arr){
        item.onclick = function(){
            document.getElementById("myImg").src = item.getAttribute("src");

            var id = setInterval(function(){
                var num =  parseInt(Math.random()*3);
                document.getElementById("computer").src = imgSrc[num];
            },20);

            setTimeout(function(){
                clearInterval(id);
                var myImg = document.getElementById("myImg").getAttribute("src");
                var comImg = document.getElementById("computer").getAttribute("src");

                var myIndex = imgSrc.indexOf(myImg);
                var comIndex = imgSrc.indexOf(comImg);

                check(myIndex,comIndex);
            },500);

        };
    });

    function check(myIndex,comIndex){
        var score = document.getElementById("score");
        var span1 = document.querySelectorAll("#scoreFen span")[0];
        var span2 = document.querySelectorAll("#scoreFen span")[1];
        if(myIndex==0&&comIndex==2 || myIndex==1&&comIndex==0
            || myIndex==2&&comIndex==1){
            score.innerText = "恭喜!你赢啦!";
            var s = parseInt(span1.innerText)+1;
            span1.innerText = s<10?"0"+s:s;
        }else if(myIndex==comIndex){
            score.innerText = "平局!再来一局吧!";
        }else{
            score.innerText = "sorry!你输啦!";
            var s = parseInt(span2.innerText)+1;
            span2.innerText = s<10?"0"+s:s;
        }

    }

</script>

  以上为完整的script区域代码

  首先通过构造一个剪刀石头布的数组,通过遍历取到数组中剪刀石头布相对应的下标还有地址,然后动态绑定一个function,使得“您选择了”下方的图片,与我们所点击的图片,进行匹配。

  

原文地址:https://www.cnblogs.com/Code-ccc/p/8971100.html

时间: 2024-10-29 03:03:51

使用JavaScript实现剪刀石头布的小游戏(由浅到深)的相关文章

一款JavaScript开发的扫雷小游戏

<style><!-- #FLM_main { margin:50px auto; padding:20px; background:#EEE; zoom:1; width:650px; } #FLM_main table { border-collapse:collapse; background:#EEE; float:left; } #FLM_main table td { border:1px solid #CCC; font-size:20px; width:38px; hei

用javascript实现2048的小游戏

前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏一样一样的. 下面分享一下整个2048游戏的代码逻辑: 首先,搭建游戏框架 其次,开始我们的代码编写 index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

剪刀石头布的小游戏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>石头剪刀布小游戏</title> <link href="jiandaoshitoubu.css" rel="stylesheet"/> </head> <body> <di

JavaScript之打飞机小游戏 html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JavaScript之打飞机小游戏 js css

先引入    jquery-1.12.4.min.js 和    lodash.min.js css .container{ width: 320px; height: 568px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .start-page{ width: 320px; height: 568px; background: url('../images/start_bg.png'

javascript实现贪吃蛇小游戏

源码地址:https://github.com/qmdx00/Snake ,请不要吝啬star. 首先画出UML类图: 用es6的语法,创建项目结构: 配置webpack: const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: path.resolve(__di

JavaScript版拼图小游戏

慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 在线预览(Chrome):http://sandbox.runjs.cn/show/pcwfu7i5 拼图游戏其实挺简单,主要是涉及到一些细节的处理,以下是我的自己在实现中涉及到的问题: 图片的切割与拼接 如何随机布局 如何切换图片 拖动图片溢出处理 怎么知道图片是否还原成功 实现思路: 为了简单

【开发记录】微信小游戏开发入门——俄罗斯方块

叨叨 我在前一阵子,打算做一个微信小游戏,当然是单机的,只是为了了解小游戏开发的过程,最终选择了俄罗斯方块这一经典小游戏作为demo,源代码已托管值github,当然,这个游戏demo对用不并不友好,但是已经可以让我入门小程序开发了XD. demo地址:https://github.com/nbclw/Laya_Brick 准备 在任何开发前都需要对要开发的东西有一定的了解.准备: 小游戏原理:微信小游戏是属于H5游戏的一种吧,我是这样理解的:在H5中,有一个叫Canvas(画布)的存在,与电脑

HTML5游戏开发,剪刀石头布小游戏案例

剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友.同学.兄弟姐妹有意见分歧?通过“剪刀石头布游戏”来一局吧,谁赢了听谁的.躲猫猫的时候,通过“剪刀石头布游戏”来一局吧,谁输了谁找.洗衣服.做饭.扫地等等什么的,通过“剪刀石头布游戏”来一局吧,谁输了谁做.这是我的处女座游戏,学校的时候跟着培训老师一步一步写出来的,今天在这里将这款游戏分享给伙伴们,可