Home > Developer > JavaScript
//html Code<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Scissors Games</title> <Linkrel= "stylesheet"href= "Css/game.css"></Link> </Head> <Body> <DivID= "Game"> <ulclass= "Panel"> <Li> <Pclass= "Name">Me: Name</P> <Divclass= "Anim user"></Div> </Li> <Li> <Pclass= "Name">Computer: Name</P> <Divclass= "Anim Comp"></Div> </Li> </ul> <Divclass= "Op"> <ButtonID= "Play"onclick= "game." Caiquan (); ">Begin</Button> </Div> <DivID= "text"class= "text">Please start the game ...</Div> <ulID= "Guess"class= "Guess"> <Li> <Divclass= "Guess0"onclick= "game.verdict (0)">Stone</Div> </Li> <Li> <Divclass= "Guess1"onclick= "game.verdict (1)">Scissors</Div> </Li> <Li> <Divclass= "Guess2"onclick= "Game.verdict (2)">Cloth</Div> </Li> </ul> </Div> <Scripttype= "Text/javascript"src= "Js/game.js"></Script> </Body></HTML>
CSS style (font: mini-simple cartoon) *{margin:0px; padding:0px; Font-family: ' Mini-simple cartoon '; font-size:28px;} html,body{width:100%; height:100%; Background:rgba (244, 184, 202, 1);} ul{List-style:none;} #game {width:800px; height:600px; Margin:auto; top:20%;} #game ul{width:100%; height:415px;} #game ul li{width:50%; height:100%; Float:left; Text-align:center;} #game ul Li anim{width:223px; height:337px; border:10px solid #ff6699; border-radius:50%; margin:20px Auto 0; Background-position:center; Background-repeat:no-repeat;}. user{Background:url ('.. /img/readyl.png ');}. comp{Background:url ('.. /img/readyr.png ');} #game. op{width:100%; Text-align:center;} #game. op button{width:200px; height:60px; border:10px solid #ff6699; Background:rgb (253, 217, 227); border-radius:50%; Outline:none; Cursor:pointer; Font-weight:bold;} #game. Op button:hover{border-color: #ff0000; Background-color: #ff0000; Font-size:36px; Color:rgb (253, 217, 227);} #game. Op button.disabled{border-color: #bbb; Color: #bbb; Background-color: #ccc; font-size:28px; Cursor:default;} #game. guess{width:220px; height:100%; position:fixed; top:0px; left:0px; Display:none;} #game ul.guess li{width:100%; height:32%;} #game ul.guess Li div{width:100%; height:90%; border:10px solid #ff6699; border-radius:50%; Background-position:center; Background-repeat:no-repeat; Cursor:pointer; Background-color:rgba (244, 184, 202, 1);} #game ul.guess li div:hover{background-color: #ff6699; Color: #fff;} div.guess0{Background-image:url ('.. /img/0.png ');} div.guess1{Background-image:url ('.. /img/1.png ');} div.guess2{Background-image:url ('.. /img/2.png ');} #game div.text{margin-top:20px; Text-align:center; font-size:50px; Font-weight:bold;}
JS Code Function.prototype.extend = function (fn) {for (Var attr in Fn.prototype) {this.prototype[attr] = Fn.prototype[attr]; }}//Parent constructor for inheritance, common property function Caiquan (name) {this.name = name; This.point = 0; }//used to inherit the following derivation, common method Caiquan.prototype.guess = function () {}//inherit parent, Player's constructor function User ( Name) {Caiquan.call (this,name); } user.extend (Caiquan); User.prototype.guess = function (point) {return this.point = point; }//Computer's constructor function Comp (name) {Caiquan.call (this,name); } comp.extend (Caiquan); Scissors method of the computer, random Comp.prototype.guess = function () {return this.point = Math.floor (Math.random ()); }//Referee constructor Function Game (U, c) {this.text = document.getElementById (' text '); THIS.BTN = document.getElementById ("Play"); This.user = u; This.comp = C; THIS.CLASSN =document.getelementsbyclassname (' name '); this.guess = document.getElementById ("guess"); This.anim = Document.getelementsbyclassname ("Anim"); This.num = 0; This.init (); THIS.TIEMR = null; } Game.prototype.Caiquan = function () {this.textvalue (' please punch ... '); This. Btndisable (); This.start (); This.guess.style.display = ' block '; }//How to play Game.prototype.start = function () {var this = this; This.timer = setinterval (function () {this.anim[0].classname = ' anim user guess ' + ((this.num + +)% 3); This.anim[1].classname = ' Anim comp guess ' + ((this.num + +)% 3); },500)}//Initialize name Game.prototype.init = function () {this.classn[0].innerhtml = ' I: ' + this.user.name; this.classn[1].innerhtml = ' computer: ' + this.comp.name; }//Hint panel area modified Game.prototype.textValue = function (val) {This.text.innerHTML = val; }//button fails Game.prototype.BtnDisable = function () {if (this.btn.disabled) {this.btn . disabled = false; This.btn.className = "; This.btn.innerHTML = ' Come again '}else{this.btn.disabled = true; This.btn.className = ' disabled '; }} Game.prototype.verdict = function (point) {clearinterval (This.timer); var Usergu = user.guess (point); var compgu = comp.guess (); This.anim[0].classname = ' Anim user guess ' + usergu; This.anim[1].classname = ' Anim comp guess ' + compgu; var res = USERGU-COMPGU; Switch (res) {case 0:this.textvalue (' Draw!!! ') Break Case 1:case-2: This.textvalue (' lose~~~ '); Break Case 2:case-1: this.textvalue (' Win!!! ') Break } This.guess.style.display = ' none '; This. Btndisable (); } var user = New User (' Rui Wen '); var comp = new Comp (' Lacus '); var game = new Game (user, comp);
javascript--Object-oriented--scissors game
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
