从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

2023-12-18 18:59
文章标签 实现 使用 手把手 js 游戏 从零开始 frontend css3 原生 幸运 水果机

本文主要是介绍从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目体验地址
免费视频教程

游戏介绍

幸运水果机是一款街机游戏，游戏界面由24个方格拼接成一个正方形，每个方格中都有一个不同的水果图形，方格下都有一个小灯。玩家使用游戏币选择希望押注的目标，按下开始后，小灯开始绕着正方形中每个格子转。当小灯停下时，如果停在玩家押注的目标上则可赢取相应的游戏币。

物品：游戏中的物品有八种，分别为：苹果、西瓜、木瓜、橙子、铃铛、77、双星，这些物品又分为大小两种。还有BAR图标，分为2种。

赔率：以下为所有固定赔率物品的赔率。·所有其他小的物品（小77、小星星、小西瓜、小铃铛、小木瓜、小橙子） 1：2
苹果 1：5·橙子 1：10·木瓜 1：15·铃铛 1：20·西瓜 1：20·双星 1：30·77 1：40·小BAR 1：25·中BAR 1：50·大BAR 1：100

当玩家中奖之后，玩家点击“开始”按钮为收分，再次点击“开始”按钮为按照上一次押注再次进行游戏。如果玩家要重新押注，在押注物品上直接押注即可。在押注的同时会将中奖的金额收入“当前余额”区中。

如果玩家没有中奖，则玩家点击“开始”按钮为按照上一次押注再次进行游戏。

在线体验

在线体验

课程目标

我们使用原生JS+CSS3，来开发一个集趣味性与技术性于一体的H5小游戏，项目使用到了以下知识点：

  • CSS：盒子模型，定位，浮动，CSS3的Flex弹性盒模型，图片背景，CSS3选择器…
  • JS：json，map，定时器，随机数，dom操作，模板字符串…

读者对象

学习本课程的同学，了解一点HTML/CSS/JS基础知识即可，我们会就地讲解项目中用到的css，js基础知识点，先举一些小的示例，来阐明知识点的用法，再说明如何在本项目中应用，应用在哪块功能的实现上。比如标准文档流，定位，浮动，盒子模型，CSS3弹性盒子，CSS3高级选择器，背景图片，json，map，定时器，随机数，dom操作，模板字符串，是综合运用前端基础知识的当前互联网上少见优秀综合案例。

幸运水果机之原生js实现

1. 安装vscode插件Live Server

2. 水果机轮盘界面设计

2.1 轮盘界面设计之基本方格

demo1.html

<body><ul><li>苹果</li><li>香蕉</li><li>桔子</li><li>苹果</li><li>香蕉</li><li>桔子</li></ul>
</body>

    li{border: 1px solid red;list-style: none;width: 50px;height: 50px;text-align: center;line-height: 50px;}

运行效果

可以看到每个li独占一行，因为li是块级元素，必须使li脱离标准文档流，才能水平排布。

标准文档流

标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。

一般在HTML元素分为两种：块级元素和行内元素。像div,p,ul,li这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；

行内元素是在一行中水平布置，从左到右的排列；span,strong,a等属于行内元素。

2.2 绝对定位VS相对定位

demo2.html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{border: 1px solid red;height: 500px;padding: 0;position: relative;}li{border: 1px solid red;list-style: none;width: 50px;height: 50px;text-align: center;line-height: 50px;position: absolute;top: 20px;left: 50px;}</style>
</head>
<body><ul><li>苹果</li></ul>
</body>
</html>

运行效果

2.3 内部样式

