失业在家，做几个小游戏看看
玩法：按键盘的上下左右操作
2048.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048小游戏</title>
</head>
<style>
html,body{
width: 100%;
height: 100%;
overflow: hidden;
color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
}
#game{
display: flex;
flex-wrap: wrap;
width: 400px;
background: #bbada0;
padding: 10px;
border-radius:10px;
justify-content: space-between;
}
.item{
background: rgba(238, 228, 218, 0.35);
width: 90px;
height: 90px;
display: block;
text-align: center;
line-height: 90px;
font-size: 35px;
margin-bottom: 10px;
}
.item.active{
background: #eee4da;
}
</style>
<body>
<div id="game">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<script>
const rect=new Array(16).fill(0);
function getRandomNum(){
return Math.random()>0.7?4:2
}
function getRandomIndex(){
const emptyArr=[]
for(let i=0;i<16;i++){
if(!rect[i]){
emptyArr.push(i)
}
}
const n1=0|Math.random()*emptyArr.length
const n2=getRandomNum()
rect[emptyArr[n1]]=n2
console.log(emptyArr[n1],n2)
}
const childNodes=document.querySelectorAll("#game .item")
function render(){
for(let i=0;i<16;i++){
const num=rect[i]
if(num){
childNodes[i].textContent=num
childNodes[i].classList.add('active')
}else{
childNodes[i].textContent=''
childNodes[i].classList.remove('active')
}
}
}
getRandomIndex()
getRandomIndex()
render()
document.addEventListener('keydown',function (event){
if(event.keyCode===38){
up()
}
if(event.keyCode===40){
down()
}
if(event.keyCode===37){
left()
}
if(event.keyCode===39){
right()
}
})
function up(){
let has=false
//移动
for(let x=0;x<4;x++){
const prelist=[]
const list=[]
let preV=0
for(let y=0;y<4;y++){
const v=rect[y*4+x]
prelist.push(v)
if(v){
if(preV===v){
list[list.length-1]=2*v
preV=0
}else{
list.push(v)
preV=v
}
}
}
for(let y=0;y<4;y++){
if(!list[y]){
list[y]=0
}
rect[y*4+x]=list[y]
}
console.log(prelist,list)
if(prelist.join(',')!==list.join(',')){
has=true
}
}
if(has){
getRandomIndex()
render()
}
}
function down(){
let has=false
for(let x=0;x<4;x++){
const prelist=[]
const list=[]
let preV=0
for(let y=3;y>=0;y--){
const v=rect[y*4+x]
prelist.push(v)
if(v){
if(preV===v){
list[list.length-1]=2*v
preV=0
}else{
list.push(v)
preV=v
}
}
}
for(let i=0;i<4;i++){
if(!list[i]){
list[i]=0
}
rect[(3-i)*4+x]=list[i]
}
if(prelist.join(',')!==list.join(',')){
has=true
}
}
if(has){
getRandomIndex()
render()
}
}
function left(){
let has=false
for(let y=0;y<4;y++){
const prelist=[]
const list=[]
let preV=0
for(let x=0;x<4;x++){
const v=rect[y*4+x]
prelist.push(v)
if(v){
if(preV===v){
list[list.length-1]=2*v
preV=0
}else{
list.push(v)
preV=v
}
}
}
for(let i=0;i<4;i++){
if(!list[i]){
list[i]=0
}
rect[y*4+i]=list[i]
}
if(prelist.join(',')!==list.join(',')){
has=true
}
}
if(has){
getRandomIndex()
render()
}
}
function right(){
let has=false
for(let y=0;y<4;y++){
const prelist=[]
const list=[]
let preV=0
for(let x=3;x>=0;x--){
const v=rect[y*4+x]
prelist.push(v)
if(v){
if(preV===v){
list[list.length-1]=2*v
preV=0
}else{
list.push(v)
preV=v
}
}
}
for(let i=0;i<4;i++){
if(!list[i]){
list[i]=0
}
rect[y*4+3-i]=list[i]
}
if(prelist.join(',')!==list.join(',')){
has=true
}
}
if(has){
getRandomIndex()
render()
}
}
</script>
</html>
View Code
标签：网页,游戏,list,2048,background,push,const,preV From： https://www.cnblogs.com/caoke/p/17249960.html