소개:
이번에는 스도쿠 게임의 발전에 대해 이야기하겠습니다. 스도쿠 게임은 숫자 채우기 게임입니다. 9x9 정사각형 그리드에서 이 9x9 큰 그리드는 9개의 3x3 작은 9 정사각형 그리드로 나눌 수 있습니다. 이 그리드에 각 행, 각 열, 각각의 작은 9 정사각형 그리드를 입력하세요. 그리드 게임에 나오는 숫자는 반복되지 않고, 게임 플레이가 단순하며, 숫자 조합이 끊임없이 바뀌기 때문에 플레이하는 것이 매우 흥미롭습니다.
스도쿠 게임은 중국에서는 그다지 인기가 없는 것 같은데, 일본에서는 통근 열차에서 스도쿠 게임을 들고 있는 사람들을 종종 볼 수 있습니다. 한 손에는 스도쿠 게임 책을, 다른 손에는 연필을 들고 계산만 합니다. 이제 lufylegend.js 엔진을 사용하여 이 게임을 브라우저로 이동합니다. 게임 인터페이스는 아래와 같습니다.
그림 1
게임은 두 단계로 나누어져 있는데, 첫 번째 단계는 반복되는 숫자 없이 수평과 수직의 숫자만 요구하는 비교적 간단한 게임플레이입니다. 반복하다. 스스로 도전하고 싶은 친구들은 아래 게임 링크를 클릭해 몇 레벨까지 통과할 수 있는지 확인할 수 있습니다.
http://lufylegend.com/demo/sudoku
이전 푸시박스 게임과 동일하게 총 6개의 레벨이 있으며, 순위 시스템도 있으며, 각 레벨 후에 자신의 점수를 업로드하여 다른 사람들과 경쟁할 수 있습니다.
제작 시작
1. 먼저 lufylegend를 다운로드해야 합니다. .js 엔진
다음은 내 블로그에 있는 lufylegend-1.6 게시물입니다
http://blog.csdn.net/lufy_legend/ 기사 /details/8593968
개발을 단계별로 살펴보겠습니다.
2. 게임 알고리즘
이 게임에서 가장 먼저 해결해야 할 것은 숫자를 뒤섞는 방법입니다. 숫자를 뒤섞어야 합니다. 뒤섞인 후에도 숫자가 여전히 스도쿠 규칙을 준수하는지 확인한 다음 뒤섞인 숫자의 일부를 숨긴 다음 게임을 시작할 수 있습니다.
먼저 숫자 집합을 살펴보겠습니다
그림 2
보시다시피 이 숫자 집합에는 , it 가로 및 세로 열의 숫자는 반복되지 않습니다. 어떻게 질서를 혼란시킬 수 있나요? 각 라인만 중단하면 무결성이 영향을 받지 않는다는 것을 아는 것은 어렵지 않습니다. 마찬가지로, 각 열만 스크램블하면 영향을 받지 않습니다. 따라서 이를 교란하려면 행과 열 단위로만 교란하면 됩니다. 알고리즘은 다음과 같습니다.
function randomNum01(lv){ var i,j,list = new Array(),result = new Array(); for(i=0;i<9;i++){ list.push([1,2,3,4,5,6,7,8,9]); for(j=0;j.5?-1:1;}); var rand = new Array(0,1,2,3,4,5,6,7,8).sort(function(a,b){return Math.random()>.5?-1:1;}); for(i=0;i<9;i++){ for(j=0;j<9;j++){ result[i].push(list[i][rand[j]]); } } for(i=0;i<9;i++){ for(j=0;j>> 0; result[i][ran1] = 0; ran1 = Math.random()*9 >>> 0; result[ran1][i] = 0; } } return result; }
위 함수에서는 먼저 일반 숫자 세트를 생성한 다음 행과 열에 따라 뒤섞은 다음 마지막으로 일부 숫자를 무작위로 제거했습니다.
또 다른 숫자를 살펴보겠습니다.
그림 3
이 경우에는 각각의 작은 9개 정사각형 그리드에 있는 숫자의 무결성도 보장해야 합니다. 여기에 게으른 알고리즘이 있습니다. 아래 그림 4를 참조하세요.
그림 4
행 3개와 열 3개를 하나의 단위로 붕괴시키면 물론 쉽게 목표를 달성할 수 있습니다. 게으른 알고리즘. 더 좋은 알고리즘이 있으면 자유롭게 토론해 보세요. 내 알고리즘은 다음과 같습니다.
셋, 숫자의 정확성을 판단하세요
뺏어간 숫자를 모두 복원했을 때 그 후, 자신이 입력한 숫자가 맞는지, 스도쿠의 규칙을 준수하는지 판단하는 것이 필요합니다. 방법은 매우 간단합니다. 각 행, 각 열, 각 9개의 숫자가 일치하는지 확인하는 것입니다. 고급 단계의 사각형 그리드는 반복되지 않습니다. 다음은
function randomNum02(lv){ var i,j,k,list = [],result = [],rand; for(i=0;i<9;i++){ list.push([1,2,3,4,5,6,7,8,9]); for(j=0;j.5?-1:1;}).concat( new Array(3,4,5).sort(function(a,b){return Math.random()>.5?-1:1;}), new Array(6,7,8).sort(function(a,b){return Math.random()>.5?-1:1;}) ); for(i=0;i<9 i="" result="" push="" list="" rand="" i="" list="result;" rand="new" array="" 0="" 1="" 2="" sort="" function="" a="" b="" return="" math="" random="">.5?-1:1;}).concat( new Array(3,4,5).sort(function(a,b){return Math.random()>.5?-1:1;}), new Array(6,7,8).sort(function(a,b){return Math.random()>.5?-1:1;}) ); result = []; for(i=0;i<9;i++){ result.push([]); for(j=0;j<9;j++){ result[i].push(list[i][rand[j]]); } } for(i=0;i<9;i++){ for(j=0;j>> 0; result[i][ran1] = 0; ran1 = Math.random()*9 >>> 0; result[ran1][i] = 0; } } return result; }
코드입니다. 이 게임은 매우 간단하며, 위에서 전체 게임의 핵심 알고리즘이 해결되었습니다.
넷째, 다음과 같이 시작화면
을 생성합니다.
图4
上次我也说了,使用lufylegend.js引擎做个界面,可以说毫无难度,代码如下。
function GameLogo(){ base(this,LSprite,[]); var self = this; var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]]; var bitmap,logoLayer; logoLayer = new LSprite(); bitmap = new LBitmap(new LBitmapData(imglist["logo"])); bitmap.scaleX = bitmap.scaleY = 2; logoLayer.addChild(bitmap); self.addChild(logoLayer); var social = new Social(); social.x = 60; social.y = 500; self.addChild(social); labelText = new LTextField(); labelText.font = "HG行書体"; labelText.size = 14; labelText.x = 50; labelText.y = 650; labelText.text = "- Html5 Game Engine lufylegend.js"; self.addChild(labelText); labelText = new LTextField(); labelText.color = "#006400"; labelText.font = "HG行書体"; labelText.size = 14; labelText.x = 50; labelText.y = 700; labelText.text = "http://www.lufylegend.com/lufylegend"; self.addChild(labelText); self.addEventListener(LMouseEvent.MOUSE_UP,menuShow); };
这一次我用了一张图片做界面,代码就更简单了,文字显示依然是LTextField对象,使用方法请参考官方API文档。
五,建一个选择画面
如下。
图5
代码如下。
function GameMenu(){ base(this,LSprite,[]); var self = this; var menuLayer; menuLayer = new LSprite(); bitmap = new LBitmap(new LBitmapData(imglist["menu_back"])); bitmap.scaleX = bitmap.scaleY = 2; menuLayer.addChild(bitmap); self.addChild(menuLayer); labelText = new LTextField(); labelText.color = "#B22222"; labelText.font = "HG行書体"; labelText.size = 40; labelText.x = 30; labelText.y = 700; labelText.stroke = true; labelText.lineWidth = 4; labelText.text = "Please select !!"; menuLayer.addChild(labelText); for(var i=0;i<stageMenu.length;i++){ self.stageVsMenu(stageMenu[i]); } }; GameMenu.prototype.stageVsMenu = function(obj){ var self = this; var menuButton = new LSprite(); var bitmap = new LBitmap(new LBitmapData(imglist["menu_stage"])); menuButton.addChild(bitmap); menuButton.x = obj.x * 220 + 30; menuButton.y = obj.y * 200 + 50; self.addChild(menuButton); if(obj.open){ labelText = new LTextField(); labelText.color = "#ffffff"; labelText.font = "HG行書体"; labelText.size = 20; labelText.x = 50; labelText.y = 90; menuButton.addChild(labelText) labelText.text = "第"+(obj.index+1)+"关"; labelText = new LTextField(); labelText.color = "#ffffff"; labelText.font = "HG行書体"; labelText.size = 12; labelText.x = 30; labelText.y = 30; menuButton.addChild(labelText) labelText.text = "times:"+obj.times; menuButton.obj = obj; menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){ gameStart(self.obj.index); }); }else{ labelText = new LTextField(); labelText.color = "#ffffff"; labelText.font = "HG行書体"; labelText.size = 20; labelText.x = 60; labelText.y = 40; menuButton.addChild(labelText) labelText.text = "???"; }; }
好了,游戏基本的代码已经都贴出来了。
源码
下面提供完整游戏源代码,想研究一下的朋友可以点击下面的连接下载。
http://lufylegend.com/lufylegend_download/sudoku.rar
注意:该附件只包含本次文章源码,lufylegend.js引擎请到http://www.php.cn/进行下载。
以上就是[html5游戏开发]数独游戏-完整算法-开源讲座的内容,更多相关内容请关注PHP中文网(www.php.cn)!

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
