javascript版1024游戏源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2048</title>
<style>
*{margin: 0; padding: 0}
#div1024{width: 600px; margin: 50px auto;overflow: hidden}
.main{float: left;margin-right: 50px;}
li{list-style:none}
.main>li{width: 328px;overflow: hidden}
.main>li ul li{border: 1px solid #6666ff;width: 80px;height: 80px;border-collapse:collapse; text-align: center;line-height: 80px;font-size: 36px;float: left
}
</style>
</head>
<body>
<div id="div1024">
<ul class="main">
<li class="line0"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></li>
<li class="line1"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></li>
<li class="line2"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></li>
<li class="line3"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></li>
</ul>
<div style="float: left; margin-top: 120px;">
<div>分数：<span id="score">0</span></div>
<div>计数：<span id="step">0</span></div>
<div>玩法：<span id="tips">用方向键操作</span></div>
<div>提示：<span id="tip"></span></div>
</div>
</div>
<script>
window.onload=function(){
var game={
// 随机产生的数字
num:0,
//剩余空格
counts:0,
score:0,
step:0,
//横向数组与纵向数组
arr:[],
arr1:[],
init:function(){
game.style()
document.getElementById('tip').innerHTML='游戏开始啦...'
this.add()
this.add()
},
add:function(){
var x=false,y=false
Math.random() > 0.5 ? this.num=2 :this.num=4
var Lindex=Math.floor(Math.random()*4),
Rindex=Math.floor(Math.random()*4),
dom=document.getElementsByClassName('line'+Lindex)[0].getElementsByTagName('li')[Rindex]
if(dom.innerHTML=='') {
dom.className='style'+this.num
dom.innerHTML=this.num
}
else{
this.count()
if(this.counts==0){
//判断横向是否有值相同
outerloop0:
for(var i=0;i<4;i++){
for(var j=0;j<this.arr[i].length-1;j++){
if(this.arr[i][j]==this.arr[i][j+1]){
x=true
break outerloop0;
}
}
}
//判断纵向是否有值相同
outerloop1:
for(var i=0;i<4;i++){
for(var j=0;j<this.arr1[i].length-1;j++){
if(this.arr1[i][j]==this.arr1[i][j+1]){
y=true
break outerloop1
}
}
}
if(!x && !y ){
alert('gameovar,你的分数是'+this.score)
}else if(x){
if(arguments[0].keyCode==37 || arguments[0].keyCode==39){
this.step++
}
}
else if(y){
if(arguments[0].keyCode==38 || arguments[0].keyCode==40){
this.step++
}
}
}else{
this.add()
}
}
},
left:function(){
//数组值合并
for(var i=0;i<4;i++){
for(var j=0;j<this.arr[i].length-1;j++){
if(this.arr[i][j]==this.arr[i][j+1]){
this.score+=this.arr[i][j]*2
this.arr[i][j]+=this.arr[i][j]
this.arr[i].splice(j+1,1)
}
}
}
//赋值给dom
for(var i=0;i<4;i++){
len=this.arr[i].length
for(var m=0;m<4;m++){
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].className=''
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].innerHTML=''
}
for(var j=0;j<len;j++){
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].innerHTML=this.arr[i][j]
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].className='style'+this.arr[i][j]
}
}
if(this.counts!=0) this.step++
},
right:function(){
//数组值合并
for(var i=0;i<4;i++){
for(var j=this.arr[i].length-1;j>0;j--){
if(this.arr[i][j]==this.arr[i][j-1]){
this.score+=this.arr[i][j-1]*2
this.arr[i][j]+=this.arr[i][j]
this.arr[i].splice(j-1,1)
}
}
}
//赋值给dom
for(var i=0;i<4;i++){
len=this.arr[i].length
for(var m=0;m<4;m++){
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].className=''
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].innerHTML=''
}
for(var j=0;j<len;j++){
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[3-j].innerHTML=this.arr[i][len-1-j]
document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[3-j].className='style'+this.arr[i][len-1-j]
}
}
if(this.counts!=0) this.step++
this.log(this.arr)
},
up:function(){
//数组值合并
for(var i=0;i<4;i++){
for(var j=0;j<this.arr1[i].length-1;j++){
if(this.arr1[i][j]==this.arr1[i][j+1]){
this.score+=this.arr1[i][j]*2
this.arr1[i][j]+=this.arr1[i][j]
this.arr1[i].splice(j+1,1)
}
}
}
//赋值给dom
for(var i=0;i<4;i++){
len=this.arr1[i].length
for(var m=0;m<4;m++){
document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].className=''
document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].innerHTML=''
}
for(var j=0;j<len;j++){
document.getElementsByClassName('line'+j)[0].getElementsByTagName('li')[i].innerHTML=this.arr1[i][j]
document.getElementsByClassName('line'+j)[0].getElementsByTagName('li')[i].className='style'+this.arr1[i][j]
}
}
if(this.counts!=0) this.step++
},
down:function(){
//数组值合并
for(var i=0;i<4;i++){
for(var j=this.arr1[i].length-1;j>0;j--){
if(this.arr1[i][j]==this.arr1[i][j-1]){
this.score+=this.arr1[i][j-1]*2
this.arr1[i][j]+=this.arr1[i][j]
this.arr1[i].splice(j-1,1)
}
}
}
//赋值给dom
for(var i=0;i<4;i++){
len=this.arr1[i].length
for(var m=0;m<4;m++){
document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].className=''
document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].innerHTML=''
}
for(var j=0;j<len;j++){
document.getElementsByClassName('line'+(4-len+j))[0].getElementsByTagName('li')[i].innerHTML=this.arr1[i][j]
document.getElementsByClassName('line'+(4-len+j))[0].getElementsByTagName('li')[i].className='style'+this.arr1[i][j]
}
}
if(this.counts!=0) this.step++
},
count:function(){
var inner,
inner1,
m= 0,
n=0
this.counts=0
//横向数组，用于左右操作
for(var i=0;i<4;i++){
this.arr[i]=[]
m=0
for(var j=0;j<4;j++){
inner=document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].innerHTML
if(inner){
this.arr[i][m]=Number(inner)
m++
}
else{
this.counts++
}
}
}
this.log(this.arr)
//纵向数组用于上下操作
for(var x=0;x<4;x++){
this.arr1[x]=[]
}
for(var x=0;x<4;x++){
n=0
for(var y=0;y<4;y++){
inner1=document.getElementsByClassName('line'+y)[0].getElementsByTagName('li')[x].innerHTML
if(inner1){
this.arr1[x][n]=Number(inner1)
n++
}
}
}
},
log:function(x){
console.log(x)
},
update:function(){
document.getElementById('score').innerHTML=this.score
document.getElementById('step').innerHTML=this.step
var tip=document.getElementById('tip')
var max=this.arr.toString().split(',')
function sort(a,b){return a-b}
max=max.sort(sort)[max.length-1]
if(max==512){tip.innerHTML='加油加油...'}
if(max==1024){tip.innerHTML='唉哟，不错喔...'}
if(max==2048){tip.innerHTML='恭喜你成功了，太厉害了...'}
if(max==4096){tip.innerHTML='超神了...'}
if(max==8192){tip.innerHTML='XX，出现bug了...'}
},
style:function(){
var values=[2,4,8,16,32,64,128,256,512,1024,2048,4096,8192],
add=0.075,
styles=''
for(var i=0;i<values.length;i++){
styles+='.style'+values[i]+'{background-color:hsla(360,50%,50%,'+add+');}\r\n'
add+=0.075
}
document.getElementsByTagName('style')[0].innerHTML+=styles
}
}
game.init()
document.onkeydown=function(e){
game.count()
e=e || window.event
switch (e.keyCode){
case 37 :
game.left()
game.add(e)
game.update()
break
case 38 :
game.up()
game.add(e)
game.update()
break
case 39 :
game.right()
game.add(e)
game.update()
break
case 40 :
game.down()
game.add(e)
game.update()
break
default :
break
}
}
}
</script>
</body>
</html>
javascript版1024游戏源码的更多相关文章
- android版猜拳游戏源码分享
android版猜拳游戏源码分享安卓版猜拳游戏源码,该文件中带有安装测试包的,这个游戏源码比较简单的,现在有两个代码,一个自定义VIEW的,一个就是普通的imageView图片,游戏非常适合一些新手的 ...
- iOS版打地鼠游戏源码
打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- ios版弹珠游戏源码
这个是我们比较喜欢玩的一直小游戏的,ios版弹珠游戏源码,该游戏源码来着IOS教程网其他网友提供上传的,大家可以了解一下吧. nore_js_op> <ignore_js_op&g ...
- Android版的疯狂猜图游戏源码完整版分享
这个游戏源码是在安装教程网那么分享过来的,Android版的疯狂猜图游戏源码完整版分享,也是本人之前很早以前发的一款游戏源码的,大家如果想了解一下,可以看看吧,不说多了,上一个图先吧. > ...
- Creator仿超级玛丽小游戏源码分享
Creator仿超级玛丽小游戏源码分享 之前用Cocos Creator 做的一款仿超级玛丽的游戏,使用的版本为14.2 ,可以直接打包为APK,现在毕设已经完成,游戏分享出来,大家一起学习进步.特别 ...
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center> <h1>j ...
- 15款Cocos2d-x游戏源码
(1)用cocos2d-x开发的中国象棋游戏源码 使用Cocos2d-X2.2.3开发的一款中国象棋游戏,游戏中可以实现.新局面.悔棋.游戏音乐.胜利后会显示游戏结果. 源码下载:http://www ...
随机推荐
- shell中的case表达式
语法格式 case var in pattern1 | patter2) command1 command2;; pattern3) command1 command2;; *) default co ...
- Mysql学习（慕课学习笔记7）修改数据表（下）
添加主键约束 ALTER TABLE tb1_name ADD [CONSTRAINT [symbol]] PRIMARY KEY [index_type] (index_col_name,…….) ...
- Taum and B'day
//自己 def main(): t = int(raw_input()) for _ in range(t): units = 0 b, w = map(int, raw_input().strip ...
- python文件_写入
1.输入的数据写入到一个文本: #这个写入操作不会将原来的数据覆盖掉 n=raw_input('请输入写入的文件数据:') fl2=open('g:/2.txt','a') fl2.write('\n ...
- Codeforces Round #277 (Div. 2) 解题报告
题目地址:http://codeforces.com/contest/486 A题.Calculating Function 奇偶性判断,简单推导公式. #include<cstdio> ...
- 开心菜鸟系列－－－－函数作用域（javascript入门篇）
1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></ ...
- C51工具是怎么进行覆盖分析的
C51工具针对8051微控制器的有限存储器资源进行了优化设计. 为了最有效地利用存储器,根据一个很容易解释的方法,自动变量和函数参数在存储器中均进行覆盖处理. 首先,连接器根据源程序生成调用树.例如: ...
- 安卓开发中ScrollView不能用RelativeLayout的解决方案
RelativeLayout的意义: 布局各个部件的相对布局.使得界面空间合理利用. 一.ScrollView局限: 滑动的只能是linearlayout,甚至整个布局都不能有RelativeLayo ...
- logstash 中的贪婪匹配
logstash 中的贪婪匹配: 10.252.142.174 - - [06/Sep/2016:08:41:36 +0800] "GET /api/validate/code/send?m ...
- PLSQL 循环示例
<pre name="code" class="sql"><pre name="code" class="sql ...