javascript制作游戏.docx
- 文档编号:26879573
- 上传时间:2023-06-23
- 格式:DOCX
- 页数:11
- 大小:15.89KB
javascript制作游戏.docx
《javascript制作游戏.docx》由会员分享,可在线阅读,更多相关《javascript制作游戏.docx(11页珍藏版)》请在冰豆网上搜索。
javascript制作游戏
javascript制作2048游戏
这几天玩儿着2048这个游戏,突然心血来潮想练习下写程序的思路,于是乎就模仿做了一个,到目前位置还没有实现动态移动,不是很好看,不过玩儿着自己模仿的小游戏还是蛮爽的,哈哈
2048.html
<!
DOCTYPE
<htmlxmlns=““
<head
<metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/
<title2048</title
<linkrel=“stylesheet”type=“text/css”href=“css/2048.css”/
<!
--<scripttype=“text/javascript”src=“--
<scripttype=“text/javascript”src=“js/2048.js”</script
</head
<body
<divid=“div2048”
<aid=“start”taptostart:
-)</a
</div
</body
</html
2048.css
@charset“utf-8”;
#div2048
{
width:
500px;
height:
500px;
background-color:
#b8af9e;
margin:
0auto;
position:
relative;
}
#start
{
width:
500px;
height:
500px;
line-height:
500px;
display:
block;
text-align:
center;
font-size:
30px;
background:
#f2b179;
color:
#FFFFFF;
}
#div2048div.tile
{
margin:
20px0px0px20px;
width:
100px;
height:
40px;
padding:
30px0;
font-size:
40px;
line-height:
40px;
text-align:
center;
float:
left;
}
#div2048div.tile0{
background:
#ccc0b2;
}
#div2048div.tile2
{
color:
#7c736a;
background:
#eee4da;
}
#div2048div.tile4
{
color:
#7c736a;
background:
#ece0c8;
}
#div2048div.tile8
{
color:
#fff7eb;
background:
#f2b179;
}
#div2048div.tile16
{
color:
#fff7eb;
background:
#f59563;
}
#div2048div.tile32
{
color:
#fff7eb;
background:
#f57c5f;
}
#div2048div.tile64
{
color:
#fff7eb;
background:
#f65d3b;
}
#div2048div.tile128
{
color:
#fff7eb;
background:
#edce71;
}
#div2048div.tile256
{
color:
#fff7eb;
background:
#edcc61;
}
#div2048div.tile512
{
color:
#fff7eb;
background:
#ecc850;
}
#div2048div.tile1024
{
color:
#fff7eb;
background:
#edc53f;
}
#div2048div.tile2048
{
color:
#fff7eb;
background:
#eec22e;
}
2048.js
functiongame2048(container)
{
this.container=container;
this.tiles=newArray(16);
}
game2048.prototype={
init:
function(){
for(vari=0,len=this.tiles.length;i<len;i++){
vartile=this.newTile(0);
tile.setAttribute(‘index’,i);
this.container.appendChild(tile);
this.tiles[i]=tile;
}
this.randomTile();
this.randomTile();
},
newTile:
function(val){
vartile=document.createElement(‘div’);
this.setTileVal(tile,val)
returntile;
},
setTileVal:
function(tile,val){
tile.className=‘tiletile’+val;
tile.setAttribute(‘val’,val);
tile.innerHTML=val0?
val:
‘‘;
},
randomTile:
function(){
varzeroTiles=[];
for(vari=0,len=this.tiles.length;i<len;i++){
if(this.tiles[i].getAttribute(‘val’)==0){
zeroTiles.push(this.tiles[i]);
}
}
varrTile=zeroTiles[Math.floor(Math.random()*zeroTiles.length)];
this.setTileVal(rTile,Math.random()<0.8?
2:
4);
},
move:
function(direction){
varj;
switch(direction){
case‘W’:
for(vari=4,len=this.tiles.length;i<len;i++){
j=i;
while(j=4){
this.merge(this.tiles[j-4],this.tiles[j]);
j-=4;
}
}
break;
case‘S’:
for(vari=11;i=0;i--){
j=i;
while(j<=11){
this.merge(this.tiles[j+4],this.tiles[j]);
j+=4;
}
}
break;
case‘A’:
for(vari=1,len=this.tiles.length;i<len;i++){
j=i;
while(j%4!
=0){
this.merge(this.tiles[j-1],this.tiles[j]);
j-=1;
}
}
break;
case‘D’:
for(vari=14;i=0;i--){
j=i;
while(j%4!
=3){
this.merge(this.tiles[j+1],this.tiles[j]);
j+=1;
}
}
break;
}
this.randomTile();
},
merge:
function(prevTile,currTile){
varprevVal=prevTile.getAttribute(‘val’);
varcurrVal=currTile.getAttribute(‘val’);
if(currVal!
=0){
if(prevVal==0){
this.setTileVal(prevTile,currVal);
this.setTileVal(currTile,0);
}
elseif(prevVal==currVal){
this.setTileVal(prevTile,prevVal*2);
this.setTileVal(currTile,0);
}
}
},
equal:
function(tile1,tile2){
returntile1.getAttribute(‘val’)==tile2.getAttribute(‘val’);
},
max:
function(){
for(vari=0,len=this.tiles.length;i<len;i++){
if(this.tiles[i].getAttribute(‘val’)==2048){
returntrue;
}
}
},
over:
function(){
for(vari=0,len=this.tiles.length;i<len;i++){
if(this.tiles[i].getAttribute(‘val’)==0){
returnfalse;
}
if(i%4!
=3){
if(this.equal(this.tiles[i],this.tiles[i+1])){
returnfalse;
}
}
if(i<12){
if(this.equal(this.tiles[i],this.tiles[i+4])){
returnfalse;
}
}
}
returntrue;
},
clean:
function(){
for(vari=0,len=this.tiles.length;i<len;i++){
this.container.removeChild(this.tiles[i]);
}
this.tiles=newArray(16);
}
}
vargame,startBtn;
window.onload=function(){
varcontainer=document.getElementById(‘div2048’);
startBtn=document.getElementById(‘start’);
startBtn.onclick=function(){
this.style.display=‘none’;
game=game||newgame2048(container);
game.init();
}
}
window.onkeydown=function(e){
varkeynum,keychar;
if(window.event){//IE
keynum=e.keyCode;
}
elseif(e.which){//Netscape/Firefox/Opera
keynum=e.which;
}
keychar=String.fromCharCode(keynum);
if([‘W’,‘S’,‘A’,‘D’].indexOf(keychar)-1){
if(game.over()){
game.clean();
startBtn.style.display=‘block’;
startBtn.innerHTML=‘gameover,replay?
’;
return;
}
game.move(keychar);
}
}
以上所诉就是本文的全部内容了,希望大家能够喜欢。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javascript 制作 游戏