285
社区成员
发帖
与我相关
我的任务
分享EE308 LAB2-2
Catolgue
- Brief Introduction
- Analysis of Difficulties
- Description of difficulty
- What attempts have been made
- Whether the difficulty is solved
- What have you learned
- Implementation of Code
- Dices
- Rank of Bobing
- Establishment of account
- PSP Table
- Learning Progress Bar
- Vedio Demo
- Paired Word
- Summary
Brief Introduction
| The Link Your Class | https://bbs.csdn.net/forums/MUEE308FZU202201 |
|---|---|
| The Link of Requirement of This Assignment | https://bbs.csdn.net/topics/608859318(https://bbs.csdn.net/topics/608859318) |
| MU STU ID and FZU STU ID | 20123922_832002121 |
| Teammate's MU STU ID and FZU STU ID | 20121920_832002111 |
| Teammate's blog link | https://bbs.csdn.net/topics/609203097 |
| GitHub link | https://github.com/shuying0409/EE308LAB2-2 |
| Video demo link | https://www.bilibili.com/video/BV1ZD4y1W7Js/?vd_source=8b353f9d3fdcbc30cf9444d89fb335ba |
Analysis of Difficulties
Description of difficulty
1. More beautiful 3D random transformation of the dice.
2. Transform the obtained results into pokie levels.
3. Record the results of pokies.
4. Implement offline multiplayer game recording by entering the number of multiplayer players.
5. Implement online multiplayer games.
What attempts have been made
1. Set each side of the dice and set the angle at which the dice should be turned when different results are obtained.
2. Judge the pokies mainly based on the number of 4 points, then the number of 1s and 6s, and finally look at the number of duplicate points.
3. Store all the pokies results and display them.
4. Display the results of pokies separately according to the number of people entered.
5. Add multiple people from the same platform to the same room and synchronize the information through the cloud database.
Whether the difficulty is solved
YES
1. implement the dice according to the random number of 3D rotation function.
2. Judgment of the obtained sieve results according to the rules of pokies.
3.Stores accounts through local storage.
NO
1. In the project of recording history results, I used the method of local storage, but finally did not implement the output; and after replacing the function of displaying the array, it still did not display properly. In the end I did not implement this aspect of the function.
2. For the function of multiplayer online, there is no extra time to learn the knowledge related to cloud database.
What have you learned
1. Learned how to use css for simple rendering of html.
2. Learned how to use JavaScript functions to increase the functionality of html.
Implementation of Code
Dices
This part is the html file of the dice.
<div class="dice1">
<div class="face">
<div class="item1"></div>
</div>
<div class="face">
<div class="item2"></div>
<div class="item2"></div>
</div>
<div class="face">
<div class="item3"></div>
<div class="item3"></div>
<div class="item3"></div>
</div>
<div class="face">
<div class="face_0">
<div class="item4"></div>
<div class="item4"></div>
</div>
<div class="face_0">
<div class="item4"></div>
<div class="item4"></div>
</div>
</div>
<div class="face">
<div class="face_0">
<div class="item5"></div>
<div class="item5"></div>
</div>
<div class="face_0">
<div class="item5"></div>
</div>
<div class="face_0">
<div class="item5"></div>
<div class="item5"></div>
</div>
</div>
<div class="face">
<div class="face_0">
<div class="item6"></div>
<div class="item6"></div>
</div>
<div class="face_0">
<div class="item6"></div>
<div class="item6"></div>
</div>
<div class="face_0">
<div class="item6"></div>
<div class="item6"></div>
</div>
</div>
</div>
This part is the css file of the dice.
@keyframes rotate {
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes domo{
20%{
transform: rotateX(20deg);
}
60%{
transform: rotateX(20deg) rotateY(200deg);
}
100%{
transform: rotateX(100deg) rotateY(1000deg) rotateZ(-100deg);
}
}
.dice1 {
width: 30px;
height: 30px;
margin: 10px auto 20px;
position: absolute;
left:552px;
top:273px;
transform-style: preserve-3d;
/* animation: rotate 2s; */
animation-duration: 1s;
animation-timing-function: linear;
transition: all 1s;
}
.dice1:hover{
animation: domo 3s linear 0s infinite alternate;
}
.dice1 .face {
width: 100%;
height: 100%;
display: flex;
position: absolute;
left: 0;
top: 0;
border: 0.1px solid #000;
background: rgb(253, 250, 250);
border-radius: 5px;
font-size: 10px;
color: #fff;
line-height: 30px;
text-align: center;
}
.item1{
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
}
.item2{
width: 7.5px;
height: 7.5px;
background: #000;
border-radius: 50%;
}
.item3{
width: 7.5px;
height: 7.5px;
background: #000;
border-radius: 50%;
}
.item4{
width: 7.5px;
height: 7.5px;
background: red;
border-radius: 50%;
}
.item5{
width: 7.5px;
height: 7.5px;
background: #000;
border-radius: 50%;
}
.item6{
width: 7.5px;
height: 7.5px;
background: #000;
border-radius: 50%;
}
.face:nth-child(1) {
justify-content: center;
align-items: center;
transform: translateZ(15px);
}
.face:nth-child(2) {
justify-content: space-around;
align-items: center;
transform: rotateX(-90deg) translateZ(15px);
}
.face:nth-child(3) {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
transform: rotateY(90deg) translateZ(15px);
}
.face:nth-child(4) {
flex-wrap: wrap;
justify-content: center;
align-items: center;
transform: rotateY(-90deg) translateZ(15px);
}
.face:nth-child(4) .face_0{
width: 30px;
height: 7.5px;
display: flex;
justify-content: space-around;
}
.face:nth-child(5) {
flex-wrap: wrap;
justify-content: center;
align-items: center;
transform: rotateX(90deg) translateZ(15px);
}
.face:nth-child(5) .face_0{
width: 30px;
height: 7.5px;
display: flex;
justify-content: space-around;
}
.face:nth-child(6) {
flex-wrap: wrap;
justify-content: center;
align-items: center;
transform: translateZ(-15px);
}
.face:nth-child(6) .face_0{
width: 30px;
height: 7.5px;
display: flex;
justify-content: space-around;
}
.back{
background: url(https://img-community.csdnimg.cn/images/5e3bdacafcf84f0f8984d3eb6da33d73.jpg);
background-size: 1140px 699px;
background-position: 50% 0;
}
p {
text-align: center;
}
This part is the JavaScript file for the dice.
// 骰子转起来
// 有的时候浏览器在连续使用js操作css的时候会出现问题（反应不过来），比如，效果不能正常显示，此时可以尝试利用setTimeout-0来将目标代码放入到异步队列中等待执行
// setTimeout(() => {
odice1.style.animationName = 'rotate'
odice2.style.animationName = 'rotate'
odice3.style.animationName = 'rotate'
odice4.style.animationName = 'rotate'
odice5.style.animationName = 'rotate'
odice6.style.animationName = 'rotate'
// }, 0);
// 存储当前随机数组
var NumberArr = [];
var a = Math.floor(Math.random() * 6),
b = Math.floor(Math.random() * 6),
c = Math.floor(Math.random() * 6),
d = Math.floor(Math.random() * 6),
e = Math.floor(Math.random() * 6),
f = Math.floor(Math.random() * 6);
// 当骰子动画执行后
odice1.addEventListener('webkitAnimationEnd', () => {
odice1.style.animationName = 'none' // 更改动画属性，以待下一次动画的正常执行
// 可能出现的情况集合
let _posible = [
{ value: 1, x: 0, y: 0 },
{ value: 6, x: 0, y: 180 },
{ value: 3, x: 0, y: -90 },
{ value: 4, x: 0, y: 90 },
{ value: 5, x: -90, y: 0 },
{ value: 2, x: 90, y: 0 },
]
// 准备抽取的随机数
// 抽取的随机结果
let _result1 = _posible[a]
setTimeout(() => { // 浏览器反应不过来加过渡
// 让骰子旋转到正确的角度
odice1.style.transform = `
rotateX(${ _result1.x }deg) rotateY(${ _result1.y }deg)
`
}, 0);
})
Rank of Bobing
This part is the js file to determine the level of the bobing.
NumberArr.push(a, b, c, d, e, f);
NumberArr.sort();
// 等级划分
var level = {
one: '状元插金花', //4个4+2个1
two: '六杯花', //6个4
three: '六杯黑', //6个6
four: '五王', //5个4
five: '五子登科', //5个相同的
six: '状元', //4个4
seven: '对堂', //1，2，3，4，5，6
eight: '三红', //3个4
nine: '四进', //4个相同的
ten: '二举', //2个4
elevent: '一秀', //1个4
twelve: '无'
},
this_level; // 存储当前等级
var first = 1-resultArr[0]-resultArr[1]-resultArr[2]-resultArr[3]-resultArr[4]-resultArr[5]
var second = 2-resultArr[6]
var thrid = 4-resultArr[7]
var forth = 8-resultArr[8]
var fifth = 16-resultArr[9]
var sixth = 32-resultArr[10]
//存储当前 “四” 的个数
var isfour = 0;
for (var i = 0; i < NumberArr.length; i++) {
if (NumberArr[i] == 3) {
isfour = isfour + 1;
}
}
//存储当前 “六” 的个数
var issix = 0;
for (var i = 0; i < NumberArr.length; i++) {
if (NumberArr[i] == 1) {
issix = issix + 1;
}
}
// 判断 “四” 的个数属于哪一等级;
switch (isfour) {
case 1:
for (var i = 0; i < NumberArr.length; i++) {
//存储当前相同的数量，判断是否为四进
var ContrastArr = [];
for (var j = 0; j < NumberArr.length; j++) {
if (NumberArr[i] == NumberArr[j]) {
ContrastArr.push(NumberArr[j]);
}
}
}
// 等到上面遍历执行完再进行判断属于哪个级别
if (ContrastArr.length === 4) {
if(forth >= 0){
this_level = level.nine; //四进
resultArr[8] += 1;
}else{
this_level = level.twelve;
}
break;
} else if (ContrastArr.length === 5) {
if(first >= 0){
this_level = level.five; //五子登科
resultArr[4] += 1;
}else{
this_level = level.twelve;
}
break;
} else {
// 判断一下，是 "对堂"" or ”一秀“，对堂就是顺子，123456，一秀就是一个只有4；
var isContinuityArray = false;
var array = NumberArr;
var arrayCount = array.length;
for (var i = 0; i < arrayCount; i++) {
var currentArr = Number(array[i]) + 1;
var nestArr = Number(array[i + 1]);
if (i + 1 == arrayCount) {
currentArr = Number(array[i]);
nestArr = Number(array[i]);
}
if (currentArr != nestArr) {
isContinuityArray = false;
break;
} else {
isContinuityArray = true;
}
}
if (isContinuityArray) {
if(second >= 0){
this_level = level.seven; // 对堂
resultArr[6] += 1;
}else{
this_level = level.twelve;
}
break;
} else {
if(sixth >= 0){
this_level = level.elevent; //一秀
resultArr[10] += 1;
}else{
this_level = level.twelve;
}
break;
}
};
break;
case 2:
for (var i = 0; i < NumberArr.length; i++) {
var ContrastArr = [];
for (var j = 0; j < NumberArr.length; j++) {
if (NumberArr[i] == NumberArr[j]) {
ContrastArr.push(NumberArr[j]);
}
}
}
// 判断是 四进 or 二举
if (ContrastArr.length === 4) {
if(forth >= 0){
this_level = level.nine; //四进
resultArr[8] += 1;
}else{
this_level = level.twelve;
}
break;
} else {
if(fifth < 17){
this_level = level.ten; //二举
resultArr[9] += 1;
}else{
this_level = level.twelve;
}
break;
}
break;
case 3:
if(thrid >= 0){
this_level = level.eight; //三红
resultArr[7] += 1;
}else{
this_level = level.twelve;
}
break;
case 4:
// 判断是 "普通状元" or "状元插金花"，普通就是4个四，插金花就是 4个四 + 2个1 ；
var one = 0;
for (var i = 0; i < NumberArr.length; i++) {
if (NumberArr[i] === 0) {
one = one + 1;
}
}
if (one == 2) {
if(first >= 0){
this_level = level.one; // 插金花
resultArr[0] += 1;
}else{
this_level = level.twelve;
}
} else {
if(first >= 0){
this_level = level.six; //普通状元
resultArr[5] += 1;
}else{
this_level = level.twelve;
}
}
break;
case 5:
if(first >= 0){
this_level = level.four; // 五王
resultArr[3] += 1;
}else{
this_level = level.twelve;
}
break;
case 6:
if(first >= 0){
this_level = level.two; //六杯花
resultArr[1] += 1;
}else{
this_level = level.twelve;
}
break;
default:
// 就是页面都没有四,来判断是否属于 “五子” 和 “六子” 和 “四进” 中的哪一种;
for (var i = 0; i < NumberArr.length; i++) {
var ContrastArr = [];
for (var j = 0; j < NumberArr.length; j++) {
if (NumberArr[i] == NumberArr[j]) {
ContrastArr.push(NumberArr[j]);
}
}
if (ContrastArr.length === 4) {
if(forth >= 0){
this_level = level.nine; //四进
resultArr[8] += 1;
}else{
this_level = level.twelve;
}
break;
} else if (ContrastArr.length === 5) {
if(first >= 0){
this_level = level.five; //五子登科
resultArr[4] += 1;
}else{
this_level = level.twelve;
}
break;
} else if (ContrastArr.length === 6 && issix == 6) {
if(first >= 0){
this_level = level.three; //六杯黑
resultArr[2] += 1;
}else{
this_level = level.twelve;
}
break;
} else {
this_level = level.twelve; //无
}
};
break;
}
arr[clock] = '     The result of ' + (clock+1) + ' round is : ' + this_level + "<br/>";
clock += 1;
//oview1.innerHTML = 'The result of this round is : ' + this_level + "<br/>";
//oview1.innerHTML = clock; //OK
oview1.innerHTML = "";
for(var i = 0; i < clock; i++){
oview1.innerHTML += arr[i];
}
//Statistics on the results you get
oview2.innerHTML = "     Statistics on the results you get<br/>     状元插金花: " + resultArr[0]
+ "<br/>     六杯花: " + resultArr[1]
+ "<br/>     六杯黑: " + resultArr[2]
+ "<br/>     五王: " + resultArr[3]
+ "<br/>     五子登科: " + resultArr[4]
+ "<br/>     普通状元: " + resultArr[5]
+ "<br/>     对堂: " + resultArr[6]
+ "<br/>     三红: " + resultArr[7]
+ "<br/>     四进: " + resultArr[8]
+ "<br/>     二举: " + resultArr[9]
+ "<br/>     一秀: " + resultArr[10];
//Statistics on remaining result
oview3.innerHTML = "     Statistics on reminding results<br/>     状元: " + first
+ "<br/>     对堂: " + second
+ "<br/>     三红: " + thrid
+ "<br/>     四进: " + forth
+ "<br/>     二举: " + fifth
+ "<br/>     一秀: " + sixth;
Establishment of account
Log in
var aInputs = document.getElementsByTagName('input');
var db = openDatabase('lsy', '1.0', 'user', '1024*1024');
db.transaction(function(contex) {
contex.executeSql('create table if not exists userinf(id integer primary key AutoIncrement,name,password)');
});
var oBtn = document.getElementById('confirm');
var blogin = true;
oBtn.onclick = function() {
if (aInputs[0].value && aInputs[1].value) {
db.transaction(function(contex) {
contex.executeSql('select * from userinf', [], function(con, data) {
var leg = data.rows.length,
i;
for (var i = 0; i < leg; i++) {
if (aInputs[0].value == data.rows.item(i).name && aInputs[1].value == data.rows.item(i).password) {
blogin = false;
break;
}
}
if (blogin) {
alert('Please enter the correct account number and password!');
} else {
alert('Login success!');
window.location.href='file:///E:/lsyvscode/bobing/startpage.html';
}
});
});
} else {
alert('Please fill in the full account password!');
}
}
Registation
var aInputs = document.getElementsByTagName('input');
var db = openDatabase('lsy', '1.0', 'user', '1024*1024');
db.transaction(function(contex) {
contex.executeSql('create table if not exists userinf(id unique,name,password)');
});
var oBtn = document.getElementById('confirm');
var num = 0;
oBtn.onclick = function() {
if (aInputs[0].value && aInputs[1].value) {
db.transaction(function(contex) {
contex.executeSql('select * from userinf', [], function(con, data) {
var leg = data.rows.length,
i;
for (var i = 0; i < leg; i++) {
if (aInputs[0].value == data.rows.item(i).name) {
alert('The user name has been registered!');
return;
}
}
num =leg +1;
});
contex.executeSql('insert into userinf(id,name,password) values("' + num + '","' + aInputs[0].value + '","' + aInputs[1].value + '")');
alert('Registration succeeded');
window.location.href='file:///E:/lsyvscode/bobing/account.html';
});
} else {
alert('Please fill in the complete account password!');
}
}
PSP Table
| PSP | Estimated Time/(min) | Actual Time/(min) |
|---|---|---|
| Planning | - | - |
| Estimating | 60 | 60 |
| Development | - | - |
| Analysis | 120 | 100 |
| Coding | 1800 | 2000 |
| Design | 200 | 180 |
| Code review | 600 | 720 |
| Test | 60 | 60 |
| Reporting | - | - |
| GitHub | 60 | 60 |
| CSDN Blog | 60 | 60 |
| Improvement | 40 | 30 |
| Total | 3000 | 3270 |
Learning Progress Bar
| nth Week | New code (line) | Cumulative codes (lines) | Study hours spent this week (hours) | Cumulative study time spent (hours) | Important Learning Growth |
|---|---|---|---|---|---|
| 1 | 300 | 3300 | 30 | 30 | Basic knowledge of html, css and JavaScript |
| 2 | 1000 | 4300 | 30 | 70 | Realization of functions |
| 3 | 500 | 4800 | 15 | 85 | Recording function |
Vedio Demo
Paired Word
Summary
After this assignment for the BOBING game, I learned some knowledge related to front-end production. After that, with my efforts, I completed the basic single and multiplayer functions, and added the account registration function based on the local database, which provided the basis for implementing online multiplayer games afterwards. Since I didn't have enough time to learn and didn't have any previous knowledge about database, I didn't finish the online multiplayer game in the end, but I will continue to improve it afterwards.
...全文
请发表友善的回复…
发表回复
