<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dice Game</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<style>
body {
background-color : #020333;
}
@keyframes firework-animation {
0% {background-color : #ff8426;}
25% {background-color : #fffc84;}
50% {background-color : #ff83f4;}
75% {background-color : #83b6ff;}
100% {background-color : #ff8426;}
}
@-webkit-keyframes firework-animation {
0% {background-color : #ff8426;}
25% {background-color : #fffc84;}
50% {background-color : #ff83f4;}
75% {background-color : #83b6ff;}
100% {background-color : #ff8426;}
}
@keyframes firework-seed-animation {
0% {background-color : #ff8426;}
25% {background-color : #fffc84;}
100% {background-color : #ff8426;}
}
@-webkit-keyframes firework-seed-animation {
0% {background-color : #ff8426;}
25% {background-color : #fffc84;}
100% {background-color : #ff8426;}
}
@keyframes firework-fade-animation {
0% {opacity : 1;}
50% {opacity : 1;}
100% {opacity : 0;}
}
@-webkit-keyframes firework-fade-animation {
0% {opacity : 1;}
50% {opacity : 1;}
100% {opacity : 0;}
}
.fireWorkBatch {
z-index : 999;
position: absolute;
top : 0px;
left : 0px;
animation-name : firework-fade-animation;
animation-timing-function : cubic-bezier(0.5, 0, 1. 1);
animation-duration : 2.5s;
}
.fireWorkParticle {
z-index : 999;
position: absolute;
height : 5px;
width : 5px;
border-radius : 2.5px;
animation-name : firework-animation;
animation-timing-function : linear;
animation-duration : 1s;
animation-iteration-count : infinite;
}
.fireWorkSeed {
z-index : 999;
position: absolute;
height : 5px;
width : 5px;
border-radius : 5px;
animation-name : firework-seed-animation;
animation-timing-function : linear;
animation-duration : 0.5s;
animation-iteration-count : infinite;
}
</style>
</head>
<body>
<div id = "board"></div>
<br><br>
<div class="main" style="background-color: #3b3b3b">
<center>
<div class = "fireWorkParticle"></div>
<h1>Let's Play!</h1>
<div class="container">
<div class="row">
<div id="dice1" class="col-lg-6 col-md-6 col-sm-12">
<h2 style="color: yellow;">Player 1</h2>
<img id="img1" src="images/dice1.png" height="200px" width="200px">
</div>
<div id="dice1" class="col-lg-6 col-md-6 col-sm-12">
<h2 style="color: rgb(71, 252, 26);">Player 2</h2>
<img id="img2" src="images/dice1.png" height="200px" width="200px">
</div>
</div>
</div>
<button class="button btn btn-outline-success btn-lg" onClick="rollDice();">Play On</button>
<h4>Player with greater dice score wins</h4><br>
</center>
</div>
<center>
<div class="container">
<h1 id="header">Refresh Me</h1>
<button class="button btn btn-outline-success btn-lg">Celebrate</button>
</div>
</center>
<script src="dice.js"></script>
</body>
<script>
var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));
seeds = [];
particles = [];
const fwkPtcIniV = 0.5;
const fwkSedIniV = 0.5;
const fwkPtcIniT = 2500;
const fwkSedIniT = 1000;
const a = 0.0005;
const g = 0.0005;
const v = 0.3;
const cursorXOffset = 5;
const cursorYOffset = 0;
function newFireworkParticle(x, y, angle)
{
var fwkPtc = document.createElement("DIV");
fwkPtc.setAttribute('class', 'fireWorkParticle');
fwkPtc.time = fwkPtcIniT;
while(angle > 360)
angle -= 360;
while(angle < 0)
angle += 360;
fwkPtc.velocity = [];
if(angle > 270)
{
fwkPtc.velocity.x = fwkPtcIniV * Math.sin(angle * Math.PI / 180) * (1 - Math.random() * v);
fwkPtc.velocity.y = fwkPtcIniV * Math.cos(angle * Math.PI / 180) * (1 - Math.random() * v);
}
else if(angle > 180)
{
fwkPtc.velocity.x = fwkPtcIniV * Math.sin(angle * Math.PI / 180) * (1 - Math.random() * v);
fwkPtc.velocity.y = fwkPtcIniV * Math.cos(angle * Math.PI / 180) * (1 - Math.random() * v);
}
else if(angle > 90)
{
fwkPtc.velocity.x = fwkPtcIniV * Math.sin(angle * Math.PI / 180) * (1 - Math.random() * v);
fwkPtc.velocity.y = fwkPtcIniV * Math.cos(angle * Math.PI / 180) * (1 - Math.random() * v);
}
else
{
fwkPtc.velocity.x = fwkPtcIniV * Math.sin(angle * Math.PI / 180) * (1 - Math.random() * v);
fwkPtc.velocity.y = fwkPtcIniV * Math.cos(angle * Math.PI / 180) * (1 - Math.random() * v);
}
fwkPtc.position = [];
fwkPtc.position.x = x;
fwkPtc.position.y = y;
fwkPtc.style.left = fwkPtc.position.x + 'px';
fwkPtc.style.top = fwkPtc.position.y + 'px';
if(particles == null)
particles = [];
particles.push(fwkPtc);
return fwkPtc;
}
document.addEventListener("click", newFireWorkOnClick);
function newFireWorkOnClick(event)
{
newFireworkSeed(event.pageX - brd.offsetLeft + cursorXOffset, event.pageY - brd.offsetTop + cursorYOffset);
}
function newFireworkSeed(x, y)
{
var fwkSed = document.createElement("DIV");
fwkSed.setAttribute('class', 'fireWorkSeed');
brd.appendChild(fwkSed);
fwkSed.time = fwkSedIniT;
fwkSed.velocity = [];
fwkSed.velocity.x = 0;
fwkSed.velocity.y = fwkSedIniV;
fwkSed.position = [];
fwkSed.position.x = x;
fwkSed.position.y = y;
fwkSed.style.left = fwkSed.position.x + 'px';
fwkSed.style.top = fwkSed.position.y + 'px';
if(seeds == null)
seeds = [];
seeds.push(fwkSed);
return fwkSed;
}
function newFireWorkStar(x, y)
{
var fwkBch = document.createElement("DIV");
fwkBch.setAttribute('class', 'fireWorkBatch');
var a = 0;
while(a < 360)
{
var fwkPtc = newFireworkParticle(x, y, a);
fwkBch.appendChild(fwkPtc);
a += 5;
}
brd.appendChild(fwkBch);
}
var before = Date.now();
var id = setInterval(frame, 5);
function frame()
{
var current = Date.now();
var deltaTime = current - before;
before = current;
for(i in seeds)
{
var fwkSed = seeds[i];
fwkSed.time -= deltaTime;
if(fwkSed.time > 0)
{
fwkSed.velocity.x -= fwkSed.velocity.x * a * deltaTime;
fwkSed.velocity.y -= g * deltaTime + fwkSed.velocity.y * a * deltaTime;
fwkSed.position.x += fwkSed.velocity.x * deltaTime;
fwkSed.position.y -= fwkSed.velocity.y * deltaTime;
fwkSed.style.left = fwkSed.position.x + 'px';
fwkSed.style.top = fwkSed.position.y + 'px';
}
else
{
newFireWorkStar(fwkSed.position.x, fwkSed.position.y);
fwkSed.parentNode.removeChild(fwkSed);
seeds.splice(i, 1);
}
}
for(i in particles)
{
var fwkPtc = particles[i];
fwkPtc.time -= deltaTime;
if(fwkPtc.time > 0)
{
fwkPtc.velocity.x -= fwkPtc.velocity.x * a * deltaTime;
fwkPtc.velocity.y -= g * deltaTime + fwkPtc.velocity.y * a * deltaTime;
fwkPtc.position.x += fwkPtc.velocity.x * deltaTime;
fwkPtc.position.y -= fwkPtc.velocity.y * deltaTime;
fwkPtc.style.left = fwkPtc.position.x + 'px';
fwkPtc.style.top = fwkPtc.position.y + 'px';
}
else
{
fwkPtc.parentNode.removeChild(fwkPtc);
particles.splice(i, 1);
}
}
}
</script>
</html>
基于网页的双人骰子游戏
需积分: 0 45 浏览量
2024-03-30
17:34:28
上传
评论
收藏 353KB ZIP 举报
Dice-Game-master.zip （23个子文件） 
Dice-Game-master 
style.css 377B dice.js 2KB css bootstrap-grid.css.map 154KB bootstrap.min.css 156KB bootstrap-grid.css 66KB bootstrap-grid.min.css.map 112KB bootstrap-reboot.min.css.map 32KB bootstrap.css.map 493KB bootstrap.css 193KB bootstrap-reboot.css 5KB bootstrap-reboot.css.map 76KB bootstrap-grid.min.css 50KB bootstrap.min.css.map 627KB bootstrap-reboot.min.css 4KB CODE_OF_CONDUCT.md 4KB
dicee.html 8KB .gitignore 1003B images 
dice2.png 2KB dice4.png 3KB dice1.png 2KB dice6.png 3KB dice5.png 3KB dice3.png 2KB资源评论