demo3.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;}</style>
</head>
<body>
<ul><li style="left:0px;top:0px;">苹果</li><li style="left:50px;top:0px;">苹果</li><li style="left:100px;top:0px;">苹果</li><li style="left:150px;top:0px;">苹果</li><li style="left:200px;top:0px;">苹果</li><li style="left:250px;top:0px;">苹果</li><li style="left:300px;top:0px;">苹果</li><li style="left:300px;top:50px;">苹果</li><li style="left:300px;top:100px;">苹果</li><li style="left:300px;top:150px;">苹果</li><li style="left:300px;top:200px;">苹果</li><li style="left:300px;top:250px;">苹果</li><li style="left:300px;top:300px;">苹果</li><li style="left:250px;top:300px;">苹果</li><li style="left:200px;top:300px;">苹果</li><li style="left:150px;top:300px;">苹果</li><li style="left:100px;top:300px;">苹果</li><li style="left:50px;top:300px;">苹果</li><li style="left:0px;top:300px;">苹果</li><li style="left:0px;top:250px;">苹果</li><li style="left:0px;top:200px;">苹果</li><li style="left:0px;top:150px;">苹果</li><li style="left:0px;top:100px;">苹果</li><li style="left:0px;top:50px;">苹果</li></ul>
</body>
</html>

效果：

2.4 背景图片

demo4.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;/* position: absolute; *//*background-image: url("images/77.png");*/background-size: contain;/*left:0px;*//*top:0px;*/}</style>
</head>
<body>
<ul><li style="background-image: url('images/77.png')"></li>
</ul>
</body>
</html>

效果：

2.5 综合在一起
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;background-size: contain;/*left:0px;*//*top:0px;*/}</style>
</head>
<body>
<ul><li style="left:0px;top:0px;background-image: url('images/orange.png');"></li><li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li><li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li><li style="left:150px;top:0px;background-image: url('images/bar.png');"></li><li style="left:200px;top:0px;background-image: url('images/apple.png');"></li><li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li><li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li><li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li><li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li><li style="left:300px;top:150px;background-image: url('images/cha.png');"></li><li style="left:300px;top:200px;background-image: url('images/apple.png');"></li><li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li><li style="left:300px;top:300px;background-image: url('images/orange.png');"></li><li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li><li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li><li style="left:150px;top:300px;background-image: url('images/77.png');"></li><li style="left:100px;top:300px;background-image: url('images/apple.png');"></li><li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li><li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li><li style="left:0px;top:250px;background-image: url('images/star.png');"></li><li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li><li style="left:0px;top:150px;background-image: url('images/cha.png');"></li><li style="left:0px;top:100px;background-image: url('images/apple.png');"></li><li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li></ul>
</body>
</html>

最终效果：

3. 使用原生JS动态生成水果机轮盘

3.1 JS动态创建HTML元素

分2步：
1.创建元素（document.createElement）
2.添加元素（appendChild）

<!DOCTYPE html>
<html><body><div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>let para = document.createElement("p");para.innerText = "这是新段落。";let element = document.getElementById("div1");element.appendChild(para);</script></body></html>

再看一个例子

<!DOCTYPE html>
<html><body><div id="div1"></div><script>let ul = document.createElement('ul')let div = document.getElementById('div1')for (let i = 0; i < 3; i++){let li = document.createElement('li')li.innerText = i;ul.appendChild(li)}div.appendChild(ul)</script></body></html>

3.2 JS控制元素样式

style属性
html文档中的每一个元素都是一个对象,文档的每个元素都有一个属性style。使用JS，通过对象的style属性可以设置元素的任意css样式，看一个例子：

<!DOCTYPE html>
<html><body><div id="div1"><p id="content">helloworld</p></div><script>let p = document.querySelector('p')p.style.color = 'red'p.style.fontSize = '30px'</script></body></html>

3.3 认识JSON

JSON（JavaScriptObject Notation）、采用完全独立于编程语言的文本格式来存储和表示数据。
1、对象
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};

2.数组

var students =  [  {"sno":"001","name":"jack","age":130},  {"sno":"002","name":"tame","age":120},  {"sno":"003","name":"cule","age":110}];

看一个例子：


<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>json</title><script>var imgData={ "name":"图片描述和图片相对路径", "title":"logo图片","url":"logo.png" };console.log( imgData.name );console.log( imgData["name"] );var json1={"name":"这里是一组图片的文字描述和图片相对路径","title":["logo图片","图片1","图片2","图片3"],"url":["logo.png","1.png","2.png","3.png"]};console.log( json1.name);console.log( json1.url  );console.log( json1.url[1] );var json2 ={ "name":"图片描述和图片相对路径","imgData":[{ "name":"图片1", "title":"logo图片1","url":"logo1.png" } ,{ "name":"图片2", "title":"logo图片2","url":"logo2.png" }  ,{ "name":"图片3", "title":"logo图片3","url":"logo3.png" }]};console.log( json2.name );console.log( json2.imgData[0].name );</script></head><body></body>
</html>

