<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas base</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
position: relative;
background-color: #1c96ae;
}
#cvs{
position: relative;
display: block;
left: 300px;
background-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div id="container">
<canvas id="cvs"></canvas>
</div>
<button id="player1">玩家1前进</button>
<button id="player2">玩家2前进</button>
<script>
var canvas = document.getElementById('cvs');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
console.log(ctx.fillStyle); //#000000
console.log(ctx.strokeStyle); //#000000
console.log(ctx.shadowColor); //rgba(0,0,0,0)
console.log(ctx.shadowBlur); //0
console.log(ctx.shadowOffsetX); //0
console.log(ctx.shadowOffsetY); //0
console.log(ctx.lineCap); //butt
console.log(ctx.lineJoin); //miter
console.log(ctx.lineWidth); //1
console.log(ctx.miterLimit); //10
var pos1 = 3, pos2 = 7;
var score1 = 0, score2 = 0;
var isGameOver = false;
var t1,t2;
function checkGameOver(){
if(pos1 === pos2){
if(score1>score2){
alert('玩家 1 赢');
}
else{
alert('玩家 2 赢');
}
isGameOver = true;
}
}
function mod8(n) {
return (8+n)%8;
}
var current,end,user;
function setCurrentEnd(n) {
current = mod8(n + 1);
current = current===0?8:current;
end = n;
}
function draw(){
// 每次绘制前先清屏
ctx.clearRect(0,0,200,200);
// 初始样式
ctx.strokeStyle = 'rgb(237,230,218)';
ctx.lineWidth = 20;
ctx.shadowBlur=0;
// 画整个圆弧
ctx.beginPath();
ctx.arc(100, 100, 90, 0, Math.PI*2, false);
ctx.stroke();
ctx.lineCap = 'round';
ctx.shadowBlur=1;
ctx.shadowColor="black";
//画6个 1/8 圆弧
for(var i=0;i<7;i++){
if(i===3){
continue;
}
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI * (i/4), Math.PI * ((i+1)/4), false);
ctx.stroke();
}
// 玩家变量
// 玩家1
function draw1(c){
ctx.strokeStyle = 'rgb(237,156,82)';
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI * (c/4), Math.PI * (mod8(c+1)/4), false);
ctx.stroke();
}
// 玩家2
function draw2(c){
ctx.strokeStyle = 'rgb(36,60,79)';
ctx.beginPath();
ctx.arc(100, 100, 90, Math.PI * (c/4), Math.PI * (mod8(c+1)/4), false);
ctx.stroke();
}
if(user===1){
draw2(pos2);
draw1(current);
}
else if(user===2){
draw1(pos1);
draw2(current);
}
else{
draw1(pos1);
draw2(pos2);
}
if(current > end){
current = parseFloat((current - 0.05).toFixed(3));
requestAnimationFrame(draw);
}
}
draw();
document.getElementById('player1').onclick = function () {
if(isGameOver){
return;
}
if(t1){
clearTimeout(t1);
}
score1++;
pos1 = mod8(pos1-1);
setCurrentEnd(pos1);
user = 1;
draw();
t1 = setTimeout(checkGameOver,700);
};
document.getElementById('player2').onclick = function () {
if(isGameOver){
return;
}
if(t2){
clearTimeout(t2);
}
score2++;
pos2 = mod8(pos2-1);
setCurrentEnd(pos2);
user = 2;
draw();
t2 = setTimeout(checkGameOver,700);
};
</script>
</body>
</html>
01-19
04-24
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交