html5小游戏代码-2048游戏

最新推荐文章于 2024-05-04 08:02:12 发布
最新推荐文章于 2024-05-04 08:02:12 发布
阅读量2.4w 收藏 72
点赞数 24
分类专栏： html5 学习代码 2048游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45128635/article/details/94152288
版权 
<!doctype html>
<meta name="author" content="苏道涵"/>
<meta name="keywords" content="2048"/>
<meta http-equiv="content-Type" content="text/html;charset=gb2312"/>


<html>
<head>
<title>2048小游戏</title>
<style>
.up,.down,.left,.right{
font-size:30px;


}
canvas{
border-style:solid;
float:left;
}
.right{float:left;
margin-top:80px;
margin-left:400px;
height:100px;
width:50px;
}
.down,.up{

margin-left:550px;
}
.left{
margin-top:80px;
margin-bottom:100px;

}

</style>
</head>


<body>
<h1 align=center>2048小游戏</h1>
<div class="down" onclick="down()">下</div>
<div class="right" onclick="right()">右</div>
<canvas id="drawing" height=200px width=200px ></canvas>
<div class="left" onclick="left()">左</div>
<div class="up" onclick="up()">上</div>
<script>
var tArray=new Array();
for(var i=0;i<4;i++){
tArray[i]=new Array();
for(var t=0;t<4;t++){
tArray[i][t]="";
}
}
var locx;var locy;
function produce(){
locx=Math.ceil(Math.random()*4-1);
locy=Math.ceil(Math.random()*4-1);
if(locx==-1||locy==-1||tArray[locx][locy]!=""){
produce();
}
}
produce();
tArray[locx][locy]=2;
produce();
tArray[locx][locy]=4;
var drawing=document.getElementById("drawing");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.beginPath();
context.lineWidth=0.25;
for(var t2=0;t2<3;t2++){
context.moveTo(50+t2*50,0);
context.lineTo(50+t2*50,200);
}
for(var i2=0;i2<3;i2++){
context.moveTo(0,50+i2*50);
context.lineTo(200,50+i2*50);
}

context.stroke();



}

function display(){
for(var t1=0;t1<4;t1++){
for(var i1=0;i1<4;i1++){
context.clearRect(50*t1,50*i1,50,50);
context.strokeRect(50*t1,50*i1,50,50);
context.fillText(tArray[t1][i1],20+50*t1,30+50*i1);
}
}

}
display();
var zeno=0;
function down(){

for(var t3=0;t3<4;t3++){
for(var i3=0;i3<4;i3++){
if(tArray[t3][i3]==""){
zeno++;
}
else if((zeno!=0)&&(i3>zeno)&&(tArray[t3][i3-1-zeno]==tArray[t3][i3])){
tArray[t3][i3-1-zeno]=tArray[t3][i3-1-zeno]+tArray[t3][i3];
tArray[t3][i3]="";
zeno++;
}
else{

if(tArray[t3][i3+1]==tArray[t3][i3]){
tArray[t3][i3]=tArray[t3][i3]+tArray[t3][i3+1];
tArray[t3][i3+1]="";

}


if(zeno!=0){
tArray[t3][i3-zeno]=tArray[t3][i3];
tArray[t3][i3]="";
}


}





}


zeno=0;
}
output();
display();
zeno=0;
}

function up(){
for(var t3=0;t3<4;t3++){
for(var i3=3;i3>=0;i3--){
if(tArray[t3][i3]==""){
zeno++;
}
else if((zeno!=0)&&(tArray[t3][i3+1+zeno]==tArray[t3][i3])){
tArray[t3][i3+1+zeno]=tArray[t3][i3+1+zeno]+tArray[t3][i3];
tArray[t3][i3]="";
zeno++;
}
else{

if(i3>0&&tArray[t3][i3-1]==tArray[t3][i3]){
tArray[t3][i3]=tArray[t3][i3]+tArray[t3][i3-1];
tArray[t3][i3-1]="";

}


if(zeno!=0){
tArray[t3][i3+zeno]=tArray[t3][i3];
tArray[t3][i3]="";
}


}





}


zeno=0;
}
output();
display();
zeno=0;
}

function right(){
for(var i3=0;i3<4;i3++){
for(var t3=0;t3<4;t3++){
if(tArray[t3][i3]==""){
zeno++;
}
else if((zeno!=0)&&(t3>zeno)&&(tArray[t3-1-zeno][i3]==tArray[t3][i3])){
tArray[t3-1-zeno][i3]=tArray[t3-1-zeno][i3]+tArray[t3][i3];
tArray[t3][i3]="";
zeno++;
}
else{

if(t3<3&&tArray[t3+1][i3]==tArray[t3][i3]){
tArray[t3][i3]=tArray[t3][i3]+tArray[t3+1][i3];
tArray[t3+1][i3]="";

}


if(zeno!=0){
tArray[t3-zeno][i3]=tArray[t3][i3];
tArray[t3][i3]="";
}


}





}


zeno=0;
}
output();
display();
zeno=0;
}

function left(){
for(var i3=0;i3<4;i3++){
for(var t3=3;t3>=0;t3--){
if(tArray[t3][i3]==""){
zeno++;
}
else if((zeno!=0)&&(t3+1+zeno<4)&&(tArray[t3+1+zeno][i3]==tArray[t3][i3])){
tArray[t3+1+zeno][i3]=tArray[t3+1+zeno][i3]+tArray[t3][i3];
tArray[t3][i3]="";
zeno++;
}
else{

if(t3>0&&tArray[t3-1][i3]==tArray[t3][i3]){
tArray[t3][i3]=tArray[t3][i3]+tArray[t3-1][i3];
tArray[t3-1][i3]="";

}


if(zeno!=0){
tArray[t3+zeno][i3]=tArray[t3][i3];
tArray[t3][i3]="";
}


}





}


zeno=0;
}
output();
display();
zeno=0;

}
function output(){
produce();
if(Math.random()>0.5)
tArray[locx][locy]=4;
else
tArray[locx][locy]=2;
}

