lufy版，这是lufy书中的第一个demo：
http://www.hui12.com/nbin/game/sjb/index.html
https://nbin2008.github.io/demo/sjb/index.html
div版，div+css：
http://www.hui12.com/nbin/game/sjb/index2.html
https://nbin2008.github.io/demo/sjb/index2.html
canvas原生API版：
http://www.hui12.com/nbin/game/sjb/index3.html
https://nbin2008.github.io/demo/sjb/index3.htmlcanvas版：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>石头剪刀布 canvas版</title>
</head>
<body>
<script type="text/javascript">
function Game(){
this.init();
};
var proto = {
init: function(){
this.before();
},
before: function(){
var This = this;
var mycanvas = document.createElement("canvas");
mycanvas.width = 800;
mycanvas.height = 400;
this.mycanvas = mycanvas;
document.body.appendChild(mycanvas);
this.typeEvent = {
mousedown: [],
mousemove: [],
mouseup: []
};
var typeEvent = this.typeEvent;
for( var name in typeEvent ){
(function(name){
mycanvas['on'+name] = function(e){
for( var i=0; i<typeEvent[name].length; i++ ){
typeEvent[name][i](e);
};
};
})(name);
};
this.btnCheck = {
shitou: 0,
jiandao: 0,
bu: 0
}
var dmycanvas = document.createElement("canvas");
dmycanvas.width = mycanvas.width;
dmycanvas.height = mycanvas.height;
this.dctx = dmycanvas.getContext("2d");
var img = new Image();
img.src = "images/bg.png";
img.onload = function(){
This.img = img;
This.startDraw();
};
},
startDraw: function(){
var This = this;
var img = this.img;
var mycanvas = this.mycanvas;
var width = mycanvas.width;
var height = mycanvas.height;
var ctx = mycanvas.getContext("2d");
this.resultData = {
all: 0,
win: 0,
loss: 0,
tie: 0
};
var resultData = this.resultData;
this.myShowData = 0;
this.enemyShowData = 0;
setInterval(draw, 100);
function draw(){
ctx.clearRect(0, 0, width, height);
//背景
ctx.beginPath();
ctx.rect(0, 0, width, height);
ctx.fillStyle = "#000";
ctx.lineWidth = 10;
ctx.strokeStyle = "#008800";
ctx.fill();
ctx.stroke();
ctx.closePath();
//title 540x100
ctx.drawImage( img, 0, 0, 540, 100, (800-540)/2, 15, 540, 100 );
//结果层
var resultBg = drawResult();
ctx.drawImage(resultBg, 5, 145)
//显示层
var showBg = drawShow();
ctx.drawImage(showBg, 260, 120)
//点击层 这个要和鼠标事件同步
drawClick();
};
function drawClick(){
ctx.beginPath();
ctx.rect(250,280,300,100);
ctx.fillStyle = "#fff";
ctx.lineWidth = 5;
ctx.strokeStyle = "#FF8800";
ctx.fill();
ctx.stroke();
ctx.closePath();
//文字
ctx.beginPath();
ctx.font = "16px 微软雅黑 normal"
ctx.lineWidth = 1;
ctx.strokeStyle = "#000";
ctx.strokeText("请出拳", 275, 305);
//点击图案
ctx.beginPath();
ctx.drawImage(tcShitou,288,320);
ctx.arc(310,342,22,0,2*Math.PI,true);
if( !This.o1 ){
This.o1 = true;
This.typeEvent['mousedown'].push(function(e){
var x = e.clientX - mycanvas.getBoundingClientRect().left;
var y = e.clientY - mycanvas.getBoundingClientRect().top;
This.dctx.beginPath();
This.dctx.arc(310,342,22,0,2*Math.PI,true);
if( This.dctx.isPointInPath(x,y) ){
This.myShowData = 0;
This.count();
};
});
};
ctx.beginPath();
ctx.drawImage(tcJiandao,380,320);
ctx.arc(402,342,22,0,2*Math.PI,true);
if( !This.o2 ){
This.o2 = true;
This.typeEvent['mousedown'].push(function(e){
var x = e.clientX - mycanvas.getBoundingClientRect().left;
var y = e.clientY - mycanvas.getBoundingClientRect().top;
This.dctx.beginPath();
This.dctx.arc(402,342,22,0,2*Math.PI,true);
if( This.dctx.isPointInPath(x,y) ){
This.myShowData = 1;
This.count();
};
});
};
ctx.beginPath();
ctx.drawImage(tcBu,472,320);
ctx.arc(494,342,22,0,2*Math.PI,true);
if( !This.o3 ){
This.o3 = true;
This.typeEvent['mousedown'].push(function(e){
var x = e.clientX - mycanvas.getBoundingClientRect().left;
var y = e.clientY - mycanvas.getBoundingClientRect().top;
This.dctx.beginPath();
This.dctx.arc(494,342,22,0,2*Math.PI,true);
if( This.dctx.isPointInPath(x,y) ){
This.myShowData = 2;
This.count();
};
});
};
};
var tcShitou = document.createElement("canvas");
var tcSctx = tcShitou.getContext("2d");
var tcJiandao = document.createElement("canvas");
var tcJctx = tcJiandao.getContext("2d");
var tcBu = document.createElement("canvas");
var tcBctx = tcBu.getContext("2d");
var tcArr = [tcSctx, tcJctx, tcBctx];
for(var i=0; i<tcArr.length; i++ ){
tcArr[i].width = 43;
tcArr[i].height = 43;
if( i==0 ){
tcSctx.drawImage(img,0,100,86,86,0,0,43,43);
}else if( i==1 ){
tcJctx.drawImage(img,100,100,86,86,0,0,43,43);
}else if(i==2){
tcBctx.drawImage(img,200,100,86,86,0,0,43,43);
}
};
var resultCanvas = document.createElement("canvas");
var rctx = resultCanvas.getContext("2d");
resultCanvas.width = 150;
resultCanvas.height = 110;
rctx.font = "12px 微软雅黑 normal";
rctx.textBaseline = "middle";
function drawResult(){
rctx.clearRect(0,0,150,110);
rctx.rect(0,0,150,110);
rctx.lineWidth = 10;
rctx.strokeStyle = "#ff8800";
rctx.fillStyle = "#fff";
rctx.fill();
rctx.stroke();
//文字
rctx.strokeStyle = "#000";
rctx.lineWidth = 1;
rctx.strokeText("猜拳次数："+resultData['all'],20,25);
rctx.strokeText("胜利次数："+resultData['win'],20,45);
rctx.strokeText("失败次数："+resultData['loss'],20,65);
rctx.strokeText("平局次数："+resultData['tie'],20,85);
return resultCanvas;
};
var showCanvas = document.createElement("canvas");
showCanvas.width = 280;
showCanvas.height = 140;
var sctx = showCanvas.getContext("2d");
sctx.font = "24px 微软雅黑 normal";
sctx.textBaseline = "middle";
sctx.textAlign = "center";
function drawShow(){
sctx.clearRect(0,0,280,140);
//文字
sctx.lineWidth = 1;
sctx.strokeStyle = "#fff"
sctx.strokeText("玩家",70,20);
sctx.strokeText("电脑",210,20);
//图像
This.myShowData == 0 ? sctx.drawImage(img,0,100,86,86,27,48,86,86) :
This.myShowData == 1 ? sctx.drawImage(img,100,100,86,86,27,48,86,86) :
This.myShowData == 2 ? sctx.drawImage(img,200,100,86,86,27,48,86,86) : "";
This.enemyShowData == 0 ? sctx.drawImage(img,0,100,86,86,167,48,86,86) :
This.enemyShowData == 1 ? sctx.drawImage(img,100,100,86,86,167,48,86,86) :
This.enemyShowData == 2 ? sctx.drawImage(img,200,100,86,86,167,48,86,86) : "";
return showCanvas;
};
},
count: function(){
var ran = Math.round(Math.random()*2);
this.enemyShowData = ran;
var testArr = [
[0, 1, -1],
[-1, 0, 1],
[1, -1, 0]
];
var result = testArr[this.myShowData][ran];
result == 1 ? this.resultData['win']++ :
result == -1 ? this.resultData['loss']++ :
result == 0 ? this.resultData['tie']++ : "";
this.resultData['all']++;
}
};
Game.prototype = proto;
var g = new Game();
</script>
</body>
</html>
div版：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>石头剪刀布 div版</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
.mylegend{
width: 800px; height: 400px; position: relative; border: 5px solid #008800; background-color: #000; font-family: "微软雅黑";
}
.mylegend>div{
position: absolute; box-sizing: border-box;
}
.bg{
background: url(images/bg.png) no-repeat;
}
.title{
width: 540px; height: 100px; background-position: 0 0; left: calc(50% - 270px); top: 5px;
}
.selfName, .enemyName{
width: 86px; height: 130px; font-weight: bold; color: #fff; font-size: 24px; top: 120px; text-align: center; line-height: 24px;
}
.selfName{
right: calc(50% + 50px);
}
.enemyName{
left: calc(50% + 50px);
}
.selfName div, .enemyName div{
width: 86px; height: 86px; position: absolute; left: 0; bottom: 0; background-position: 0 -100px;
}
.resultShow{
width: 150px; height: 110px; border: 4px solid #ff8800; left: 5px; top: 145px; background-color: #fff;
}
.resultShow p{
line-height: 12px; text-indent: 15px; padding-top: 10px;
}
.clickShow{
width: 300px; height: 110px; left: calc(50% - 150px); bottom: 10px; border: 4px solid #ff8800; background-color: #fff; text-align: center;
}
.clickShow p{
text-indent: 20px; line-height: 35px; text-align: left; padding-bottom: 10px;
}
.clickShow span{
display: inline-block; width: 86px; height: 86px; transform: scale(0.5); transform-origin: center top; cursor: pointer; transition: transform 0.2s linear;
}
.clickShow span:hover{
transform: scale(0.6);
}
.clickShow .shitou{
background-position: 0 -100px;
}
.clickShow .jiandao{
background-position: -100px -100px;
}
.clickShow .bu{
background-position: -200px -100px;
}
</style>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $bShitou = $(".shitou"),
$bJiandao = $(".jiandao"),
$bBu = $(".bu"),
$all = $(".all"),
$win = $(".win"),
$loss = $(".loss"),
$tie = $(".tie"),
$selfBg = $(".selfName div"),
$enemyBg = $(".enemyName div"),
self = 0,
enemy = 0,
result = 0,
resultArray = [
[0, 1, -1],
[-1, 0, 1],
[1, -1, 0]
];
var game = {
onclick: function(){
var This = this;
$bShitou.add($bJiandao).add($bBu).on("mousedown", function(){
$(this).css("opacity","0.8")
if( $(this).hasClass('shitou') ){
self = 0;
}else if( $(this).hasClass('jiandao') ){
self = 1;
}else if( $(this).hasClass('bu') ){
self = 2;
};
enemy = Math.round(Math.random()*2);
This.change();
});
$bShitou.add($bJiandao).add($bBu).on("mouseup", function(){
$(this).css("opacity","1")
});
},
change: function(){
self == 0 ? bgShitou($selfBg) :
self == 1 ? bgJiandao($selfBg) :
self == 2 ? bgBu($selfBg) : '';
enemy == 0 ? bgShitou($enemyBg) :
enemy == 1 ? bgJiandao($enemyBg) :
enemy == 2 ? bgBu($enemyBg) : '';
this.fnResult();
function bgShitou($obj){
$obj.css('background-position', '0 -100px');
};
function bgJiandao($obj){
$obj.css('background-position', '-100px -100px');
};
function bgBu($obj){
$obj.css('background-position', '-200px -100px');
};
},
fnResult: function(){
result = resultArray[self][enemy];
$all.text( +$all.text()+1 );
switch(result){
case 0:
$tie.text( +$tie.text()+1 );
break;
case 1:
$win.text( +$win.text()+1 );
break;
case -1:
$loss.text( +$loss.text()+1 );
break;
};
}
};
game.onclick();
});
</script>
</head>
<body>
<div class="mylegend">
<div class="title bg"></div>
<div class="selfName">
玩家
<div class="bg"></div>
</div>
<div class="enemyName">
电脑
<div class="bg"></div>
</div>
<div class="resultShow">
<p>猜拳次数：<span class="all">0</span></p>
<p>胜利次数：<span class="win">0</span></p>
<p>失败次数：<span class="loss">0</span></p>
<p>平局次数：<span class="tie">0</span></p>
</div>
<div class="clickShow">
<p>请出拳</p>
<span class="shitou bg"></span>
<span class="jiandao bg"></span>
<span class="bu bg"></span>
</div>
</div>
</body>
</html>
lufy版：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>石头剪刀布游戏 lufy版</title>
<script src="js/lufylegend-1.9.11.js"></script>
</head>
<body>
<div id="mylegend"></div>
<script type="text/javascript">
init(50, "mylegend", 800, 400, main);
var loadingLayer,
backLayer,
resultLayer,
clickLayer,
selfBitmap,
enemyBitmap,
selfTextAll,
selfTextWin,
selfTextLoss,
selfTextDraw,
win = 0,
loss = 0,
draw = 0;
imglist = {},
imgData = [
{name:"title",path:"images/title.jpg"},
{name:"shitou",path:"images/shitou.png"},
{name:"jiandao",path:"images/jiandao.png"},
{name:"bu",path:"images/bu.png"}
],
showList = [];
function main(){
backLayer = new LSprite();
addChild(backLayer);
loadingLayer = new LoadingSample3();
backLayer.addChild(loadingLayer);
LLoadManage.load(
imgData,
function(progress){
loadingLayer.setProgress(progress);
},
function(result){
imglist = result;
console.log(imglist);
backLayer.removeChild(loadingLayer);
loadingLayer = null;
gameInit();
}
);
};
function gameInit(){
showList.push( new LBitmapData(imglist["shitou"]) );
showList.push(new LBitmapData(imglist["jiandao"]));
showList.push(new LBitmapData(imglist["bu"]));
//添加游戏界面背景
backLayer.graphics.drawRect(10,'#008800',[0,0,LGlobal.width,LGlobal.height], true, '#000');
//显示游戏标题
var titleBitmap = new LBitmap(new LBitmapData(imglist["title"]));
titleBitmap.x = (LGlobal.width-titleBitmap.width)/2;
titleBitmap.y = 10;
backLayer.addChild(titleBitmap);
//玩家方出拳图片
selfBitmap = new LBitmap(showList[0]);
selfBitmap.x = 400 - selfBitmap.width - 50;
selfBitmap.y = 150;
backLayer.addChild(selfBitmap);
//电脑出拳图片
enemyBitmap = new LBitmap(showList[0]);
enemyBitmap.x = 400 + 50;
enemyBitmap.y = 150;
backLayer.addChild(enemyBitmap);
//玩家，电脑名称设定
var nameText;
nameText = new LTextField();
nameText.text = "玩家";
nameText.weight = "bolder";
nameText.color = "#fff";
nameText.size = 24;
nameText.x = selfBitmap.x + (selfBitmap.width - nameText.getWidth())/2;
nameText.y = 115;
backLayer.addChild(nameText);
nameText = new LTextField();
nameText.text = "电脑"
nameText.weight = "bolder";
nameText.color = "#fff";
nameText.size = 24;
nameText.x = enemyBitmap.x + (enemyBitmap.width - nameText.getWidth())/2;
nameText.y = 115;
backLayer.addChild(nameText);
//结果显示层初始化
initResultLayer();
//操作层初始化
initClickLayer();
};
function initResultLayer(){
resultLayer = new LSprite();
resultLayer.graphics.drawRect(4,'#ff8800',[0,0,150,110],true,'#fff');
resultLayer.x = 10;
resultLayer.y = 150;
backLayer.addChild(resultLayer);
selfTextAll = new LTextField();
selfTextAll.text = "猜拳次数：0";
selfTextAll.weight = "bolder";
selfTextAll.x = 10;
selfTextAll.y = 20;
resultLayer.addChild(selfTextAll);
selfTextWin = new LTextField();
selfTextWin.text = "胜利次数：0";
selfTextWin.weight = "bolder";
selfTextWin.x = 10;
selfTextWin.y = 40;
resultLayer.addChild(selfTextWin);
selfTextLoss = new LTextField();
selfTextLoss.text = "失败次数：0";
selfTextLoss.weight = "bolder";
selfTextLoss.x = 10;
selfTextLoss.y = 60;
resultLayer.addChild(selfTextLoss);
selfTextDraw = new LTextField();
selfTextDraw.text = "平局次数：0";
selfTextDraw.weight = "bolder";
selfTextDraw.x = 10;
selfTextDraw.y = 80;
resultLayer.addChild(selfTextDraw);
};
function initClickLayer(){
clickLayer = new LSprite();
clickLayer.graphics.drawRect(4,'#ff8800',[0,0,300,110],true,'#fff');
clickLayer.x = 250;
clickLayer.y = 275;
backLayer.addChild(clickLayer);
//请出拳
var msgText = new LTextField();
msgText.text = "请出拳：";
msgText.weight = "bolder";
msgText.x = 10;
msgText.y = 10;
clickLayer.addChild(msgText);
//石头
var btnShitou = getButton("shitou");
btnShitou.x = 30;
btnShitou.y = 35;
clickLayer.addChild(btnShitou);
btnShitou.addEventListener(LMouseEvent.MOUSE_UP,onclick);
//剪刀
var btnJiandao = getButton("jiandao");
btnJiandao.x = 115;
btnJiandao.y = 35;
clickLayer.addChild(btnJiandao);
btnJiandao.addEventListener(LMouseEvent.MOUSE_UP,onclick);
//布
var btnBu = getButton("bu");
btnBu.x = 200;
btnBu.y = 35;
clickLayer.addChild(btnBu);
btnBu.addEventListener(LMouseEvent.MOUSE_UP,onclick);
};
function onclick(event,display){
var selfValue, enemyValue;
if( display.name == "shitou" ){
selfValue = 0;
}else if( display.name == 'jiandao' ){
selfValue = 1;
}else if( display.name == 'bu' ){
selfValue = 2;
};
enemyValue = Math.floor(Math.random()*3);
selfBitmap.bitmapData = showList[selfValue];
enemyBitmap.bitmapData = showList[enemyValue];
var checkList = [
[0, 1, -1],
[-1, 0, 1],
[1, -1, 0]
];
var result = checkList[selfValue][enemyValue];
if( result == -1 ){
loss += 1;
}else if( result == 1 ){
win += 1;
}else{
draw += 1;
}
selfTextWin.text = "胜利次数：" + win;
selfTextLoss.text = "失败次数：" + loss;
selfTextDraw.text = "平局次数：" + draw;
selfTextAll.text = "猜拳次数：" + (win+loss+draw);
};
function getButton(value){
var btnUp = new LBitmap(new LBitmapData(imglist[value]));
btnUp.scaleX = 0.5;
btnUp.scaleY = 0.5;
var btnOver = new LBitmap(new LBitmapData(imglist[value]));
btnOver.scaleX = 0.5;
btnOver.scaleY = 0.5;
btnOver.x = 2;
btnOver.y = 2;
var btn = new LButton(btnUp, btnOver);
btn.name = value;
return btn;
};
</script>
</body>
</html>
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
