-
Conteúdo Similar
-
Por iagomonteiro
Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
JS
// Jogador 1
const fillplace1 = document.querySelector('#fillplace1');
const fillplace2 = document.querySelector('#fillplace2');
const fillplace3 = document.querySelector('#fillplace3');
var fill;
const empties = document.querySelectorAll('.empty');
fillplace1.addEventListener('dragstart', enterstart);
fillplace2.addEventListener('dragstart', enterstart);
fillplace3.addEventListener('dragstart', enterstart);
for (const empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}
function enterstart(){
fill = this;
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.className += ' hovered';
}
function dragLeave() {
this.className = 'empty';
}
function dragDrop(id) {
this.className = 'empty';
this.append(fill);
}
HTML
<link rel="stylesheet" href="../css/jogar.css" />
<div id="barraGeneral">
<img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
</div>
<div id="persona">
<img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
</div>
<button id="btpassar" onclick="cont();">Passar Rodada</button>
<H1 id="campomana">1</H1>
<!-- Mesa das cartas jogador 1-->
<div class="empty" id="emptyplace1">
</div>
<div class="empty" id="emptyplace2">
</div>
<div class="empty" id="emptyplace3">
</div>
<div class="empty" id="emptyplace4">
</div>
<div class="empty" id="emptyplace5">
</div>
<!-- Mão do jogador 1 -->
<div class="emptyhand1">
<div class="fill" draggable="true" id="fillplace1">
<img src='../imagens/Sorteio/aa.png' draggable='true'>
</div>
</div>
<div class="emptyhand2">
<div class="fill" draggable="true" id="fillplace2">
<img src='../imagens/Sorteio/aa2.png' draggable='true'>
</div>
</div>
<div class="emptyhand3">
<div class="fill" draggable="true" id="fillplace3">
<img src='../imagens/Sorteio/aa2.png' draggable='true'>
</div>
</div>
-
Por Felipe Schmidt
Galera preciso de um ajuda... To quebrando a cabeça com isso.
Preciso que um dos três números 1 se encaixem no primeiro quadro, depois vão sobrar 2, um desses dois tem que se encaixar no 4 quadro e o que sobrar se encaixe no 7 quadro. Independente de qual escolher, ele precisa encaixar.
Será que conseguem me ajudar com isso?
Muito Obrigado.
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Vetoquinol Game</title>
<meta name="generator" content="BBEdit 7.0.3" />
<link rel="Stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<style type="text/css">
p{font-size:1em;}
.caption{font-size:.8em;
font-weight:bold;}
/*img{border:solid 1px #000000;}*/
td{vertical-align:top;}
#draggable { width: 24px; height: 24px; background: red; }
#helper { width: 24px; height: 24px; background: yellow; }
/* Main content area */
#gameContent {
margin: 10px;
font-family: Georgia, serif;
line-height: 1.1em;
color: #333;
margin: 5px 5px;
text-align: center;
}
#cardPile {
/*margin: 0 auto;*/
background: #fff;
}
#cardSlots {
float:right;
margin: -515px 30px 0 auto;
background: #b2b2b2;
}
#cardSlots, #cardPile {
width: 423px;
height: 442px;
padding: 33px;
border: 3px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardPile div {
float: left;
width: 130px;
height: 130px;
padding: 1px;
padding-bottom: 0;
/*border: 2px solid #333;*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 10px 5px 0 0px;
/*background: #fff;*/
}
#cardSlots div {
float: left;
width: 130px;
height: 130px;
padding: 1px;
padding-bottom: 0;
border: 0px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 10px 5px 0 0px;
/*background: #fff;*/
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
/*background: #666;*/
/*color: #fff;*/
/*font-size: .8em;*/
/*text-shadow: 0 2px 2px #000;*/
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
/* Individually coloured cards */
/*
#card1.correct { background: green; }
#card2.correct { background: green; }
#card3.correct { background: green; }
#card4.correct { background: green; }
#card5.correct { background: green; }
#card6.correct { background: green; }
#card7.correct { background: green; }
#card8.correct { background: green; }
#card9.correct { background: green; }
#card10.correct { background: green; }
#card11.correct { background: green; }
#card12.correct { background: green; }
*/
/* "You did it!" message */
#successMessage {
position: absolute;
left: 480px;
top: 500px;
width: 323px;
height: 0;
z-index: 100;
background: #ccc;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
#message {
position: absolute;
left: 580px;
top: 750px;
width: 0;
height: 0;
z-index: 100;
background: #fff;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
padding: 20px;
}
</style>
<script type="text/javascript">
//<!--
title="Vetoquinol Game";
subject="SEP";
var list=new Array("part1");
// Usage:
function showAnswer(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="";
}else{
document.getElementById(id).style.display="none";
}
}
function hideAll(){
for(i=0;i<list.length;i++){
document.getElementById(list).style.display="none";
}
}
$(function(){
$("#answers").hide("fast");
$("#answersToggle").click(function(){
$("#answers").toggle("slow");
});
$("#answer1").hide("fast");
$("#answer2").hide("fast");
$("#answer1Toggle").click(function(){
$("#answer1").toggle("slow");
$("#answer2").hide("fast");
});
$("#answer2Toggle").click(function(){
$("#answer2").toggle("slow");
$("#answer1").hide("fast");
});
});
$( init );
function init() {
$('#makeMeDraggable').draggable();
$('#draggable').draggable( {
cursor: 'move',
containment: 'document',
helper: helper
} );
}
function helper( event ) {
return '<div id="helper" style="font-size:.6em;">drag!</div>';
}
var correctCards = 0;
$( gameInit );
function gameInit() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '750px',
width: 0,
height: 0
} );
$('#message').hide();
$('#message').css( {
left: '580px',
top: '750px',
width: 0,
height: 0
} );
// Reset the game
correctCards =0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
var numOfCards=9;
// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 1, 5, 1, 7, 8, 9 ] ;
var text = [ '1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9'];
//var text = [ '<img src="images/enisyl.png" width="136" height="135" />',
//'<img src="images/flevox.png" width="136" height="135" />',
//'<img src="images/cimalgex.png" width="136" height="135" />',
//'<img src="images/enisyl.png" width="136" height="135" />',
//'<img src="images/program.png" width="136" height="135" />',
//'<img src="images/cimalgex.png" width="136" height="135" />',
//'<img src="images/flevox.png" width="136" height="135" />',
//'<img src="images/cimalgex.png" width="136" height="135" />',
//'<img src="images/program.png" width="136" height="135" />'];
numbers.sort( function() { return Math.random() - .05 - .05 } );
for ( var i=0; i<text.length; i++ ) {
$('<div>' + text[numbers-1] + '</div>').data( 'number', numbers ).attr( 'id', 'card'+numbers ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true,
start:hideMessage
} );
}
// Create the card slots
var words = ['<img src="images/quadro1.png" width="136" height="135" />', '<img src="images/quadro2.png" width="136" height="135" />', '<img src="images/quadro3.png" width="136" height="135" />','<img src="images/quadro4.png" width="136" height="135" />', '<img src="images/quadro5.png" width="136" height="135" />', '<img src="images/quadro6.png" width="136" height="135" />', '<img src="images/quadro7.png" width="136" height="135" />', '<img src="images/quadro8.png" width="136" height="135" />', '<img src="images/quadro9.png" width="136" height="135" />'];
for ( var i=1; i<=words.length; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
/*
if(slotNumber==1){
$('#message').show().html("SLA works by curing and solidify successive layers of liquid photopolymer resin using an ultraviolet laser.");
}
if(slotNumber==2){
$('#message').show().html("Selective Laser Sintering is similar to SLA, but instead of liquid resin, powdered materials including nylon, ceramics, glass, aluminum, to steel or silver can be used.");
}
if(slotNumber==3){
$('#message').show().html("Chuck Hull founds 3D systems, which develops its first commercial 3D printer, the Stereolithography Apparatus (or SLA-1)");
}
if(slotNumber==4){
$('#message').show().html("Fused Deposition Modeling heats and extrudes thermoplastic filament, depositing layers of semi-liquid beads along an STL-defined extrusion path.");
}
if(slotNumber==5){
$('#message').show().html("Scott Crump founds Stratasys");
}
if(slotNumber==6){
$('#message').show().html("Four Selective Laser Sintering machines were built, but none were ever sold. Each cost $300,000-$400,000.");
}
if(slotNumber==7){
$('#message').show().html("LOM bonds and cuts sheet material using a digitally guided laser.");
}
if(slotNumber==8){
$('#message').show().html("MIT's Three Dimensional Printing (3DP) spreads a thin layer of powdered material on a flat bed, solidifying successive layers with fine jets of binding agent. MIT licenses it technology to several companies including ZCorp.");
}
if(slotNumber==9){
$('#message').show().html("Anthony Atala, director of the Institute for Regenerative Medicine at Wake Forest University School of Medicine, leads a research team that successfully implants a lab-grown bladder into a human patient. The organ is built by seeding a 3D-printed scaffold with bladder cells.");
}
if(slotNumber==10){
$('#message').show().html("The aim of the RepRap (Replicating Rapid Prototyper) project is is to create a Fused Filament Fabrication (FFF) 3D printer that can print most of its own components. FFF instead of FDM is chosen to describe the process in order to avoid legal issues with Stratasys.");
}
if(slotNumber==11){
$('#message').show().html("Thingiverse was started in November 2008 by Zach \"Hoeken\" Smith as a companion site to MakerBot Industries, a DIY 3D printer kit making company.");
}
if(slotNumber==12){
$('#message').show().html("The project comes out of Cornell's Fab@Home venture, headed up by associate professor Hod Lipson. Started in 2005, the project aims to create do-it-yourself versions of machines that can manufacture custom objects on-demand. The group started experimenting with food fabrication in 2007.");
}
*/
animateMessage();
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 9 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '700px',
top: '350px',
width: '300px',
height: '60px',
opacity: 1
} );
}
}
function hideMessage(){
$('#message').animate(
{
left: '220px',
top: '700px',
width: '600px',
height: '100px',
opacity: 0
});
}
function animateMessage(){
$('#message').animate(
{
left: '220px',
top: '700px',
width: '600px',
height: '100px',
opacity: 1
});
}
//-->
</script>
</head>
<body class="thrColFixHdr">
<!-- begin address -->
<div id="container"><!-- end address -->
<!-- begin title --><!-- end title, end ghetto code -->
<!-- begin sidebar 1 -->
<!-- <div id="sidebar1">
<p></p>
</div>-->
<!-- end #sidebar1 -->
<!-- begin #sidebar2 --><!-- end #sidebar2 -->
<!-- begin #maincontent -->
<div id="mainContent">
<!--Game-->
<div id="part1" style="display:block;">
<div id="gameContent">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="message"></div>
<div id="successMessage">
<span style="font-weight:bold;font-size:2em;">Parabéns! Você acertou todos!</span><br><br>
<button onclick="gameInit()">Jogar Novamente</button>
</div>
</div>
<ol class="instructions">
</ol>
</div>
<div></div>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>
-
Por Viriato
Preciso Montar uma ferramenta pro meu site da seguinte forma:
A pessoa entra na página e tem Várias imagens na tela, então ela escolhe uma e arrasta até uma barra na direita
Quando a pessoa largar a imagem na direita, ela tem que ficar menor e alinhada lá em cima.
Além disso, no final eu preciso passar essas informações da escolha para uma outra página, pra fazer um resumo do que ela escolheu
Me ajudem ai dizendo o que tenho que pesquisar pra começar isso, já dei uma lida em algumas bibliotecas de Drag and Drop mas não sei como implementa-las
Agradeço desde já!!
-
Por biarritzzz
oi, gente. primeiramente queria saber de quem usa tumblr se as páginas criadas sob o seu domínio e em "custom layout" suportam mesmo qualquer código.
se sim, alguém pode me ajudar a usar a ferramenta drag and drop com imagens? para arrastar e colocar em qualquer lugar, muito usado pra jogos simples etc.
se não, por favor me indiquem uma plataforma (MUITO antigamente usava o falecido geocities pra isso) que suporta tal código?
tenho feito isso:
<div id="drag-1" class="draggable"> <img src="http://d1v8u1ev1s9e4n.cloudfront.net/55a7fa9a067d7b6ebe9795c7"/> </div> coisa que vi por aí tanto em sites quanto em tutoriais, mas não tá funcionando lá. alguém pode me ajudar? obg!!!
-