</script>
</body>

</html>
苏道涵
关注
  • 24
    点赞
  • 踩
  • 72
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
用HTML编写的小游戏(源代码).zip
01-09
用HTML编写的小游戏(源代码).zip
C语言经典游戏代码大全（珍藏版）
热门推荐
C214574728的博客
02-17 6万+
发现很多朋友都想要一些小项目来练手，却找不到从哪里寻找，给大家整理了游戏项目开发源代码汇总。
2024年最新10款超炫HTML5游戏 附游戏源码，2024年最新使用指南
最新发布
2401_83620841的博客
05-04 876
棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。在线演示源码下载。
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 1万+
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
盘点25个Html游戏Game源码网页爱好者不容错过
adendean的博客
12-03 2479
盘点25个Html游戏Game源码网页爱好者不容错过
python游戏代码大全可复制,python简单的小游戏代码
S1112_的博客
03-04 5560
这篇文章主要介绍了python游戏编程入门游戏代码，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。哈喽铁子们。
c++小游戏大集结【免费复制源码】
yzy6668888的博客
08-12 1万+
else if (player[i].name == "女巫 " || player[i].name == "预言家 " || player[i].name == "猎人 " || player[i].name == "守卫 ")= 0 && (player[x].life == 0 || player[x].name == "狼人 " || x == i || TOU[x].toupiaoquan == 1))= "狼人 " || x == i || TOU[x].toupiaoquan == 1))
html5小游戏源码-2048.zip
11-07
HTML5小游戏源码-2048.zip是一个包含制作2048小游戏所需的所有资源的压缩包。2048是一款流行的数字拼图游戏，玩家通过上下左右滑动屏幕，使相同数字的方块合并，目标是达到2048这个数字。这款小游戏基于HTML5、CSS3...
html5前端小游戏-2048益智游戏
11-12
HTML5前端小游戏——2048是一款基于网页的益智游戏，由开发者Gabriele Cirulli于2014年创造。游戏的核心机制是通过合并相同数字的方块，目标是达到2048这个数值。游戏界面是一个4x4的网格，每个方格内随机出现一个...
HTML小游戏2- 2048网页版
10-24
使用技术：HTML+CSS+JS 在线演示地址：...说明：使用 HTML CSS 和 JavaScript 创建的2048网页版小游戏源代码。我们在很多地方都可以用，比如适用于不同类型的个人网站、游戏站等。
226款Html5小游戏源码-非积分
12-23
226款Html5小游戏源码
80个超好玩的html5网页小游戏源码
06-22
80个超好玩的html5网页小游戏源码
40个H5小游戏实例完整源码
10-18
Html5游戏平台源码，40款h5小游戏和多款有趣的测试。在浏览器可以直接运行。包含包括答题问卷、积分赚取、抽奖、找你妹，跑酷、2048、小鸟飞飞、飞的更高、一个都不能死......等，对与要写H5小游戏或者微信公众号小游戏的朋友是一个很好的参考，大家可以下载来看看
html5游戏案例--2048游戏
04-20
通过研究这个2048游戏的源代码，开发者不仅可以提升HTML5、CSS3和JavaScript的实践能力，还能深入理解游戏开发的逻辑流程，为将来制作更复杂的游戏奠定基础。同时，这也是一个很好的学习移动端事件处理和响应式设计...
用HTML实现简单的小游戏的多种（附完整源码）JavaScript小游戏详情介绍
王大师企业官方博客
10-27 3871
这是一个简单的JavaScript小游戏——坦克大战。在游戏中，玩家控制一个坦克，可以在地图上移动并射击敌人的坦克 在这个坦克大战游戏中，我们使用HTML的元素来表示坦克和子弹。CSS样式定义了坦克和子弹的外观。游戏的逻辑代码部分包含了以下函数：：根据当前坦克和子弹的位置，绘制游戏场景。这个函数会在移动坦克或射击子弹后被调用。：根据传入的移动方向参数，更新坦克的位置，并调用来重新绘制游戏场景。：创建子弹，并使用定时器和函数来更新子弹的位置，实现子弹的向上移动动画。当子弹到达顶部边界时，清除
HTML趣味钢琴小游戏源代码，钢琴琴谱练习小游戏源代码
Python代码大全
11-23 679
HTML趣味钢琴小游戏源代码，钢琴琴谱练习小游戏源代码。
html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
weixin_29890207的博客
05-31 807
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩can...
html+css+javascript实现小游戏2048（详解，附源代码）
baiqi123456的博客
08-05 6739
html+css+javascript实现小游戏2048（详解，附源代码） 上下左右的移动原理相同，这里只详细说明向上移动的方法 这里的上下左右由wasd四个键控制 html部分 先创建好2048的一个静态布局 zuiwaibian：一个大的框框，整体的游戏界面。 caidan：用于显示当前得分的区域。 a1，a2，a3，a4：是第一行的小方块。 b1，b2，b3，b4：是第二行的小方块。 c1，c2，c3，c4：是第三行的小方块。 d1，d2，d3，d4：是第四行的小方块。 <div id="zui
html网页2048小游戏代码
04-30
以下是一个简单的 HTML + JavaScript 实现的 2048 小游戏： ```html <!DOCTYPE html> <html> <title>2048 Game .tile { width: 100px; height: 100px; font-size: 48px; text-align: center; line-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值