Canvas游戏2048自由地图大小

最新推荐文章于 2023-02-09 11:53:26 发布
最新推荐文章于 2023-02-09 11:53:26 发布
阅读量144 收藏 1
点赞数
分类专栏： Canvas 游戏 文章标签： 游戏 html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33014695/article/details/122583610
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      background-color: black;
      color: white;
    }
  </style>
  <script>
    let numArray = [], line;
    let score, gameOver;
    let infoSpan, numInput;
    var c,ctx;

    function init(a) {
      score = 0;
      line = a;
      numArray.length = Math.pow(line, 2);
      gameOver = false;
      reset();

    }

    function newMap() {
      let k = parseInt(numInput.value);
      if (!isNaN(k)) {
        if (k < 2) {
          alert("玩什么呢？");
        } else {
          init(k);

        }
      } else {
        alert("错误！")
      }
    }

    function reset() {
      for (let i = 0; i < numArray.length; i++) {
        numArray[i] = undefined;
      }
      gameOver = false;
      scoreRest();
      putNum();
      show();
    }

    function scoreCount(a) {
      score += a;
      infoSpan.innerHTML = score;
    }

    function scoreRest() {
      score = 0;
      infoSpan.innerHTML = 0;
    }

    window.onload = function () {

      numInput = document.getElementById("lineInput");
      infoSpan = document.getElementById("info").querySelector("span");
      c=document.getElementById('c');
      ctx=c.getContext('2d');
      ctx.lineWidth=3;
      ctx.font = '25px "微软雅黑"';
      init(4);
    }
    window.onkeydown = function (e) {
      if (gameOver) {
        alert("失败了！请重来！");
        return;
      }
      switch (e.keyCode) {
        case 37:
          toLeftKey();
          putNum();
          show();
          break;
        case 38:

          toUPKey();
          putNum();
          show();

          break;
        case 39:
          toRightKey();
          putNum();
          show();
          break;
        case 40:
          toBottomKey();
          putNum();
          show();
          break;
      }
    }

    function show() {
      showFormat();
    }

    function getColorCube(k) {
      let c;
      switch (k){
        case 2:
          c= '#00FFFF'
          break;
        case 4:
          c= '#ff0000'
          break;
        case 6:
          c= '#5936ff'
          break;
        case 8:
          c= '#aa00ff'
          break;
        case 16:
          c= '#ff00cc'
          break;
        case 32:
          c= '#004bff'
          break;
        case 64:
          c= '#e6ff00'
          break;
        case 128:
          c= '#5e00ff'
          break;
        case 256:
          c= '#a2ff00'
          break;
        case 512:
          c= '#c800ff'
          break;
        case 1024:
          c= '#ff7300'
          break;
        case 2048:
          c= '#00ffb2'
          break;
      }
      return c;
    }

    function showFormat() {
      ctx.clearRect(0,0,c.width,c.height);
      let d;
      for (let i = 0; i < line; i++) {
        for (let j = 0; j < line; j++) {
          d = numArray[i * line + j];
          if (d === undefined) {

            ctx.fillStyle='#b1e1e855';
            ctx.strokeStyle='#b1e1e899';
            ctx.beginPath();
            ctx.rect(j*70,i*70,70,70);
            ctx.stroke();
            ctx.fill();
            ctx.closePath();
          } else {
            let k=getColorCube(d);
            ctx.fillStyle=k+'55';
            ctx.strokeStyle=k+'99';

            ctx.beginPath();
            ctx.rect(j*70,i*70,70,70);
            ctx.stroke();

            ctx.fill();
            ctx.fillStyle=k;
            switch (true){
              case d<10:
                ctx.fillText(d,j*70+27,i*70+45)
                break;
              case d<100:
                ctx.fillText(d,j*70+20,i*70+45)
                break;
              case d<1000:
                ctx.fillText(d,j*70+12,i*70+45)
                break;
              default:
                ctx.fillText(d,j*70+5,i*70+45)
                break;
            }

            ctx.closePath();

          }


        }


      }
      /*let c = "", d;

      for (let i = 0; i < line; i++) {
        for (let j = 0; j < line; j++) {
          d = numArray[i * line + j];
          if (d === undefined) {
            c = c + "<span></span>" + "";
          } else {
            c = c + `<span class="${getColorCube(d)}">${d}</span>`
          }


        }
        c += "<br/>";


      }

      document.getElementById("cube").innerHTML = c;*/


    }

    function putNum() {

      let k = [];
      for (let i = 0; i < numArray.length; i++) {
        if (numArray[i] === undefined) {
          k.push(i);
        }
      }


      let t = rand(k);
      if (t) {
        if (t.length > 1) {
          numArray[t[0]] = 2;
          numArray[t[1]] = 2;
        } else {
          numArray[t[0]] = 2;
        }
        if (k.length <= 2) {
          if (!checkCantMove()) {
            gameOver = true;
            //为什么是显示后才显示效果，是因为按键后的运算大有延迟，这个先执行。
            alert("你失败了！");

          }
        }
      } else {
        console.log("I can't put anything!");
      }
    }

    function checkCantMove() {
      for (let i = 0; i < numArray.length; i++) {
        if (numArray[i] === undefined) {
          return true;
        }
        if (i % line - 1 > -1) {
          if (numArray[i] === numArray[i - 1]) {
            return true;
          }
        }
        if (i % line + 1 < line - 1) {
          if (numArray[i] === numArray[i + 1]) {
            return true;
          }
        }
        if (i % line - line > -1) {
          if (numArray[i] === numArray[i - line]) {
            return true;
          }
        }
        if (i % line + line < numArray.length) {
          if (numArray[i] === numArray[i + line]) {
            return true;
          }
        }
      }
      return false;
    }

    function toUPKey() {
      let c = -1;
      for (let i = 0; i < line; i++) {
        for (let j = 1; j < line; j++) {
          if (numArray[i + j * line] !== undefined) {
            for (let k = 0; k < j; k++) {
              if (numArray[i + (j - k - 1) * line] === undefined) {
                c = i + (j - k - 1) * line;
              } else {
                if (numArray[i + (j - k - 1) * line] === numArray[i + j * line]) {
                  numArray[i + (j - k - 1) * line] += numArray[i + j * line];
                  numArray[i + j * line] = undefined;
                  scoreCount(numArray[i + (j - k - 1) * line]);
                  c = -1;
                  break;
                } else {
                  break;
                }
              }
            }
            if (c !== -1) {
              numArray[c] = numArray[i + j * line];
              numArray[i + j * line] = undefined;
              c = -1;
            }
          }
        }
      }
    }

    function toBottomKey() {
      let c = -1;
      for (let i = 0; i < line; i++) {
        for (let j = line - 2; j > -1; j--) {
          if (numArray[i + j * line] !== undefined) {
            for (let k = 1; k < line - j; k++) {
              if (numArray[i + (j + k) * line] === undefined) {
                c = i + (j + k) * line;
              } else {
                if (numArray[i + (j + k) * line] === numArray[i + j * line]) {
                  numArray[i + (j + k) * line] += numArray[i + j * line];
                  numArray[i + j * line] = undefined;
                  scoreCount(numArray[i + (j + k) * line]);
                  c = -1;
                  break;
                } else {
                  break;
                }
              }
            }
            if (c !== -1) {
              numArray[c] = numArray[i + j * line];
              numArray[i + j * line] = undefined;
              c = -1;
            }
          }
        }
      }
    }

    function toLeftKey() {
      let c = -1;
      for (let i = 0; i < line; i++) {
        for (let j = 1; j < line; j++) {
          if (numArray[i * line + j] !== undefined) {
            for (let k = 0; k < j; k++) {
              if (numArray[i * line + j - k - 1] === undefined) {
                c = i * line + j - k - 1;
              } else {
                if (numArray[i * line + j - k - 1] === numArray[i * line + j]) {
                  numArray[i * line + j - k - 1] += numArray[i * line + j];
                  numArray[i * line + j] = undefined;
                  scoreCount(numArray[i * line + j - k - 1]);
                  c = -1;
                  break;
                } else {
                  break;
                }
              }
            }
            if (c !== -1) {
              numArray[c] = numArray[i * line + j];
              numArray[i * line + j] = undefined;
              c = -1;
            }
          }
        }
      }
    }

    function toRightKey() {
      let c = -1;
      for (let i = 0; i < line; i++) {
        for (let j = line - 2; j > -1; j--) {
          if (numArray[i * line + j] !== undefined) {
            for (let k = 1; k < line - j; k++) {
              if (numArray[i * line + j + k] === undefined) {
                c = i * line + j + k;
              } else {
                if (numArray[i * line + j + k] === numArray[i * line + j]) {
                  numArray[i * line + j + k] += numArray[i * line + j];
                  numArray[i * line + j] = undefined;
                  c = -1;
                  scoreCount(numArray[i * line + j + k]);
                  break;
                } else {
                  break;
                }
              }
            }
            if (c !== -1) {
              numArray[c] = numArray[i * line + j];
              numArray[i * line + j] = undefined;
              c = -1;
            }
          }
        }
      }
    }

    function rand(arr) {
      if (arr.length < 1) {

        return false;
      }
      if (arr.length < 2) {
        let arr2 = [...arr];
        let c = myRandom(0, arr2.length - 1);
        let a = arr2[c];
        return [a];
      } else {
        let arr2 = [...arr];
        let c = myRandom(0, arr2.length - 1);
        let a = arr2[c];
        arr2.splice(c, 1);
        c = myRandom(0, arr2.length - 1);
        let b = arr2[c];

        return [a, b];
      }

    }

    function myRandom(min, max) {
      return min + Math.floor((max - min + 1) * Math.random());

    }
  </script>
