JavaScript实现的石头剪刀布游戏源码分享
这个游戏主要设计到两点：
首先是胜负运算
由于石头剪刀布是循环性的
石头 杀 剪子
剪子 杀 布
布 杀 石头
石头 杀 剪子
。。。
根据以上特点找出规律，写出算法即可。
让电脑随机
这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。
随机刷屏
其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。
界面截图
最后上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS写的石头剪子布游戏 - 琼台博客</title>
<style type="text/css">
div{margin:20px auto;padding:10px;border:2px solid #999;width:200px;background:#ffe;}
div#cu{font-weight:bold;font-size:30px;height:40px;color:red;}
div#la{border:none;background:none;display:none;}
span{color:red;font-weight:bold;}
</style>
<script type="text/javascript">
var se = null,time=20,you=0,arr=new Array('石头','抹布','剪子');
function p(n){
you = n;
document.getElementById('you').innerHTML=s(n);
document.getElementById('st').disabled=true;
document.getElementById('mb').disabled=true;
document.getElementById('jz').disabled=true;
document.getElementById('cu').innerHTML = '...';
se = setInterval('t()',50);
}
function agin(){
document.getElementById('st').disabled=false;
document.getElementById('mb').disabled=false;
document.getElementById('jz').disabled=false;
document.getElementById('la').style.display = 'none';
document.getElementById('you').innerHTML = '';
document.getElementById('pc').innerHTML = '';
document.getElementById('cu').innerHTML = '';
document.getElementById('you').innerHTML= '请选择';
}
function bt(){
var pc = Math.floor(Math.random() * 3 + 1);
document.getElementById('pc').innerHTML = s(pc);
var str='';
if(pc==you){
str += '平局';
}else{
var b = pc-you;
if(b>0){
if(b==1){
str += '电脑赢';
}else{
str += '你赢啦';
}
}else{
b = b*-1;
if(b==1){
str += '你赢啦';
}else{
str += '电脑赢';
}
}
}
document.getElementById('la').style.display = 'block';
document.getElementById('cu').innerHTML = str;
}
function t(){
if(time>0){
document.getElementById('pc').innerHTML = arr[time%3];
time--;
}else{
clearInterval(se);
se = null;
time = 20;
bt();
}
}
function s(n){
if(n==1){
return '石头';
}else if(n==2){
return '抹布';
}else{
return '剪子';
}
}
</script>
</head>
<body>
<div>
<p>你出什么？<span id="you">请选择</span></p>
<p><button id="st" onclick="p(1);">石头</button></p>
<p><button id="mb" onclick="p(2);">抹布</button></p>
<p><button id="jz" onclick="p(3);">剪子</button></p>
</div>
<div>
<p>电脑出？</p>
<span style="" id="pc"></span>
</div>
<div id="cu"></div>
<div id="la"><button id="agin" onclick="agin()">再来一次</button></div>
</body>
</html>
相关推荐
-
Android游戏源码分享之2048
引言 程序猿们,是否还在为你的老板辛辛苦苦的打工而拿着微薄的薪水呢,还是不知道如何用自己的应用或游戏来赚钱呢! 在这里IQuick将教您如何同过自己的应用来赚取自己的第一桶金! 你是说自己的应用还没有做出来? 不,在這里已经为你提供好了一个完整的游戏应用了,在文章的下面有源码的地址哦.你只要稍做修改就可以变成一个完全属于自己的应用了,比如将4*4换成5*5,甚至是其它的.如果你实在是慵懒至极的话,你只要将本应用的包名及广告换成自己的,就可以上传到市场上轻轻松松赚取自己的第一桶金了. 如果你觉得本
-
C语言借助EasyX实现的生命游戏源码
本文讲述C语言借助EasyX实现的生命游戏,具体操作流程如下: 1.生命游戏内容: 该游戏包括一个二维矩形世界,这个世界中的每个方格居住着一个活着的或死了的细胞.一个细胞在下一个时刻生死取决于相邻八个方格中活着的细胞的数量.如果一个细胞周围的活细胞数量多于 3 个,这个细胞会因为资源匮乏而在下一个时刻死去:如果一个位置周围有 3 个活细胞,则该位置在下一个时刻将诞生一个新的细胞:如果一个位置周围有 2 个活细胞,则该位置的细胞生死状态保持不变:如果一个细胞周围的活细胞少于 2 个,那么这个细胞会
-
Java太阳系小游戏分析和源码详解
最近看了面向对象的一些知识,然后跟着老师的讲解做了一个太阳系各行星绕太阳转的小游戏,来练习巩固一下最近学的知识: 用到知识点:类的继承.方法的重载与重写.多态.封装等 分析: 1.需要加载图片.画图 2.建一个面板,主页面 3.行星类 效果图: 先看一下源码结构图: 现在逐步分析各个类的功能: 1)工具类-----util包中 --Constant类 封装了游戏中用到的常量 --GameUtil类 封装了游戏的图片加载功能 --MyFrame类 封装了游戏面板的构造,用于各面板的父类 -
-
JavaScript实现的石头剪刀布游戏源码分享
这个游戏主要设计到两点: 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布 杀 石头 石头 杀 剪子 ... 根据以上特点找出规律,写出算法即可. 让电脑随机 这点比较容易,前面我有写过文章介绍,不明白的童鞋可以去看看. 随机刷屏 其实这个效果不是游戏的关键性,但为了看起来更加互动,好玩,我就给加上了.这里用到了一个取模算法,根据余数去循环显示即可达到效果. 界面截图 最后上代码 <!DOCTYPE html> <html> <head&g
-
JS原生2048小游戏源码分享(全网最新)
最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</title> <style> body,h1,div,tabl
-
14 个Python小游戏 源码分享
目录 1.吃金币 2.打乒乓 3.滑雪 4.并夕夕版飞机大战 5.打地鼠 6.小恐龙 7.消消乐 8.俄罗斯方块 9.贪吃蛇 10.24点小游戏 11.平衡木 12.外星人入侵 13.贪心鸟 14.井字棋888'' 1.吃金币 源码分享: import os import cfg import sys import pygame import random from modules import * '''游戏初始化''' def initGame(): # 初始化pygame, 设置展示窗口
-
JavaScript头像上传插件源码分享
本文实例为大家分享了JavaScript头像上传插件源码,供大家参考,具体内容如下 效果图: 源码: cxc.js /* cxc.js 频繁操作公共接口 */ var $ = function (id) { return document.getElementById(id); }; //通过id获取dom对象 var A = function (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空方法 var
-
jQuery网页版打砖块小游戏源码分享
这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆. 为大家分享的jQuery实现网页版打砖块小游戏源码如下 效果演示 源码下载 <!DOCTYPE html> <html lang="en" > <head> <meta charset="gb2312" /> <title>jQuery网页版打砖块小游戏源码</title> <link href="css/ma
-
JavaScript 封装一个tab效果源码分享
效果图如下: 查看演示 源码下载 html代码 <!DOCTYPE html> <html> <head> <title>tab测试</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-" /> <link href="css/tab.css" rel="styles
-
C语言对对碰游戏源码分享
本文实例为大家分享了C语言对对碰游戏的具体代码,供大家参考,具体内容如下 //////////////////////////////////////// //画素材的x和y都是反的,因为x表示行,但是画出来x表示列,y同 //////////////////////////////////////// #include <graphics.h> #include <fstream> #include <strstream> #include <iomanip&g
-
JavaScript实现一个带AI的井字棋游戏源码
最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应该问题不大,用html稍微写一下就可以.主要是人机对弈时的ai算法,如何使电脑方聪明起来,是值得思考一下的.开始游戏后,由玩家先行.那么站在计算机的角度,可以对多种情况进行分析,并按照重要程度赋予权值. 情况如下: 1.同一排(行.列.对角线)有且只有两个棋子,并且都是自己的,只要再进一步就能获胜,那么剩下的那个位置权值最高,优先级最大.赋予一级权值. 2.同一排(行.列.对角线)有且只有两个棋子,并且都是对
-
Java实现贪吃蛇游戏源码
本文实例为大家分享了Java实现贪吃蛇游戏源码的具体代码,供大家参考,具体内容如下 1.StartGame package com.qiang.snake; import javax.swing.*; //游戏的主启动类 public class StartGame { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setResizable(false); //窗口大小不可变 frame.s