js实现出拳游戏

最新推荐文章于 2024-04-04 09:21:40 发布
最新推荐文章于 2024-04-04 09:21:40 发布
阅读量5.7k 收藏 7
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62008199/article/details/123468618
版权

JavaScript 游戏开发 剪刀石头布 随机数 事件处理
关键词由CSDN通过智能技术生成

js实现出拳游戏

内容：玩家和电脑进行猜拳游戏，玩家进行点击剪刀石头布出拳，而电脑是随机出拳，只能进行10次游戏，谁赢一次叠加10分，最后输出结果
在这里插入图片描述

html代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪刀石头布</title>
    <style>
        .main {
            width: 500px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            margin:auto;
            margin-top:10px;
        }

        .play {
            width: 200px;
            height: 100%;
        }

        .end {
            width: 100px;
            height: 100%;
            text-align: center;
            border-left: 2px solid black;
            border-right: 2px solid black;
        }

        img {
            width: 80px;
            height: 80px;
        }

        .wen {
            margin-bottom: 15px;
        }

        #cir {
            width: 90px;
            height: 90px;
            display: inline-block;
            border-radius: 50%;
            background-color: pink;
            margin-top: 75px;
            text-align: center;
            line-height: 90px;
            font-weight: bold;
        }

        #comList>img {
            margin-left: 50px;
            margin-top: 80px;
            position: absolute;
            display: none;
        }
        .move{
            margin-left: 80px;
        }
        #result{
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="play">
            <div class="wen">
                玩家：<span>张三</span>分数：<span id="score">0</span>
            </div>
            <div id="playList">
                <img src="./images/cloth.png" alt="" data-value="0">
                <br>
                <img src="./images/clipper.png" alt="" data-value="1">
                <br>
                <img src="./images/stone.png" alt="" data-value="2">
            </div>

        </div>
        <div class="end">
            <p id="result">YOU WIN</p>
            <span id="cir">出拳</span>
        </div>
        <div class="comperter">
            <div class="wen">
                玩家：<span>电脑</span>分数：<span id="jscore">0</span>
            </div>
            <div id="comList">
                <img src="./images/cloth.png" alt="">
                <img src="./images/clipper.png" alt="">
                <img src="./images/stone.png" alt="">
            </div>

        </div>
    </div>
    <script src="./index3.js"></script>
    <!-- <script src="./index3-1.js"></script> -->

</body>

</html>
方法一：
//玩家分数
let score = document.getElementById("score");
//电脑分数
let jscore = document.getElementById("jscore");
//出拳
let cir = document.getElementById("cir");
//结果
let result = document.getElementById("result");
//玩家拳头
let playList = document.getElementById("playList");
//电脑拳头
let comList = document.querySelectorAll("#comList>img");

// 父类角色类
class Role {
    // 分数
    _score = 0;
    get score() {
        return this._score;
    }
    set score(value) {
        this._score = value;
    }
}
// 电脑类
class Computer extends Role {
    // 电脑出拳
    send() {
        //出拳点击
        let num = Math.floor(Math.random() * 3);
        if (num == 0) {
            comList[num].style.display = "block";
            comList[num + 1].style.display = "none";
            comList[num + 2].style.display = "none";
        } else if (num == 1) {
            comList[num].style.display = "block";
            comList[num - 1].style.display = "none";
            comList[num + 1].style.display = "none";
        } else if (num == 2) {
            comList[num].style.display = "block";
            comList[num - 1].style.display = "none";
            comList[num - 2].style.display = "none";
        }
        return num;
    }
}
// 玩家类
class Player extends Role {
    // 玩家出拳
    send() {
        //玩家出拳，返回一个我设定的自定义属性图片的value值
        let selected = document.querySelector(".move");
        if (selected) {
            return selected.dataset.value;
        }
        return -1;
    }
}

let play = new Player();
let com = new Computer();

//点击出拳
//判断游戏为10次
let count = 0;
cir.onclick = function () {
    count++;
    let comperValue = com.send();
    let playerValue = play.send();
    console.log(playerValue, comperValue);
    if (playerValue == -1) {
        alert("请选择要出的拳");
        return;
    }
    if(playerValue>comperValue){
        if(playerValue-comperValue==2){
            com.score +=10;
        }else{
            play.score +=10;
        }       
    }else if(playerValue <comperValue){
        if(comperValue-playerValue==2){
            play.score +=10;            
        }else{
            com.score +=10;            
        }
    }
    score.innerHTML = play.score;
    jscore.innerHTML = com.score;
    if(count==10){
        if(play.score>com.score){
            result.innerHTML = "YOU WIN";
        }else if (play.score<com.score){
            result.innerHTML = "YOU LOSE";
        }else{
            result.innerHTML = "LEVEL";
        }
        alert("GAME OVER!");
    }
}



