웹페이지 2048
가장 통속 적 이 고 알 기 쉬 운 js 가 쓴 것 입 니 다. 뭔 가 를 배 웠 습 니 다. 기록 하 세 요. - 홈 페이지 에서 마우스 의 미끄럼 방향 을 어떻게 판단 하 는 지, 마우스 이벤트: mousedown, mouseup, mousemove * 브 라 우 저 해상 도 는 적합 하지 않 습 니 다. js 코드 도 봉인 되 지 않 았 습 니 다. 후기 에 포장 할 수 있 습 니 다. 마침 js 기초 연습 을 했 습 니 다.
부호 블록
<html lang="en">
<head>
<meta charset="UTF-8">
<title>doctitle>
<script src="./js/jquery-1.8.3.min.js">script>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: " ";
font-size: 16px;
}
.page{
width: 350px;
height: 500px;
background-color: #faf7ee;
}
.titleLeft{
float: left;
width: 40%;
margin-top: .2em;
margin-left: 2.5em;
}
.title{
font-size: 2.6em;
margin: .1em;
}
.start{
background-color: #baaea0;
color: #fff;
font-size: 1.4em;
font-weight: 600;
line-height: 1.8;
width: 5em;
text-align: center;
border-radius: .3em;
cursor: pointer;
}
.titleRight{
margin-top: 1.2em;
margin-right: 1.5em;
width: 30%;
padding:.5em;
float: right;
background-color: #cdc3b7;
border-radius: .5em;
}
.score{
font-size: 1.6em;
font-weight: 600;
text-align: center;
}
/* */
.gameBox{
background-color: #baaea0;
margin: 2em auto;
padding: .5em 0;
width: 92%;
border-radius: .5em;
/* */
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.item{
width: 4.2em;
height: 4.2em;
margin: .2em;
border-radius: .5em;
font-size: 1em;
background-color: #cdc1b3;
display: inline-block;
text-align: center;
vertical-align: middle;
position: relative;
}
.item:nth-of-type(4n+1){
margin-left: .6em;
}
.cell{
font-size: 3em;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
text-align: center;
}
.numBgc{
background-color: #eee4da;
}
style>
head>
<body>
<div class="page" id="page">
<div class="titleBox">
<div class="titleLeft">
<h1 class="title">2048h1>
<div class="start" id="start"> div>
div>
<div class="titleRight">
<p class="score" style="color: #9b9388">scorep>
<p class="score" id="score" style="color: #fff;">0p>
div>
<div style="clear: both;">div>
div>
<div class="gameBox" id="gameBox">
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
<div class="item"><span class="cell">span>div>
div>
div>
<script>
var cell = [[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]];
var cellEmpty=[];
var direction="0";
var score=0;
//
function signCellEmpty(){
cellEmpty=[];
for(var i=0;ifor (var j=0;jif | (cell[i][j]==0){
cellEmpty.push([i,j]);
}
}
}
if(cellEmpty.length<=0) return false;
return true;
}
//
function selCellEmpty(){
return Math.floor(Math.random()*cellEmpty.length);
}
//
function setCell(posi,num){
var posX=cellEmpty[posi][0];
var posY=cellEmpty[posi][1];
console.log(" :"+posi);
console.log(" 2 4："+num);
cell[posX][posY]=num;
console.log(cell.toString())
}
// 2 4
function generateNum(){
return Math.random()<0.8?2:4;
}
//
function generate2Num(){
for(var i=0;i<2;i++){
signCellEmpty();
if(cellEmpty.length>0){
setCell(selCellEmpty(),generateNum());
}else{
return false;
}
}
return true;
}
// ： UI
function renderUI(){
var cellFill=cell.toString().split(',');
$.each(cellFill,function(index,val){
$(".cell:eq("+index+")").text("");
$(".item:eq("+index+")").css("background-color","#cdc1b3");
$(".cell:eq("+index+")").css("font-size","3em");
if(val!=0){
$(".cell:eq("+index+")").text(val);
//
var bgc="";
var fontSize="3em";
switch(parseInt(val,10)){
case 2:bgc="#FFCC99";break;
case 4:bgc="#FFFF99";break;
case 8:bgc="#FF9966";break;
case 16:bgc="#FFFFCC";break;
case 32:bgc="#FFFF00";break;
case 64:bgc="#CCCC33";break;
case 128:bgc="#FF9900";fontSize="2.2em";break;
case 256:bgc="#FFCCCC";fontSize="2.2em";break;
case 512:bgc="#FF6666";fontSize="2.2em";break;
case 1024:bgc="#FF0033";fontSize="1.8em";break;
case 2048:bgc="#CC3333";fontSize="1.8em";break;
case 4096:bgc="#993333";fontSize="1.8em";break;
case 8192:bgc="#FFCC33";fontSize="1.8em";break;
default: bgc="#ff0000";
}
$(".item:eq("+index+")").css("background-color",bgc);
$(".cell:eq("+index+")").css("font-size",fontSize);
$("#score").text(score);
}
});
}
// : 0
function changeCell(){
var cellNew=[[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]];
var i=0,j=0,iNew=0,jNew=0;
var row=0,col=0,rowNew=0,colNew=0;
for(i=0;i<4;i++){
jNew=0;
for(j=0;j<4;j++){
switch(direction){
case "left":
row=i;col=j;rowNew=iNew;colNew=jNew;break;
case "right":
row=i;col=3-j;rowNew=iNew;colNew=3-jNew;break;
case "up":
row=j;col=i;rowNew=jNew;colNew=iNew;break;
case "down":
row=3-j;col=i;rowNew=3-jNew;colNew=iNew;break;
default: break;
}
if(cell[row][col]!=0){
cellNew[rowNew][colNew]=cell[row][col];
jNew++;
}
}
iNew++;
}
return cellNew;
}
//
function combineNum(){
var row=0,col=0,rowNearby=0,colNearby=0;
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
switch(direction){
case "left":
row=i;col=j;rowNearby=i;colNearby=j+1;break;
case "right":
row=i;col=3-j;rowNearby=i;colNearby=3-(j+1);break;
case "up":
row=j;col=i;rowNearby=j+1;colNearby=i;break;
case "down":
row=3-j;col=i;rowNearby=3-(j+1);colNearby=i;break;
default: break;
}
if(cell[row][col]!=0){
if(cell[row][col]==cell[rowNearby][colNearby]){
cell[row][col]=cell[row][col]*2;
score+=cell[row][col];
cell[rowNearby][colNearby]=0;
}
}
}
}
return cell;
}
// : ， （ ）
function isOver(){
signCellEmpty();
if(cellEmpty.length>0) return false;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
if(cell[i][j]==cell[i][j+1]) return false;
if(cell[j][i]==cell[j+1][i]) return false;
}
}
return true;
}
function play(){
// ，
$("#gameBox").mousedown(function(e){
e.preventDefault();
startX=e.pageX;
startY=e.pageY;
X=0;Y=0;
$(this).mousemove(function(e){
e.preventDefault();
moveEndX=e.pageX;
moveEndY=e.pageY;
X=moveEndX-startX;
Y=moveEndY-startY;
if(Math.abs(X)>Math.abs(Y)){
if(X>0){
direction="right";
}else{
direction="left";
}
}else{
if(Y>0){
direction="down";
}else{
direction="up";
}
}
});
}).mouseup(function(){
if(Math.abs(X)>20||Math.abs(Y)>20){// ： mousemove
console.log("X:"+X+" Y:"+Y);
console.log(" ======================================："+direction);
if(direction!="0"){
console.log(" ："+cell.toString());
cell=changeCell();
console.log(" :"+cell.toString());
combineNum();
console.log(" :"+cell.toString());
cell=changeCell();
console.log(" :"+cell.toString());
if(isOver()){
alert("Game Over!")
}else{
generate2Num();
}
console.log(" :"+cell.toString())
// UI
renderUI();
}
}
});
}
$("#start").click(function(){
cell = [[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]];
renderUI();
generate2Num();
renderUI();
play();
$(this).text(" ");
})
script>
body>
html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
