当前位置:首页 >> JavaScript>>正文

【JS练手项目】纯javascript石头剪刀布游戏

栏目:JavaScript时间:2017-10-19热度:

  js基础学完了,想写个什么东西练练手,想到了剪刀石头布游戏,大概想了一下,应该不算复杂,拿来做练手项目的第一发最适合不过了,哈哈!

  那么开始吧!

  先在纸上画了个草图,大致功能如下:


aaa.jpg


  1.红线将窗口分为己方和对方。

  2.有三个小方块(剪刀、石头、布)可供选择,点击后上方的大方块显示自己选择的手势。

  3.点击“开始”按钮,先判断自己有没有选,没选的话提示“请先选择要出什么”点击确认后刷新页面,如果已经选择,则让电脑随机从剪刀、石头、布中随机出一个。

  4.电脑出之前有个半秒钟的图片快速滚动的效果。

  5.根据自己出的手势与电脑出的手势做出判断,是输是赢。此时“开始按钮”变成“再来一次”。

  6.点击“再来一次”,让页面刷新。

  整体功能很简单,需要涉及到的判断也不多。

  样式我就不在这贴出来了,展示页面中能找到。


  贴出代码:

var dnc=document.getElementById("dnc");
var zjc=document.getElementById("zjc");
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var btn4=document.getElementById("btn4");
var btn5=document.getElementById("btn5");
var kk=0;
var mm=0;
var DoTimer=null;
btn1.onclick = function(){
zjc.style.background="url(images/cut.jpg)";
kk=1;
}
btn2.onclick = function(){
zjc.style.background="url(images/stone.jpg)";
kk=2;
}
btn3.onclick = function(){
zjc.style.background="url(images/bu.jpg)";
kk=3;
}
//点击后判断
btn4.onclick = function(){
clearInterval(DoTimer);
if(kk==0){
alert("请选择你要出什么");
location.reload(); 
};
fandong();
dnsj();
}
//点击再来一次
btn5.onclick = function(){
chong();
}
//电脑随机出手!
function dnsj(){
setTimeout(function(){
clearInterval(DoTimer);
var num = Math.random()*3;
num = Math.ceil(num);
mm=num;
switch(mm){
case 1:
dnc.style.background="url(images/cut.jpg)";
break;
case 2:
dnc.style.background="url(images/stone.jpg)";
break;
case 3:
dnc.style.background="url(images/bu.jpg)";
break;
}
setTimeout(panduan,1000);
},600)
}
//判断输赢
function panduan(){
if(mm==kk){
btn4.style.display="none";
btn5.style.display="block";
alert("平手");
}
else if(kk==1&&mm==3||kk==2&&mm==1||kk==3&&mm==2){
btn4.style.display="none";
btn5.style.display="block";
alert("你赢了!");
}
else if(kk==1&&mm==2||kk==2&&mm==3||kk==3&&mm==1){
btn4.style.display="none";
btn5.style.display="block";
alert("你输了!");
}
}
//图片翻动
function fandong(){
var imgs = ["url(images/cut.jpg)","url(images/stone.jpg)","url(images/bu.jpg)"];
var i = 0;
DoTimer=setInterval(function(){
dnc.style.background = imgs[i++];
i = i > imgs.length - 1 ? 0 : i;	
},100);
}
//再来一次
function chong(){
location.reload(); 
}


 效果展示


  个人练手项目,分享给大家,希望大家指教

热门标签

最新评论