playList.onclick = function (e) {
    //通过判断是否添加属性来控制属性为空还是添加
    let selected = document.querySelector(".move");
    if (selected) {
        selected.className = "";
    }
    e.target.className = "move";
}
方法二：
//玩家分数
let score = document.getElementById("score");
//电脑分数
let jscore = document.getElementById("jscore");
//出拳
let cir = document.getElementById("cir");
//结果
let result = document.getElementById("result");
//玩家拳头
let playList = document.querySelectorAll("#playList>img");
//电脑拳头
let comList = document.querySelectorAll("#comList>img");
//玩家赢了gplayer+10 电脑赢了gcomper+10
let gplayer = 0, gcomper = 0;


// 父类角色类
class Role {
    // 分数
    _score = 0;
}
// 电脑类
class Computer extends Role {
    // 电脑出拳
    send() {
        let num;
        num = Math.floor(Math.random() * 3);
        if (num == 0) {
            comList[num].style.display = "block";
            comList[num + 1].style.display = "none";
            comList[num + 2].style.display = "none";
        } else if (num == 1) {
            comList[num].style.display = "block";
            comList[num - 1].style.display = "none";
            comList[num + 1].style.display = "none";
        } else if (num == 2) {
            comList[num].style.display = "block";
            comList[num - 1].style.display = "none";
            comList[num - 2].style.display = "none";
        }
        //返回点击的出拳数
        return num;
    }
}
// 玩家类
class Player extends Role {

    // 玩家出拳
    send() {

    }

}



let play = new Player();
let com = new Computer();
let comval, sum;



for (let i = 0; i < playList.length; i++) {
    playList[i].onclick = function () {
        if (i == 0) {
            playList[i].style.marginLeft = "80px";
            playList[i + 1].style.marginLeft = "0px";
            playList[i + 2].style.marginLeft = "0px";
        }
        else if (i == 1) {
            playList[i].style.marginLeft = "80px";
            playList[i - 1].style.marginLeft = "0px";
            playList[i + 1].style.marginLeft = "0px";
        }
        else if (i == 2) {
            playList[i].style.marginLeft = "80px";
            playList[i - 1].style.marginLeft = "0px";
            playList[i - 2].style.marginLeft = "0px";
        }
        sum = i;
    }
}

let state = 0;
cir.onclick = function () {
    state++;
    comval = com.send();
    console.log("玩家：" + sum + "，电脑：" + comval);

    if (sum - comval == -2 || sum - comval == 2) {
        if (sum > comval) {
            gcomper += 10;
            jscore.innerHTML = gcomper;
        } else {
            gplayer += 10;
            score.innerHTML = gplayer;
        }
    } else if (sum > comval) {
        gplayer += 10;
        score.innerHTML = gplayer;
    } else if (comval > sum) {
        gcomper += 10;
        jscore.innerHTML = gcomper;
    }
    if (state == 10) {
        if (gplayer > gcomper) {
            result.innerHTML="YOU WIN";
            result.style.color = "green";
        } else if (gplayer == gcomper) {
            result.innerHTML="LEVEL";
            result.style.color = "yellow";
        } else {
            result.innerHTML="YOU LOSE";
            result.style.color = "red";
        }
        
        cir.onclick = null;
        alert("game over");
    }

}



