JavaScript扭蛋机代码
时间: 2023-07-02 15:04:57 浏览: 74
以下是一个简单的 JavaScript 扭蛋机代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>扭蛋机</title>
<script>
function twist() {
var result = Math.floor(Math.random() * 100) + 1;
if(result <= 10) {
alert("恭喜你获得了超级稀有扭蛋!");
} else if(result <= 30) {
alert("恭喜你获得了稀有扭蛋!");
} else {
alert("很遗憾,你只获得了普通扭蛋。");
}
}
</script>
</head>
<body>
<h1>扭蛋机</h1>
<p>点击下面的按钮扭蛋:</p>
<button onclick="twist()">扭蛋</button>
</body>
</html>
```
这个代码定义了一个名为 `twist` 的函数,用于模拟扭蛋的过程。当用户点击页面上的“扭蛋”按钮时,该函数会生成一个随机数,并根据随机数的大小提示用户获得了哪种类型的扭蛋。在这个例子中,有10%的概率获得超级稀有扭蛋,20%的概率获得稀有扭蛋,其余70%的概率只能获得普通扭蛋。
相关问题
扭蛋机代码c语言
以下是一个简单的扭蛋机代码示例,使用C语言编写:
```c
#include <stdio.h>
#include <stdlib.h>
#include <time.h>
int main()
{
int token = 0; // 花费代币数
int prize; // 中奖号码
int input; // 用户输入
srand(time(NULL)); // 初始化随机数生成器
printf("欢迎来到扭蛋机!\n");
printf("每次扭蛋需要花费1个代币。\n");
printf("请输入您要购买的代币数量:");
scanf("%d", &token);
printf("您已经购买了%d个代币。\n", token);
printf("请开始扭蛋!\n");
while (token > 0)
{
printf("请输入一个数字(1-10):");
scanf("%d", &input);
if (input < 1 || input > 10) {
printf("无效的数字!\n");
continue;
}
prize = rand() % 10 + 1; // 生成1-10的随机数
if (input == prize) {
printf("恭喜您中奖了!\n");
break;
} else {
printf("很遗憾,没有中奖。\n");
token--; // 扣除一个代币
}
}
if (token <= 0) {
printf("代币用完了,游戏结束。\n");
}
return 0;
}
```
该代码实现了一个简单的扭蛋机游戏,用户需要输入购买代币数,然后开始不断输入数字进行扭蛋,直到中奖或者代币用完为止。中奖的数字是随机生成的。
JavaScript与css扭蛋机动画代码
以下是一个简单的 JavaScript 和 CSS 扭蛋机动画代码示例:
HTML 代码:
```
<div class="container">
<div class="machine">
<div class="capsule"></div>
</div>
<button class="btn">抽奖</button>
</div>
```
CSS 代码:
```
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.machine {
position: relative;
width: 200px;
height: 300px;
background-color: #ccc;
border-radius: 10px;
overflow: hidden;
}
.capsule {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
animation: drop 2s ease-in-out forwards;
}
@keyframes drop {
0% {
top: -100%;
}
50% {
top: 50%;
}
100% {
top: 100%;
}
}
.btn {
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
```
JavaScript 代码:
```
const btn = document.querySelector('.btn');
const machine = document.querySelector('.machine');
function startAnimation() {
machine.innerHTML = '<div class="capsule"></div>';
}
btn.addEventListener('click', startAnimation);
```
点击“抽奖”按钮会触发 `startAnimation()` 函数,该函数会将扭蛋机容器中的内容清空,然后插入一个新的扭蛋动画元素。CSS 中的 `drop` 动画会使该元素从顶部掉落到底部。