</head>
<body>
<div id="info">
  <span>0</span>
</div>
<div  >
<canvas id="c" width="900" height="900" style="border: 1px solid white;"></canvas>
</div>
<button onclick="reset()">再来一局</button>
<button onclick="newMap()">新地图</button>
<label>
  <input id="lineInput" type="number" placeholder="请输入行数"/>
</label>


</body>
</html>

KatyLight
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现贪吃蛇游戏 canvas绘制地图
01-19
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 思路 400px * 400px的地图，每20px*20px分成单元格绘制蛇身 每次移动即更换尾 部 头部的颜色 全部代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> <style> html, body { display:
H5 Canvas实现地图，结合 httpgeojson.io 可自由绘制地图.rar
10-19
在这个项目中，“H5 Canvas实现地图，结合 httpgeojson.io 可自由绘制地图.rar”利用了Canvas API和ECharts库来创建一个交互式、可自定义的地图应用。ECharts是一款由百度开发的开源数据可视化库，它支持多种图表...
html5 canvas 游戏地图绘制
10-25 692
代码如下： 1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></t...
仅需一维数组，JS实现2048，无限长宽
KatyLight的博客
09-08 165
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #cube { padding: 10px; } #info { width: 300px; b.
html5 游戏 地图,html5 canvas猎捉外星人游戏地图显示演示
weixin_36480255的博客
05-31 172
JavaScript语言：JaveScriptBabelCoffeeScript确定'use strict';var _class3, _temp;function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a c...
Web 游戏 「梦幻西游」地图 Demo ，纯 Canvas 画
weixin_33800463的博客
01-07 410
前言 本程序仅仅学习，顺便回忆小学玩的游戏。 项目初心为了验证一些对 Canvas 想法。 项目大量运用 ES6，无 ";" 写法。 目录 文件介绍 职责分类 缺点 文件 img jxk（剑侠客图片） background（地图图片） js base runloop.js（循环） view jxk.js（剑侠客） map_one.js（地图） game.js index...
wpf 可缩放的canvas
06-02
在Windows Presentation Foundation (WPF) 中，Canvas是一个非常基础且重要的布局控件，它允许开发者在二维平面上自由地定位元素。然而，标准的Canvas并不支持缩放功能，这意味着一旦元素被放置，它们的大小和位置...
百度地图自定义水波纹(雷达)效果覆盖物
05-07
在`initialize`方法中，创建一个`<canvas>`元素，并设置其大小与地图坐标对应。然后，通过`canvas.getContext('2d')`获取绘图上下文，编写绘制圆环和渐变的代码。 3. **动画效果**：为了模拟水波纹的扩散，我们需要...
WPF 基础视频教程（共50集）-8.使用Canvas面板进行基于坐标的布局
03-19
与Grid或StackPanel等其他布局控件不同，Canvas不会自动调整其子元素的大小或位置，而是完全依赖于开发者指定的X和Y坐标。这使得Canvas成为一个极其灵活的布局工具，特别是在创建自定义图形、图表或拖放界面时。 要...
BoxResizingMap:通过在地图上绘制框可调整大小的地图
06-13
BoxResizingMap可能利用了Canvas API来实现在地图上绘制可调整大小的框。 3. **GIS库**：如Leaflet，是一个轻量级的开源JavaScript库，用于创建交互式的二维地图。它提供了丰富的地图操作接口，包括缩放、平移等，...
canvas+js实现2048小游戏
01-16
通过使用多个二维数组，使用javascript在canvas对应坐标上绘制对应的数字，再通过JavaScript的事件监听来实现。
HTML5——canvas制作游戏2048
11-08
HTML5，canvas制作游戏2048
2048canvas游戏
05-28
canvas版的2048小游戏，canvas版的2048小游戏，canvas版的2048小游戏，canvas版的2048小游戏，canvas版的2048小游戏
自己用js和canvas写的my2048小游戏
04-13
自己用js和canvas写的2048，样式有点丑，可以设置调节。自己玩了两把，还行吧，能玩。想要瞅瞅源码的，可以下载看看，做好心理准备，丑陋的代码看着心慌。
微信小程序：实现canvas绘制地图及简单拖动
03-17
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
[Canvas]RPG游戏雏形 （地图加载，英雄出现并移动）
weixin_30618985的博客
03-06 408
源码请点此下载并用浏览器打开index.html观看 图例： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>...
HTML5 canvas 2048小游戏
xtingjie的博客
02-27 448
<!DOCTYPE html> <html> <head> <title>2048</title> <style> canvas{ background-color: white; } </style> </head> <body> <canvas id="mycanvas" style="position:absolute ">该浏览器不支持.
从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
douyh的专栏
12-24 612
项目演示 项目演示地址： 体验一下 项目源码： 项目源码 代码结构 本节做完效果 游戏主页面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
canvas 制作2048
m0_66711291的博客
02-09 538
对UI不满意可以自行调整，这里只是说一下游戏的逻辑，具体的API调用不做过多展示。
canvas 小游戏2048
最新发布
05-27
了解了2048的玩法之后，我们可以开始着手开发canvas小游戏版的2048了。在canvas中，我们需要绘制每个数字的方块以及它们的移动、合并等动作。以下是2048小游戏的基本实现思路： 1. 使用canvas绘制游戏界面，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值