// }
想被带飞的鱼
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-猜拳游戏
m0_60501766的博客
08-08 1834
一、简单版猜拳游戏 编写一个用户和计算机猜拳的游戏，用户输入剪刀、石头或布，与计算机的出拳进行比较，判断胜负。 分析： 1、首先得用prompt（）方法建立一个用户输入框； 2、核心是用到Math.random()这个函数，该函数的作用是取[0,1)之间的随机数，可以利用这个函数让计算机随机出拳； 3、用if-else语句判断会出现的各种结果并作出判定； 具体代码如下： /** * a是用户输入的内容 * b是计算机的随机内容 */ var a = prompt('请输入1:剪刀 2:石头 3:布')
js实现人机猜拳游戏
weixin_64615992的博客
03-13 5522
html布局 <form name="gess"> <div> <div> <div class="gamer">1</div> <div> <div><input type="radio" value="0" name="gto" id="gto1"><label for="gto1"> <img src="石头图片">
JavaScript基于面向对象实现的猜拳游戏
12-28
本文实例讲述了JavaScript基于面向对象实现的猜拳游戏。分享给大家供大家参考，具体如下： html代码： <!doctype html> <html> <head> <meta charset=UTF-8> <title>猜拳游戏</title> <link rel=stylesheet href=css/game.css rel=external nofollow ></link> </head> <body> <div id=game> <ul class=panel> <li> <p class=nam
JavaScript第一季 核心语法/BOM/DOM/DHTML
08-19
本课程为JavaScript系列课程的第一部分。该课程主要讲解内容：JS核心语法、浏览器对象模型BOM、文档对象模型DOM，以及DOM编程案例讲解。
JS 实现一个猜拳游戏
wang16519865的博客
04-13 5745
JS 剪刀石头布游戏
JavaScript 编写猜拳游戏
吾爱的博客
10-27 3726
HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <script rel="script" src="js1.js"></script> <style> #Div { width: 1000px.
js剪刀石头布猜拳游戏代码
04-25
在本项目中，"js剪刀石头布猜拳游戏代码" 是一个利用JavaScript（JS）和CSS3技术实现的互动游戏。这个游戏的核心是通过编程逻辑让电脑与玩家进行猜拳比赛，也就是我们熟知的“石头-剪刀-布”游戏。下面将详细解释...
猜拳游戏_人机猜拳_互动游戏_
10-01
在本项目中，我们主要关注的是“猜拳游戏”...通过以上分析，我们可以看到开发一个人机猜拳游戏涵盖了从用户界面设计、算法实现、游戏逻辑到软件工程的多个方面，是一个综合性的项目，对于学习和提升编程技能大有裨益。
使用TensorFlow.js和 FingerPose 实现的石头、纸、剪刀游戏.zip
07-14
在本文中，我们将深入探讨如何使用TensorFlow.js和FingerPose库来实现一个基于手势识别的石头、纸、剪刀游戏。TensorFlow.js是Google开发的JavaScript库，它允许我们在浏览器环境中运行机器学习模型，而FingerPose则...
猜拳小游戏小程序
09-20
3. **随机数生成**：为了实现电脑随机出拳，我们需要使用JavaScript的`Math.random()`函数生成0到1之间的随机数，然后转换为剪刀、石头、布的索引。 4. **比较逻辑**：根据剪刀石头布的游戏规则，编写判断胜负的...
javascript做的小小猜拳游戏
10-08
javascript做的小小猜拳游戏,趣味性强！
JavaScript人机猜拳
12-25
//获得文本框中的值 var tt=document.querySelector("input").value; //获得1-3的随机数 var ss=Math.floor(Math.random()*3)+1; <form> 请输入你的出拳数字：<input type="txet" name=""><br/> <input type="button" value="比赛" </form>
html+css实现小游戏：猜拳游戏
05-05
适合初学者，比较简单
微信小程序猜拳游戏.zip
05-07
6. **逻辑判断**：在 JavaScript 代码中，需要编写游戏逻辑来判断双方出拳的胜负，这部分涉及到条件语句和可能的随机数生成，确保游戏公平且有随机性。 7. **样式设计**：WXSS 类似于 CSS，用于定义组件的外观。...
js猜拳游戏
最新发布
热爱WebGIS的博客
04-04 865
将点击事件进行动态绑定。将点击事件进行行内绑定。
猜拳小游戏(三局两胜)
Xiaoxu773的博客
07-28 364
【代码】猜拳小游戏(三局两胜)
JS猜拳游戏
lucky_kundy的博客
01-14 4949
用HTML、CSS、JS写了一个猜拳游戏，比较简单
JavaScript之猜拳游戏
diaodaya5842的博客
08-25 1080
// 猜拳游戏 // 清屏函数 let clear = () => process.stdout.write(process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H'); let readline = require("readline-sync"); let player = { name : "...
出拳小游戏python
03-07
出拳小游戏是一种简单的猜拳游戏，玩家和电脑进行对战，通过选择不同的出拳方式来决定胜负。下面是一个简单的出拳小游戏的Python代码示例： ```python import random def get_player_choice(): choice = input(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值