1, Foreword
learning python a while ago, I wrote a game of stone, scissors and paper with the purpose of learning while practicing. The execution method is to directly execute python code in the shell environment, Python learning notes scissors stone cloth Let the baby play. The baby can play with stone, scissors and paper by choosing 1, 2 and 3. He has a good time (in fact, the baby is estimated to be playing with his father's configuration in zihi). But make complaints about the baby's mother, three or four year old baby, you let her play this, you get her a webpage, let her click in the browser to choose pictures. Well, since the family leader has arranged the task, I have to arrange it. This game is implemented based on html and JavaScript. I don't think she needs my guidance this time. She can play it by herself.
2, Practical steps
1. Main ideas of game design
- Define a list corresponding to stone, scissors and paper, and fix the display position;
- Define a picture list corresponding to 3 pictures of stone, scissors and cloth;
- Define a result text display binary array. At the same time, define a fractional binary array according to the result. 0, 1 and 2 correspond to stone, cloth and scissors respectively. Because there are 9 situations in the stone scissors cloth game, you can use this array to enumerate;
- Draw 3 examples of fist guessing;
- The computer uses the mathematical random function to randomly generate 0-3, corresponding to the subscript i of the binary array, and takes pictures from the picture list according to the random value;
- The player clicks the picture button to complete the guessing. The three pictures correspond to the subscript j of the binary array respectively;
- Display the winning and losing results;
- Win 1 point, lose - 1 point, draw 0 point, using cumulative points.
2. Write and debug html game code locally
3. Upload code and pictures to the server
(base) [root@sun-site caiquan]# pwd
/games/caiquan
(base) [root@sun-site caiquan]# ll
total 48
-rw-r–r-- 1 root root 4603 Nov 29 15:25 index.html
-rw-r–r-- 1 root root 11059 Nov 29 10:14 paper.jpg
-rw-r–r-- 1 root root 14397 Nov 29 10:13 rock.jpg
-rw-r–r-- 1 root root 11143 Nov 29 10:12 scissors.jpg
4. Configure nginx reverse proxy
(base) [root@sun-site conf.d]# cat love.sun-site.com.conf
server{
listen 80;
server_name love.sun-site.com;
...(Omitted here)
location /caiquan {
root /games/; #Specify caiquan path root directory
index index.html;
}
}
5. Reload nginx configuration
(base) [root@sun-site conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
(base) [root@sun-site conf.d]# nginx -s reload
6. Game execution test
7. Baby test
3, Game code
<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stone scissors paper game</title>
<style>
form {
color: blue;
font-family: "Microsoft YaHei ", Times, serif;
font-size:24px;
}
input {
text-align:right;
font:inherit;
color:inherit;
}
</style>
<script type="text/javascript">
//canvas variable
var cwidth=1800;
var cheight=400;
var ctx;
var canvasl;
//Instance variable
var everything=[];//An array of all painted objects
var rockbx=300;//stone
var rockby=300;
var paperbx=700;//cloth
var paperby=300;
var scissorsbx=1100;//scissors
var scissorsby=300;
//Picture variable
var choices=["rock.jpg","paper.jpg","scissors.jpg"];
var compimg=new Image();
//Text variable
var beats=[["Draw: you're all out of stone","You won: your cloth won the stone of the computer","You lost: the stone of the computer won your scissors"],
["You lost: the computer's cloth won your stone","Draw: you're all out","You win: your scissors win the computer cloth"],
["You won: your stone won the computer scissors","You lost: the scissors of the computer won your cloth","Draw: you all gave scissors"]];
var points=[
[0,1,-1],
[-1,0,1],
[1,-1,0]];
//Other variables
var newscore;
var size=15;
var result;
var timeId;
//Guessing instance function
function Throw(sx,sy,smargin,swidth,sheight,rectcolor,picture)
{
this.sx=sx;
this.sy=sy;
this.swidth=swidth;
this.bwidth=swidth+2*smargin;
this.bheight=sheight+2*smargin;
this.sheight=sheight;
this.fillstyle=rectcolor;
this.draw=drawThrow;
this.img=new Image();
this.img.src=picture;
this.smargin=smargin;
}
//Draw instance function
function drawThrow()
{
ctx.strokeStyle="rgb(0,0,0)";
ctx.strokeRect(this.sx,this.sy,this.bwidth,this.bheight);
ctx.fillStyle=this.fillstyle;
ctx.fillRect(this.sx,this.sy,this.bwidth,this.bheight);
ctx.drawImage(this.img,this.sx+this.smargin,this.sy+this.smargin,this.swidth,this.sheight);
}
//flyin function
function flyin()
{
ctx.drawImage(compimg,50,100,size,size);
size+=5;
if(size>100)
{
clearInterval(tid);//When the animation is over, clear the timer
ctx.fillText(result,500,100,600);
document.f.score.value=String(newscore);
}
}
//Drawing of three control buttons
var rockb=new Throw(rockbx,rockby,8,80,80,"rgb(255,192,203)","rock.jpg");
var paperb=new Throw(paperbx,paperby,8,80,80,"rgb(0,200,200)","paper.jpg");
var scib=new Throw(scissorsbx,scissorsby,8,80,80,"rgb(0,0,200)","scissors.jpg");
everything.push(rockb); //Generate stone instance
everything.push(paperb); //Generation step example
everything.push(scib); //Generate scissors instance
//Global rendering function
function drawall()
{
ctx.clearRect(0,0,cwidth,cheight);
var i;
for(i=0;i<everything.length;i++)
{
everything[i].draw();
}
}
//Initialization function
function init()
{
var timer=null;
document.f.score.value=0;//Set current score
ctx=document.getElementById('canvas').getContext('2d');
canvas1=document.getElementById('canvas');
canvas1.addEventListener('click',function(ev){
clearTimeout(timer);
timer=setTimeout(function (){//Initialize a delay
var compch=Math.floor(Math.random()*3);//Random variable, 0 stone 1 paper 2 scissors
var compchn=choices[compch];//Corresponding picture
compimg.src=compchn;
//Mouse coordinates
var mx;
var my;
if(ev.layerX||ev.layer==0)
{
mx=ev.layerX;
my=ev.layerY;
}
else if(ev.offsetX||ev.offsetX==0)
{
mx=ev.offsetX;
my=ev.offsetY;
}
//i cycle three buttons
var i;
for(i=0;i<everything.length;i++)
{
var ch=everything[i];
if((mx>ch.sx)&&(mx<ch.sx+ch.bwidth)&&(my>ch.sy)&&(my<ch.sy+ch.bheight))
{
drawall();
size=15;
tid=setInterval(flyin,100);//timer
result=beats[compch][i];//Corresponding text description
//Calculate score
newscore=Number(document.f.score.value);
newscore+=points[compch][i];
break;
}
}
},250)
},false);
drawall();//Draw function
ctx.font="bold 36pt Georgia";
ctx.fillstyle="blue";
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="1800" height="400">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<form name="f">
score:<input name="score" value="0" size="5" disabled="disabled" />
</form>
</body>
</html>