3.4 模板字符串
    var name = "Neo";var occupation = "programmer";    //不使用模板字符串拼接var str1 = "He is " + name + ",he is a " + occupation;    //使用模板字符串拼接var str2 = `He is ${name},he is a ${occupation}`;console.log(str1)console.log(str2)
3.5 综合在一起
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;background-size: contain;/*left:0px;*//*top:0px;*/}</style><script>window.onload = function () {var fruits = [{left:'0px',top:'0px',content:'桔子',src:'b_orange.png',score:10},{left:'50px',top:'0px',content:'铃铛',src:'b_alarm.png',score:20},{left:'100px',top:'0px',content:'小BA',src:'s_bar.png',score:50},{left:'150px',top:'0px',content:'BA',src:'b_bar.png',score:100},{left:'200px',top:'0px',content:'苹果',src:'b_apple.png',score:5},{left:'250px',top:'0px',content:'小苹果',src:'s_apple.png',score:2},{left:'300px',top:'0px',content:'椰子',src:'b_coconut.png',score:15},{left:'300px',top:'50px',content:'西瓜',src:'b_watermelons.png',score:25},{left:'300px',top:'100px',content:'小西瓜',src:'s_watermelons.png',score:2},{left:'300px',top:'150px',content:'XX',src:'cha.png',score:0},{left:'300px',top:'200px',content:'苹果',src:'b_apple.png',score:5},{left:'300px',top:'250px',content:'小桔子',src:'s_orange.png',score:2},{left:'300px',top:'300px',content:'桔子',src:'b_orange.png',score:10},{left:'250px',top:'300px',content:'铃铛',src:'b_alarm.png',score:20},{left:'200px',top:'300px',content:'小77',src:'s_77.png',score:2},{left:'150px',top:'300px',content:'77',src:'b_77.png',score:40},{left:'100px',top:'300px',content:'苹果',src:'b_apple.png',score:5},{left:'50px',top:'300px',content:'小椰子',src:'s_coconut.png',score:2},{left:'0px',top:'300px',content:'椰子',src:'b_coconut.png',score:15},{left:'0px',top:'250px',content:'星星',src:'b_star.png',score:30},{left:'0px',top:'200px',content:'小星星',src:'s_star.png',score:2},{left:'0px',top:'150px',content:'XX',src:'cha.png',score:0},{left:'0px',top:'100px',content:'苹果',src:'b_apple.png',score:5},{left:'0px',top:'50px',content:'小铃铛',src:'s_alarm.png',score:2}];var ul = document.getElementById('machine');for(var i = 0; i < fruits.length; i++){//动态的创建li元素var li = document.createElement('li');li.style.left = fruits[i].left;li.style.top = fruits[i].top;li.style.backgroundImage = `url('images/${fruits[i].src}')`;ul.appendChild(li);}}</script>
</head>
<body>
<ul id = 'machine'><!--<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>--><!--<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>--><!--<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>--><!--<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>--><!--<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>--><!--<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>--><!--<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>--><!--<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>--><!--<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>--><!--<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>--><!--<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>--><!--<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>--><!--<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>--><!--<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>--><!--<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>--><!--<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>--><!--<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>--><!--<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>--><!--<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>--><!--<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>--><!--<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>--><!--<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>--><!--<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>--><!--<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>--></ul></body>
</html>

4. 让跑灯跑起来

4.1 JS中的2种定时器
  1. 周期性定时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>
//        setInterval(fun,time)
//        function hello() {
//            console.log('hello');
//        }
//        setInterval(hello, 1000);
//        var timerID = setInterval(fun,time);//返回值就是定时器id
//        //停止定时器
//        clearInterval(timerID);var count = 1;window.onload = function () {var h2 = document.getElementById('count');//启动定时器var timerID = setInterval(function () {h2.innerHTML = count++;if(count == 11){//停止定时器clearInterval(timerID);}},1000);}</script>
</head>
<body>
<h2 id="count">0
</h2>
</body>
</html>


2. 一次性定时器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>window.onload = function () {var count = 1;var h2 = document.getElementById('count');function counter() {h2.innerHTML = count++;if (count < 11) {setTimeout(counter, 1000)}}setTimeout(counter, 1000)}</script>
</head><body><h2 id="count">0</h2>
</body></html>
4.2 JS中的随机数
       var num = Math.random();//0--1之间的数[0,1)console.log(num);//0-10之间的整数var num2 = num*10;var num3 = parseInt(5.69);console.log(num3);var num = parseInt(Math.random()*10);console.log(num);// 30-50之间的整数// 0--20之间的整数+30var num2 = parseInt(Math.random()*20) + 30;console.log(num2);

4.3 CSS中的z-index属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position: relative;}#one{height: 100px;width: 100px;background-color: red ;position: absolute;left:0;top: 0;z-index: 10;}#two{height: 80px;width: 80px;background-color: blue ;position: absolute;left:0;top: 0;z-index: 20;}</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>
4.4 整合在一起

html

<body>
<ul id = 'machine'>
<div id="active"></div>
</ul>
<div id="footer"><div id="msg"></div><button id="btn">开始</button>
</div>
</body>

css

 <style>#footer{width: 500px;margin: 0px auto;}#active{width: 50px;height: 50px;position: absolute;background-color: rgba(255,0,0,0.4);z-index: 1000;left:0;top: 0;display: none;}ul{/*border: 1px solid red;*/position: relative;height: 500px;width: 500px;margin-left: auto;margin-right: auto;}li{width: 50px;height: 50px;border: 1px solid red;list-style: none;text-align: center;line-height: 50px;position: absolute;background-size: contain;/*left:0px;*//*top:0px;*/}</style>

js

 <script>window.onload = function () {//给开始按钮绑定事件处理函数var index = 0;//当前active div应该和哪个下标的水果重合var btn = document.getElementById('btn');btn.onclick = function () {//实现转灯的转动//算出本次需要转动的步数（非固定的），随机的步数//步数又不能太少，至少需要转3圈，加上一个随机的步数（0-20）var step = fruits.length * 3 + parseInt(Math.random()*20);//启动一个定时器，让转灯转动var timerID = setInterval(function () {//让转灯转动一格，行走一步//让隐藏的div显示，改变div的left和top来实现转灯的转动var div = document.getElementById('active');div.style.display = 'block';div.style.left = fruits[index].left;div.style.top = fruits[index].top;step--;if(step == 0)//就应该停止定时器{clearInterval(timerID);var msg = document.getElementById('msg');msg.innerHTML = fruits[index].content + ':' + fruits[index].score;return;}index++;if(index == fruits.length){index=0;}},100);}}</script>
4.5 实现小灯变速旋转
          //给开始按钮绑定事件处理函数var btn = document.getElementById('btn');var index = 0;//当前active div应该和哪个下标的水果重合btn.onclick = function () {//实现转灯的转动//算出本次需要转动的步数（非固定的），随机的步数//步数又不能太少，至少需要转3圈，加上一个随机的步数（0-20）var step = fruits.length * 2 + parseInt(Math.random() * 35);var timerID = 0function turnOneStep() {console.log(step)//让转灯转动一格，行走一步//让隐藏的div显示，改变div的left和top来实现转灯的转动var div = document.getElementById('active');div.style.display = 'block';div.style.left = fruits[index].left;div.style.top = fruits[index].top;step--;if (step == 0)//就应该停止定时器{clearTimeout(timerID);var msg = document.getElementById('msg');msg.innerHTML = fruits[index].content + ':' + fruits[index].score;return;}index++;if (index == fruits.length) {index = 0;}timerID = setTimeout(turnOneStep, 1200/step);}//启动一个定时器，让转灯转动turnOneStep(step);}

这篇关于从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/509455。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2