Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2018, 20:17
Интересующийся
Отправить личное сообщение для Роман1479 Посмотреть профиль Найти все сообщения от Роман1479
 
Регистрация: 06.10.2017
Сообщений: 24

Можно ли модернизировать игру
Добрый вечер, нужна помощь, есть игра пятнашки, есть поле 3 на 3. Нужно сделать 4 на 4, все никак не получается. все 16 картинок там готовы. Только подкорректировать логику, просто, c canvas работал очень мало. На то что картинки разные не обращайте внимание)
https://jsfiddle.net/roman1479/arvfgkc9/93/
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2018, 21:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.klet, .cl{
		width: 50px;
		height: 50px;
		background-color: #ddd;
		font-size: 42px;
		border: 5px solid #ccc;
		color: grey;
		text-align: center;
	}
	.cl{
		background-color: white;
		border: 0;
		color: white;
	}
	.green{
		background-color: #B6FF00FF;
	}
</style>
</head>
<body>
	<div id="game"></div>
	<script>
		var game = document.querySelector('#game'),
		table = document.createElement('table'), str = '';
		arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,'cl'].sort((a, b)=>Math.random() - 0.5);

		for(var i = 0; i<4; i++){
			str += '<tr>';
			for(var j = 0; j<4; j++)  str += '<td class="klet '+(arr[arr.length-1] == 'cl'&&'cl')+'">'+arr.pop();
		}

	table.innerHTML = str;
	game.append(table);
	var td = document.querySelectorAll('td');

	function fn2(t){
		var cl = document.querySelector('.cl'),
		text = t.textContent;
		t.textContent = 'cl';
		cl.textContent = text;
		cl.classList.remove('cl');
		t.classList.add('cl');
		fn1();
	}

	(fn1=()=>{
		var x = 0;
		for(var i = 0; i<15; i++){
			if(i+1 == td[i].textContent*1 && i==x) {
				td[i].classList.add('green');
				if(++x == 15) alert('Победа');
			}
			else td[i].classList.remove('green');
			}
	})();

	td.forEach((el,i) => el.onclick = function(){
		if ((i!=0 && i!=4 && i!=8 && i!=12 && td[i-1].matches('.cl')) || (i!=15 && i!=11 && i!=7 && i!=3 && td[i+1].matches('.cl')) || (i<12 && td[i+4].matches('.cl')) ||(i>3 && td[i-4].matches('.cl')) ) fn2(this);
});


</script>
</body>
</html>


тут на форуме еще множество вариантов, может и на канвас есть, надо только поискать.
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2018, 21:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

canvas пятнашки
Сообщение от Роман1479
Можно ли модернизировать игру
да
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css">
canvas {

        border: 5px solid black;
        margin:auto
    }
    </style>

    <script type="text/javascript">
        window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var empty=9;
function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    	while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
   return array;
}
var ar=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0];
var im=shuffle([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0]);
for(var i=0;i< 16;i++){
    if(im[i]==0){
        empty=i+1;
    }
}
var restart=0;
function won(){
    ctx.clearRect(450,450,150,150);
    var img=document.getElementById("puzz16");
    var pat=ctx.createPattern(img,"repeat");
    ctx.fillStyle=pat;
    ctx.fillRect(450,450,150,150);
    restart=1;
}
function draw(){
    var t;
    t=0;
    if(restart==1){
        im=shuffle([1,2,3,4,5,6,7,8,0,9,10,11,12,13,14,15,0]);
        for(var i=0;i< 16;i++){
            if(im[i]==0){
                empty=i+1;
            }
        }
        ctx.clearRect(0,0,600,600);
        restart=0;
    }
    for(var i=0;i<16;i++){
        if(im[i]!=ar[i]){
            t=1;
        }
    }
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            component(i,j);
        }
    }
    if(t==0){
        won();
    }
}
function component(x, y){
    var text="puzz";
    z=x+4*y;
    z=im[z];
    text=text+z.toString();
    if(z!=0){
        var img=document.getElementById(text);
        var pat=ctx.createPattern(img,"repeat");
        ctx.fillStyle=pat;
    }
    else{
        ctx.fillStyle="white";
    }
    ctx.fillRect(150*x,150*y,150,150);
}
// *************************************************************************************************
function moveup() {
    ctx.clearRect(0,0,600,600);
    if(restart==1){
        draw();
        return;
    }
    if(empty==13||empty==14||empty==15||empty==16){
        draw();
    }
    else{
        text="puzz";
        var curr=empty;
        empty=empty+4;
        var next=empty;
        im[curr-1]=im[next-1];
        im[next-1]=0;
        draw();
    }
}
function movedown() {
    ctx.clearRect(0,0,600,600);
    if(restart==1){
        draw();
        return;
    }
    if(empty==1||empty==2||empty==3||empty==4) {
        draw();
    }
    else{
        text="puzz";
        var curr=empty;
        empty=empty-4;
        var next=empty;
        im[curr-1]=im[next-1];
        im[next-1]=0;
        draw();
    }
}

