찾다
웹 프론트엔드H5 튜토리얼[html5 게임개발] 스도쿠 게임 - 완성 알고리즘 - 오픈소스 강의

소개:

이번에는 스도쿠 게임의 발전에 대해 이야기하겠습니다. 스도쿠 게임은 숫자 채우기 게임입니다. 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개를 하나의 단위로 붕괴시키면 물론 쉽게 목표를 달성할 수 있습니다. 게으른 알고리즘. 더 좋은 알고리즘이 있으면 자유롭게 토론해 보세요. 내 알고리즘은 다음과 같습니다.


rreee

셋, 숫자의 정확성을 판단하세요

뺏어간 숫자를 모두 복원했을 때 그 후, 자신이 입력한 숫자가 맞는지, 스도쿠의 규칙을 준수하는지 판단하는 것이 필요합니다. 방법은 매우 간단합니다. 각 행, 각 열, 각 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)!


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 : 웹에서 사용자 경험을 향상시키는 방법H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

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

H5 코드 해체 : 태그, 요소 및 속성H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

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

H5 코드 이해 : HTML5의 기본 사항H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

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

H5 코드 : 웹 개발자를위한 모범 사례H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

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

H5 : 웹 표준 및 기술의 발전H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM

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

H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

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

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

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

H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

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

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SecList

SecList

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

PhpStorm 맥 버전

PhpStorm 맥 버전

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

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경