function moveleft() {
    ctx.clearRect(0,0,600,600);
    if(restart==1){
        draw();
        return;
    }
    if(empty==4||empty==8||empty==12||empty==16) {
        draw();
    }
    else{
        text="puzz";
        var curr=empty;
        empty=empty+1;
        var next=empty;
        im[curr-1]=im[next-1];
        im[next-1]=0;
        draw();
    }
}
function moveright() {
    ctx.clearRect(0,0,600,600);
    if(restart==1){
        draw();
        return;
    }
    if(empty==1||empty==5||empty==9||empty==13) {
        draw();
    }
    else{
        text="puzz";
        var curr=empty;
        empty=empty-1;
        var next=empty;
        im[curr-1]=im[next-1];
        im[next-1]=0;
        draw();
    }
}
window.addEventListener('keydown', function (e) {
    key = e.keyCode;
    if(key==37){
        e.preventDefault();
        moveleft();
    }
    if(key==38){
        e.preventDefault();
        moveup();
    }
    if(key==39){
        e.preventDefault();
        moveright();
    }
    if(key==40){
        e.preventDefault();
        movedown();
    }
    if(key==83){
        e.preventDefault();
        start();
    }
});
function start(){
    draw();
}
ctx.font = "30px Arial";
ctx.fillText("Hit S to start the game",150,210);


        }

</script>

</head>
<body>
    <div id="top" style="width:1500px; margin:auto; margin-top:10px; text-align:center">
        <div style="margin-top:10px; height:1000px;">
            <div>
                <div style="width:50%; float:left; display:inline">
                    <div>
                        <canvas id="canvas" height="600" width="600"></canvas>
                    </div>
                </div>
                <div style=" padding-top:2px; text-align:center; width:50% padding-top:10px">
                    <div style="margin:auto">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-1-tip3-150x150.jpg" id="puzz1" width="150" height="150">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-2-tip3-150x150.jpg" id="puzz2" width="150" height="150">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-3-tip3-150x150.jpg" id="puzz3" width="150" height="150">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-4-tip3-150x150.jpg" id="puzz4" width="150" height="150">
                    </div>
                    <div>
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-5-tip1-150x150.jpg" id="puzz5" width="150" height="150">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-6-tip3-150x150.jpg" id="puzz6" width="150" height="150">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-7-tip3-150x150.jpg" id="puzz7" width="150" height="150">
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-8-tip1-150x150.jpg" id="puzz8" width="150" height="150">
                    </div>
                    <div>
                        <img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-9-tip1-150x150.jpg" id="puzz9" width="150" height="150">
                        <img src="http://detskiy-sad.com/wp-content/uploads/2014/01/uchim-cifri-012-150x150.gif" id="puzz10" width="150" height="150">
                        <img src="http://detskiy-sad.com/wp-content/uploads/2014/01/uchim-cifri-013-150x150.gif" id="puzz11" width="150" height="150">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Lottokugel-12.png/150px-Lottokugel-12.png" id="puzz12" width="150" height="150">
                    </div>
                    <div style="text-align: right;margin-right: 69px;">
                        <img src="http://voopiik-don.ru/main/images/stories/actions/Rcenter/count13.jpg" id="puzz13" width="150" height="150">
                        <img src="https://s12emagst.akamaized.net/products/14847/14846069/images/res_124aaa44b7a4826d69ba7ebff8ab5fa4_150x150_22nm.jpg" id="puzz14" width="150" height="150">
                        <img src="https://s12emagst.akamaized.net/products/13351/13350335/images/res_1b7500370311dd22b1c320f0f8e4ff40_150x150_qt88.jpg" id="puzz15" width="150" height="150">
                        <img src="http://a2b2.ru/storage/images/person/34/gallery/1292/10107_preview_16-2.png" id="puzz16" width="150" height="150">
                    </div>
                </div>
            </div>
        </div>
 </div>

</body>
</html>

Последний раз редактировалось рони, 08.07.2018 в 21:31.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исчезающий текст, можно ли упростить скрипт? Djavastik Общие вопросы Javascript 7 22.01.2018 16:44
Необходимо реализовать браузерную игру. 2D+ Isometric. A-Team Общие вопросы Javascript 0 12.12.2016 20:26
Продаю новую игру для социальных сетей FB, ОК, ВК tigerwin Оффтопик 1 27.09.2016 00:13
Можно ли как-то сократить скрипт случайной цитаты (см. внутри)? Hyuga_Nia Общие вопросы Javascript 4 20.01.2011 22:00
Можно ли с помощью javascript создать онлайн(ролевую) игру? eXiN Общие вопросы Javascript 7 23.06.2009 20:57